sw-precacheで外部サイトのファイルをキャッシュ

(2018/9/14追記)
sw-precache, sw-toolboxは既に更新を終了していますので、Workboxに移行してください。
https://github.com/GoogleChrome/workbox

環境
- Node.js v7.3.0
- クライアントはChrome v60.0

予めsw-precacheに加えてsw-toolboxをインストールしておく

npm install sw-precache
npm install sw-toolbox

下記スクリプトをrollupなどの適当なビルドスクリプトに含めておく

build.js

const precache = require('sw-precache');
const home = 'path/to/home';

precache.write(`${home}/precache.js`, {
  staticFileGlobs: [
    `${home}/*.{js,html,css}`,
    `${home}/assets/**/*.{png,jpg,gif}`
  ],
  stripPrefix: `${home}/`,
  runtimeCaching: [
    {urlPattern: /^https:\/\/maxcdn\.bootstrapcdn\.com/, handler: 'cacheFirst'},
    {urlPattern: /^https:\/\/code\.jquery\.com/, handler: 'cacheFirst'},
  ]
}, () => {});

生成されたprecache.jsをserviceWorkerに登録する。

staticFileGlobsで指定したパスのファイルは全てprecache.jsに記載され、ServiceWorker登録時に自動的にキャッシュされる。クロスオリジンの制約があるので、同じドメインのファイルしかキャッシュできない。

一方、runtimeCachingのurlPatternで指定したドメインのファイルは、handlerで指定したstrategyに従って、初回アクセス時にキャッシュされる。これは他ドメインのファイル（例えばCDNに置いてあるライブラリ）にも適用可能。

strategyについては、Offline cookbook参照のこと
https://jakearchibald.com/2014/offline-cookbook/

なお、sw-toolboxで対応しているstrategyは次の５つ

• networkFirst（Network falling back to cache、ネットワークが利用できない場合キャッシュを利用）
• cacheFirst（Cache falling back to network、キャッシュが利用できない場合ネットワークから取得）
• fastest（Cache & network race、ネットワーク接続とキャッシュを同時に要求し、レスポンスが早い方を採用）
• cacheOnly（オンライン接続せずキャッシュのみを使用）
• networkOnly(キャッシュしない)