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')
}

正規表現のマッチングを使って、該当するファイルがあればローカルにキャッシュしてくれます。

Developer toolのApplicationタブからキャッシュ状況がみれます

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,
        })
      ]
    })
  )
}

こんな感じでキャッシュされていることが確認できます。