WorkboxをCDNの経由ではなくローカルからimportScriptsするための設定

方法

workboxOptionsにimportWorkboxFrom: 'local'を追加すれば良い。

やりたいこと

Workboxのデフォルト設定しないと、以下のようにからWorkboxをインポートしている。

code:service-worker.js

// これはデフォルトの設定

...

やりたいのは、これを自分のホストしているサイトから（ローカルから）importScripts()すること。

メリットとしては、

外部サイトへの依存がなくなる

ダウンする可能性などがある

Googleへサーバーへアクセスせずに済む

訪れたユーザーがGoogleからトラッキングされる可能性をなくす

もう少し詳しい説明

以下のように、workboxOptionsにimportWorkboxFrom: 'local'を追加すれば良い。

code:js

...

workboxOptions: {

importWorkboxFrom: 'local',

...

上記の設定はWebpackを使っていれば、webpack.config.jsだったり、Vueだとvue.config.jsのmodule.exports = {pwa: {workboxOptions: ...}}に設置するもの。

実際のコミット:

自動生成されるservice-worker.js

上記の設定をするだけで、以下のようにService Workerが自動生成される。

code:service-worker.js

importScripts("/precache-manifest.....js", "/workbox-v3.6.3/workbox-sw.js");

workbox.setConfig({modulePathPrefix: "/workbox-v3.6.3"});

...

Workbox公式

https://gyazo.com/cb4ea59df3d4de89873a57c7299bc287

参考: