JavaScriptService worker / Workbox
WorkboxのGetting startedを触ってみる
オフライン対応系でWorkboxが良いらしいという話を聞いたので、試してみます。今回はhttps://developers.google.com/web/tools/workbox/guides/get-startedに […]
オフライン対応系でWorkboxが良いらしいという話を聞いたので、試してみます。今回はhttps://developers.google.com/web/tools/workbox/guides/get-startedにある内容をなぞってみています。
目次
ベースのファイルを用意する
Service Workerまわりを設定するためのページをまずは用意します。
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello workbox</title>
</head>
<body>
<div id="root">
<h1>Hello workbox</h1>
</div>
<script src="./scripts/app.js"></script>
</body>
</html>
scripts/app.js
console.log('Welcome to my app')Service WorkerでWorkboxをロードする
Service WorkerのregisterとWorkboxのロードを設定します。
sw.js
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
if (workbox) {
console.log('Yeah! workbox did load')
} else {
console.log('Oh, workbox did not load')
}index.htmlに追加するコード
追加したファイルをService Workerで登録させます。
<script src="./scripts/app.js"></script>
<!-- この下にコードを追加する -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js')
})
}
</script>JSファイルをキャッシュする
いよいよローカルでのファイルキャッシュをはじめましょう。
Workboxでは、ファイル名を指定してキャッシュすることができます。
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
if (workbox) {
workbox.routing.registerRoute(
new RegExp('.*\.js'),
workbox.strategies.networkFirst()
)
} else {
console.log('Oh, workbox did not load')
}正規表現のマッチングを使って、該当するファイルがあればローカルにキャッシュしてくれます。
Tips:workbox.strategiesについて
これなんだろうと思って調べてみたところ、「キャッシュ戦略」を宣言している様子です。これは「ネットワークへの接続に失敗したらオフラインのデータを見る」のか「オフラインのデータを先に見る」のかみたいな宣言だと思えば良さそうです。
戦略の種類はWorkbox Strategiesをみるのが詳しいですので、そこをみて色々試してみましょう。
CSS / 画像ファイルをキャッシュする
続いてCSSや画像ファイルのキャッシュもしていきます。
キャッシュの戦略や有効期限の設定が違う様子です。
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
if (workbox) {
registerRoutes()
} else {
console.log('Oh, workbox did not load')
}
function registerRoutes() {
workbox.routing.registerRoute(
new RegExp('.*\.js'),
workbox.strategies.networkFirst()
)
workbox.routing.registerRoute(
/.*\.css/,
workbox.strategies.staleWhileRevalidate({
cacheName: 'css-cache',
})
)
workbox.routing.registerRoute(
/.*\.(?:png|jpg|jpeg|svg|gif)/,
workbox.strategies.cacheFirst({
cacheName: 'image-cache',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 20,
maxAgeSeconds: 7 * 24 * 60 * 60,
})
]
})
)
}こんな感じでキャッシュされていることが確認できます。
ここまでの進捗
GitHub: https://github.com/hideokamoto/workbox-practice/tree/20180320
ブックマークや限定記事（予定）など
WP Kyotoサポーター募集中
WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。
14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。