refractor service worker

Author: chenxsan

src/sw.js

@@ -0,0 +1,26 @@
+import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
+import { registerRoute } from 'workbox-routing/registerRoute';
+import { CacheFirst } from 'workbox-strategies';
+import { ExpirationPlugin } from 'workbox-expiration/ExpirationPlugin';
+
+// Precache assets built with webpack
+precacheAndRoute(self.__WB_MANIFEST);
+
+// Cache Google Fonts
+registerRoute(
+  /https:\/\/fonts\.gstatic\.com/,
+  new CacheFirst({
+    cacheName: 'google-fonts-cache',
+    plugins: [
+      new ExpirationPlugin({
+        // Cache for one year
+        maxAgeSeconds: 60 * 60 * 24 * 365,
+        maxEntries: 30,
+      }),
+    ],
+  })
+);
+
+// TODO Cache /app-shell/index.html
+
+// TODO Cache /index.html, /concepts/index.html, etc.

webpack.common.js

@@ -136,13 +136,17 @@ module.exports = (env = {}) => ({
           loader: 'file-loader',
           options: {
             outputPath: 'font',
-            esModule: false
+            esModule: false,
+            name: '[name].[md4:hash:hex:20].[ext]'
           }
         }
       },
       {
         test: /\.(jpg|jpeg|png|svg|ico)$/i,
-        type: 'asset/resource'
+        type: 'asset/resource',
+        generator: {
+          filename: '[name].[hash][ext][query]'
+        }
       }
     ]
   },

webpack.prod.js

@@ -1,7 +1,8 @@
 // Import External Dependencies
 const { merge } = require('webpack-merge');
 const OptimizeCSSAssetsPlugin = require('css-minimizer-webpack-plugin');
-const { GenerateSW } = require('workbox-webpack-plugin');
+const { InjectManifest } = require('workbox-webpack-plugin');
+const path = require('path');
 
 // Load Common Configuration
 const common = require('./webpack.common.js');
@@ -43,40 +44,11 @@ module.exports = env => merge(common(env), {
     ]
   },
   plugins: [
-    new GenerateSW({
-      skipWaiting: true,
-      clientsClaim: true,
+    new InjectManifest({
+      swSrc: path.join(__dirname, 'src/sw.js'),
       swDest: 'sw.js',
-      exclude: [/icon_.*\.png/, /printable/, '/robots.txt', ...hashedAssetsBySSGRun],
-      additionalManifestEntries: [
-        {
-          url: '/app-shell/index.html',
-          revision: new Date().getTime().toString() // dirty hack
-        },
-        {
-          url: '/manifest.json',
-          revision: '1'
-        },
-        ...hashedAssetsBySSGRun.map(url => ({
-          url: '/' + url, // prepend the publicPath
-          revision: null
-        }))
-      ],
-      navigateFallback: '/app-shell/index.html',
-      navigateFallbackDenylist: [/printable/],
-      runtimeCaching: [
-        {
-          urlPattern: /https:\/\/fonts\.gstatic\.com/, // cache google fonts for one year
-          handler: 'CacheFirst',
-          options: {
-            cacheName: 'google-fonts',
-            expiration: {
-              maxAgeSeconds: 60 * 60 * 24 * 365,
-              maxEntries: 30
-            }
-          }
-        }
-      ],
+      // match [name].[contenthash].[ext]
+      dontCacheBustURLsMatching: /\.[0-9a-f]{20}\./
     })
   ]
 });

webpack.ssg.js

@@ -34,7 +34,7 @@ module.exports = env => merge(common(env), {
       index: './server.jsx'
     },
     output: {
-      filename: '.server/[name].js',
+      filename: '.server/[name].[contenthash].js',
       libraryTarget: 'umd'
     },
     optimization: {