precache all static assets in service worker with Workbox

package.json

@@ -29,7 +29,11 @@
     "svgo-loader": "^2.2.1",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
-    "webpack-jquery-ui": "^2.0.1"
+    "webpack-jquery-ui": "^2.0.1",
+    "workbox-precaching": "^5.1.3",
+    "workbox-routing": "^5.1.3",
+    "workbox-strategies": "^5.1.3",
+    "workbox-webpack-plugin": "^5.1.3"
   },
   "dependencies": {}
 }

sw.js

@@ -1,7 +1,10 @@
-self.addEventListener('fetch', function(event) {
+import {precacheAndRoute} from 'workbox-precaching';
-   event.respondWith(
+import {registerRoute} from 'workbox-routing';
-      fetch(event.request).catch(function() {
+import {StaleWhileRevalidate} from 'workbox-strategies';
-         return caches.match(event.request);
+
-      })
+precacheAndRoute(self.__WB_MANIFEST);
-   );
+
-});
+registerRoute(
+   new RegExp('^https://fonts\\.googleapis\\.com/|https://fonts\\.gstatic\\.com/'),
+   new StaleWhileRevalidate()
+);

webpack.config.js

@@ -4,6 +4,7 @@ const CopyPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { InjectManifest } = require('workbox-webpack-plugin');
 
 module.exports = {
   mode: 'production',
@@ -82,8 +83,12 @@ module.exports = {
     }),
     new CopyPlugin([
       { from: '.htaccess' },
-      { from: 'sw.js' },
     ]),
+    new InjectManifest({
+      swSrc: './sw.js',
+      dontCacheBustURLsMatching: /\.[0-9a-f]{16,}\.(css|js|svg|png|jpg|wav)$/,
+      exclude: [ /(^|[/\\])\.htaccess$/ ],
+    }),
   ],
   optimization: {
     moduleIds: 'hashed',