前回の記事：WorkboxのPrecache Filesを試す

前回の記事でprecacheするファイルの設定などを試しました。ただrevisionのハッシュの指定を毎回変えることや、いろんなファイル（特に画像）を手動で登録・更新するのはかなりつらみがありそうです。

なので今回はWorkboxのCLIで設定する方法を試してみます。

Workbox CLIのインストール

serverlessやionicなどと同様、npmからDLできますので入れておきましょう。

$ npm install workbox-cli --global
$ workbox --version
3.0.0

対話コマンドでセットアップする

workbox-cliでは対話形式でセットアップができます。以下のコマンドをアプリケーションルートで実行しましょう。

$ workbox wizard --injectManifest

アプリケーションルートの指定

? What is the root of your web app (i.e. which directory do you deploy)? (Use arrow keys)
❯ css/ 
  images/ 
  scripts/ 
  ──────────────
  Manually enter path 

SPAではbuild/やpublic/などにビルドファイルが出力されますので、そこを選択します。今回は公開用ディレクトリなども設定していないので、Manually enter pathを選びます。するとパスを聞かれますので、./と書いて現在のディレクトリを指定しましょう。

? Please enter the path to the root of your web app: ./

プレキャッシュしたいファイルの指定

続いてprecacheしたいファイルの種類を聞かれます。

? Which file types would you like to precache? (Press <space> to select, <a> to toggle all, <i> to inverse selection)
❯◉ css
 ◉ png
 ◉ html
 ◉ json
 ◉ js

ディレクトリ配下のファイルは基本オンになってるみたいです。アプリに使わないファイルやprecacheしたくないファイル形式は除外しましょう。

ベースとなるService Workerファイルパスの指定

Service Workerで読み込まれるファイルのパスを指定します。このこで指定したファイルの中身と、このウィザードで設定した内容を元に実際のアプリで利用するService Workerファイルを生成します。そのためworkbox.precaching.precacheAndRoute([])がファイルに記述されている必要があり、引数は常に[]である必要があります。これは[]の中に記述する内容は後述のビルドコマンドで挿入されるためです。

? Where's your existing service worker file? To be used with injectManifest, it should include a call to 'workbox.precaching.p
recacheAndRoute([])' 

ビルドするService Workerファイルパスの指定

ビルドコマンドで生成するファイルのパスを聞かれます。ここで先ほどのファイルを同じパスにすると、ビルド時にエラーが出ますのでご注意ください。

? Where would you like your service worker file to be saved? (sw.js) sw-build.js

Configファイルの保存

最後に設定ファイルのファイル名を聞かれますので、指定しましょう。デフォルト値があるのでそのままそれに従うのも１つかなと思います。

? Where would you like to save these configuration options? (workbox-config.js) 

Service Workerファイルのビルド

ここまでで準備完了です。以下のようなメッセージが表示されますので、実行してビルドしましょう。

To build your service worker, run

  workbox injectManifest workbox-config.js

as part of a build process. See https://goo.gl/fdTQBf for details.
You can further customize your service worker by making changes to workbox-config.js. See https://goo.gl/8bs14N for details.

ビルドに成功すると、以下のようなメッセージが表示されます。

$ workbox injectManifest workbox-config.js
Using configuration from /Users/develop/html/webcomponent/workbox/workbox-config.js.
The service worker was written to sw-build.js
6 files will be precached, totalling 236 kB.

ビルドされたファイルを開いてみると、設定した内容に基づいてprecacheするファイルの指定がされていることがわかります。

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
if (workbox) {
  registerRoutes()
  initPrecaching()
} else {
  console.log('Oh, workbox did not load')
}

function initPrecaching() {
  workbox.precaching.precacheAndRoute([
  {
    "url": "css/style.css",
    "revision": "6dc8050a8cbd35afe5c81575f4bedef6"
  },
  {
    "url": "images/example.png",
    "revision": "0c48f4a717e32e5646b753d28c5e3756"
  },
  {
    "url": "index.html",
    "revision": "4845f76b0ee45f51a49cf658c6c3778a"
  },
  {
    "url": "scripts/app.js",
    "revision": "5c81403e5f5a9ca529a47d78051526b9"
  },
  {
    "url": "sw.js",
    "revision": "e04da3adc703b44803a0a5bd9d6782c2"
  },
  {
    "url": "workbox-config.js",
    "revision": "348cd7102c02098b5da00cec47330671"
  }
]);
}

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

最後に、index.htmlで読み込んでいるファイルをworkbox-cliでビルドしたものに差し替えましょう。

    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('./sw-build.js')
        })
      }
    </script>

これで指定したファイルがprecacheされるようになりました。

CLI / webpack / gulpを使うメリット

今回はCLIのみの紹介ですが、これらのツールで生成するようにすることでprecacheするファイルの漏れをなくすことができるというメリットがあります。
また、revisionの更新なども手動では漏れることが予想されますが、これも自動化できるのはかなり便利です。

ということでwebpack / gulpを使いつつ、create-react-appなど諸般の事情で使えない場合はCLIでカバーしていくような学習方法がよさそうかなと思います。

ここまでの進捗

GitHub: https://github.com/hideokamoto/workbox-practice/tree/20180322