Table of contents
Jekyll-pwa-plugin
Tags: ,,
JekyllのPWAをサポートします。 サービスワーカーを生成し、Google Workboxでプリキャッシュを提供します。
JekyllのPWAをサポートします。 サービスワーカーを生成し、Google Workboxでプリキャッシュを提供します。
インストール
Gemfileを編集
# Gemfile group :jekyll_plugins do gem 'jekyll-pwa-plugin' end_config.ymlを編集
# _config.yml plugins: - jekyll-pwa-pluginPluginのインストール
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()
);
関連プラグイン
- Jekyll-workbox-plugin - Google WorkboxとのJekyll連携でService Workerを自動作成。
ブログ記事
下記に掲載を希望される方はご連絡ください (詳細)
- Jekyll PWA (lifeintech.com) [EN]