workbox v2 から v4 へ upgrade する

当サイトの、workbox を v2 から v4 へ upgrade しました。
upgrade で実施したことを記載します。

前提

• npm outdated の実行結果
  以下になります。
  

  $ npm outdated
  

  Package                         Current  Wanted  Latest  Location
  jquery                            2.2.4   2.2.4   3.3.1  clean_blog_frontend
  workbox-broadcast-cache-update    2.1.3   2.1.3   3.6.3  clean_blog_frontend
  workbox-webpack-plugin            2.1.3   2.1.3   4.1.1  clean_blog_frontend
  

  jquery は 使用している CMS 都合でバージョン UP が難しいため、放置しています。
  workbox-broadcast-cache-update、workbox-webpack-plugin を Upgrade します。

workbox-broadcast-cache-update

Migrate from Workbox v3 to v4  |  Workbox  |  Google Developers に、workbox-broadcast-cache-update は 名称が変更された旨の記述があります。
Uninstall、Install で新しい、workbox-broadcast-update に変更します。

npm uninstall workbox-broadcast-cache-update 
npm install workbox-broadcast-update

workbox-webpack-plugin

Migrate from Workbox v3 to v4  |  Workbox  |  Google Developers に記載があり、引用します。

The naming of some options that can be passed in to either workbox-cli, workbox-build, or workbox-webpack-plugin has changed. Whenever >”Url” was used in an option name, it’s been deprecated in favor of “URL”. This means that the following option names are preferred:

dontCacheBustURLsMatching ignoreURLParametersMatching modifyURLPrefix templatedURLs The “Url” variation of those option names still works in v4, but will result in a warning message. We encourage developers to migrate in >advance of the v5 release.

Url 関連の変数名称が変わった裁の記述があるので、webpack.config.js 周辺が影響を受けそうです。
面倒なので、Upgradeしてその後のエラーに対処していこうかと思います。

npm uninstall workbox-webpack-plugin
npm install workbox-webpack-plugin

エラー対処

build 時に発生したエラーと対処した内容について記載します。

TypeError: WorkboxPlugin is not a constructor

これは、以下のエラーです。
* webpack - new WorkboxPlugin({ TypeError: WorkboxPlugin is not a constructor - Stack Overflow
* workbox-webpack-plugin を v2 から v3 へ アップデートする | Monotalk

v2 > v3 の変更点になります。

ValidationError: “swSrc” is not a supported parameter.

続いて、以下のエラーが発生しました。

ValidationError: "swSrc" is not a supported parameter.

WARING への対処

続いて、エラー解消後に発見した WARING への対処方法を記載します。

In Workbox v3 and later, this is usually not needed

WARNING in You're using the following Workbox configuration options: [globDirectory, globIgnores, globPatterns]. In Workbox v3 and later, this is usually not needed. Please see https://goo.gl/EQ4Rhm for more info.

workbox-webpack-plugin を v2 から v3 へ アップデートする | Monotalk に記載の警告と同様です。

WARNING in The ‘modifyUrlPrefix’ option has been renamed to ‘modifyURLPrefix’.

警告の全文は以下になります。

WARNING in The 'modifyUrlPrefix' option has been renamed to 'modifyURLPrefix'. Please update your config. 'modifyUrlPrefix' is now deprecated and will be removed in a future release of Workbox.     

modifyUrlPrefix が、modifyURLPrefix に変更されたという警告です。
名称を変更したところ以下警告が出力されました。

WARNING in You're using the following Workbox configuration options: [modifyURLPrefix]. This will not have any effect, as it will only modify files that are matched via 'globPatterns'. You can remove them from your config, and learn more at https://goo.gl/EQ4Rhm

modifyURLPrefix の記載内容が効果がないという警告です。globPatterns に Match しているファイルで置換が行われた箇所がないのかと思いましたので、modifyURLPrefix の記載を削除しました。modifyURLPrefix には以下の記載をしていました。

modifyURLPrefix: {
    'webpack_bundles': 'static/webpack_bundles',
    'js': 'static/js',
},

プログラム実装上の修正箇所

以下は、ビルド実行後に生成された ServiceWorker を確認、実際に動作させた後に修正した箇所になります。

workbox-sw.prod.v2.1.3.js の読み込みを削除

InjectManifest で、自動的に以下のimportScripts の記述が書き込まれるようになりました。

importScripts("static/webpack_bundles/precache-manifest.c8fbe3b8d6065422a95f9542633599ab.js", "https://storage.googleapis.com/workbox-cdn/releases/4.1.1/workbox-sw.js");

もともと記載していた 以下の importScripts の記述は削除しました。

importScripts('static/js/workbox-sw.prod.v2.1.3.js');

ServiceWorker の実装の変更 precache > precacheAndRoute

InjectManifest モードで、v2 では ServiceWorker 内に precache の実装が挿入されていましたが、precache-manifest の読み込みを行う、importScript追加されるようになりました。 v2 では、以下のように記載していました箇所を、

/* eslint-disable no-undef */
const workboxSW = new WorkboxSW();
workboxSW.precache([]);
/* eslint-enable no-undef */

以下の実装に変更しました。self.__precacheManifest に precache 対象のリソースが記載されています。

workbox.precaching.precacheAndRoute(self.__precacheManifest || []);

serviceWorker.js:7 Uncaught TypeError: Cannot read property ‘registerRoute’ of undefined

Migrate from Workbox v2 to v3  |  Workbox  |  Google Developers
v2 から v3 のバージョンアップ時に、 workbox.router.registerRoute は、 workbox.routing.registerRoute と記述するようになりました。
古い実装のまま動作させたため発生したエラーになります。

Public path を追加した

precache-manifest で生成されるリソースのパスが、期待するパスにならなかったため、publicPath を指定しました。

    output: {
        path: cleanBlogRoot + "/static/webpack_bundles",
        filename: "[name]-[hash].js",
        crossOriginLoading: 'anonymous',
        publicPath: "/static/webpack_bundles/"
    },

Upgrade 後の workbox の バージョン

4.1.1 になりました。

npm list --depth 0 | grep workbox
├── workbox-broadcast-update@4.1.1
└── workbox-webpack-plugin@4.1.1

参考

以下、参考にしました。

• Workbox webpack Plugins  |  Workbox  |  Google Developers

• ServiceWorkerを簡単に書けるworkbox-swの使い方 - Qiita

• Write precache-manifest path · Issue #1508 · GoogleChrome/workbox

以上です。