LinkSearchMenuExpandDocument
Table of contents

Jekyll-pwa-plugin

Gem Version 

Tags: , ,

JekyllのPWAをサポートします。 サービスワーカーを生成し、Google Workboxでプリキャッシュを提供します。

インストール

  1. Gemfileを編集

    # Gemfile
    group :jekyll_plugins do
      gem 'jekyll-pwa-plugin'
    end
    
  2. _config.ymlを編集

    # _config.yml
    plugins:
      - jekyll-pwa-plugin
    
  3. Pluginのインストール

    bundle
    

設定

# _config.yml
pwa:
  enabled: false # Optional
  sw_src_filepath: service-worker.js # Optional
  sw_dest_filename: service-worker.js # Optional
  dest_js_directory: assets/js # Required
  precache_recent_posts_num: 5 # Optional
  precache_glob_directory: / # Optional
  precache_glob_patterns: # Optional
    - "{js,css,fonts}/**/*.{js,css,eot,svg,ttf,woff}"
    - index.html
  precache_glob_ignores: # Optional
    - sw-register.js
    - "fonts/**/*"
// service-worker.js

// set names for both precache & runtime cache
workbox.core.setCacheNameDetails({
    prefix: 'my-blog',
    suffix: 'v1',
    precache: 'precache',
    runtime: 'runtime-cache'
});

// let Service Worker take control of pages ASAP
workbox.skipWaiting();
workbox.clientsClaim();

// let Workbox handle our precache list
workbox.precaching.precacheAndRoute(self.__precacheManifest);

// use `networkFirst` strategy for `*.html`, like all my posts
workbox.routing.registerRoute(
    /\.html$/,
    workbox.strategies.networkFirst()
);

// use `cacheFirst` strategy for images
workbox.routing.registerRoute(
    /assets\/(img|icons)/,
    workbox.strategies.cacheFirst()
);

// third party files
workbox.routing.registerRoute(
    /^https?:\/\/cdn.staticfile.org/,
    workbox.strategies.staleWhileRevalidate()
);

ブログ記事

下記に掲載を希望される方はご連絡ください (詳細)

Back to top


Back to top

Copyright © 2021 Otti

Page last modified: