Workboxでuser-agentを確認する

workbox

Service Workerをライトに使えるようにするためのもの。

developers.google.com

PWA化も可能だし、簡単にhtmlや画像などのリソースをキャッシュさせることができる。

使い方

１. sw.jsを用意する。

 /* global workbox */
workbox.precaching.precacheAndRoute([], {});
 
workbox.routing.registerRoute(
  /\.+\.html/,
  workbox.strategies.cacheFirst({
    cacheName: "page",
    cacheExpiration: {
      maxAgeSeconds: 86400,
    },
  }),
  "GET",
);

workbox.routing.registerRoute(
  /\.(jpg|jpeg|png|svg|woff|ttf|eot)/,
  workbox.strategies.cacheFirst({
    cacheName: "assets",
    cacheExpiration: {
      maxAgeSeconds: 1209600,
    },
  }),
  "GET",
);

２. webpackでworkboxを定義してビルドする。

pluginが用意されているのでそれを使う。

const WorkboxPlugin = require("workbox-webpack-plugin");
...
    new WorkboxPlugin.InjectManifest({
      swSrc: path.resolve(rootDir, "./src/sw.js"),
      swDest: "bundle-sw.js",
    }),
...

３. index.htmlでservice workerを登録する。

...
            if (navigator.serviceWorker != null) {
              let isFirstInstall = navigator.serviceWorker.controller == null;
              navigator.serviceWorker.addEventListener('controllerchange', () => {
                if (isFirstInstall) {
                  isFirstInstall = true
                } else {
                  // Update detected
                  // Prompt to reload
                }
              });
              navigator.serviceWorker.register('/bundle-sw.js');
            }

self

workbox、つまりワーカーはselfを参照できる。

sw.js

console.log(self);

userAgentを確認してキャッシュを変更したいと思っていたが、selfからuserAgentも取得できた。