Workbox v5 2020年の1月にリリースされていたので、workbox-webpack-plugin をv3 からv5へ移行してみました。
移行時に実施したことを記載します。

前提

  • 移行前のWorkboxのVersion
    移行前のWorkboxのVersionは以下の通りです。
    % npm list --depth 1 | grep workbox

├── workbox-sw@3.6.3
└─┬ workbox-webpack-plugin@3.6.3
  └── workbox-build@3.6.3

インストール

workbox-sw と、workbox-webpack-plugin のVersionを上げるため、npm installコマンドを実行します。

npm install workbox-webpack-plugin@latest --save-dev
npm install workbox-sw@latest --save-dev
npm audit fix

Webpack でビルドを実行して、出力されるエラーに対処する

インストール後に、webpack.config.js はそのままで、試しにビルドをして出力されるエラーに対処していきます。

handlerに指定できるStorategyの名称変更

以下のエラーが出力されました。 

ERROR in Please check your GenerateSW plugin configuration:
child "runtimeCaching" fails because ["runtimeCaching" at position 0 fails because [child "handler" fails because ["handler" must be a Function, "handler" must be one of [CacheFirst, CacheOnly, NetworkFirst, NetworkOnly, StaleWhileRevalidate]]]]

以前は、小文字始まりだったのが、大文字始まりでの指定に変更されています。

  • 修正前

            new GenerateSW({
            importWorkboxFrom : 'cdn',
            runtimeCaching: [
                {
                    urlPattern: /\/api\/v2\/.+/,
                    handler: 'networkFirst',
                    options: {
                        expiration: {
                            maxAgeSeconds: 60 * 60 * 24, 
                            maxEntries: 20
                        },
                        cacheName: "api",
                        cacheableResponse: {
                            statuses: [0, 200]
                        }
                    }
                },

  • 修正後 

            new GenerateSW({
            importWorkboxFrom : 'cdn',
            runtimeCaching: [
                {
                    urlPattern: /\/api\/v2\/.+/,
                    handler: 'NetworkFirst',
                    options: {
                        expiration: {
                            maxAgeSeconds: 60 * 60 * 24, 
                            maxEntries: 20
                        },
                        cacheName: "api",
                        cacheableResponse: {
                            statuses: [0, 200]
                        }
                    }
                },

importWorkboxFrom の廃止

続いて以下のエラーが出力されました。

ERROR in Please check your GenerateSW plugin configuration:
"importWorkboxFrom" is not a supported parameter.
````

workbox-webpack-pluginのGenerateSWで、`importWorkboxFrom` オプションはv5からサポートされなくなった結果出力されるエラーのようです。   
以前、CDNで配布しているWorkboxのJavasScriptをimportScriptsで読み込むようにしていましたが、
v5から、localにライブラリjsがコンパイル、生成されるようになりました。              
`NODE_ENV`の設定に従い、圧縮もされるようです。        

`importWorkboxFrom`の廃止に伴い、追加されたオプション等は、以下のIssueから確認できます。
* [generateSW uses custom Workbox runtime bundles, not CDN · Issue #2064 · GoogleChrome/workbox](https://github.com/GoogleChrome/workbox/issues/2064)  

* **修正前**   
```json
        new GenerateSW({
            importWorkboxFrom : 'cdn',
            runtimeCaching: [
                {

  • 修正後
            new GenerateSW({
            runtimeCaching: [
                {

Precache対象のリソースの容量指定の追加

続いて、以下の警告が出力されました。

WARNING in /static/webpack_bundles/1-a49921c3.js is 2.25 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.
WARNING in /static/webpack_bundles/vendor-4731391b.js is 3.32 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

Precache可能なJavaScript のサイズは、デフォルトでは、2MBです。
Precacheしたい場合は、設定を記載する必要があります。
* workbox/defaults.js at 1a77f7f9d26ec4c4b6ac51ae943c70041f17e14f · GoogleChrome/workbox

一旦、5MBを上限に設定をしました。

  • 修正前 

            new GenerateSW({
            runtimeCaching: [

  • *修正後 

            new GenerateSW({
            maximumFileSizeToCacheInBytes: 1024 * 1024 * 5,
            runtimeCaching: [

参考

以下、アップグレード時、参考にした記事になります。

これで、JavaScriptのコンパイルはできるようになりました。
後は、実際動かして、動作確認をしながら修正をしていきます。
以上です。

コメント

最近の投稿