Use workbox-webpack-plugin

webpack.config.js

@@ -1,8 +1,9 @@
 const CopyPlugin = require("copy-webpack-plugin");
+const WorkboxPlugin = require('workbox-webpack-plugin');
 
 const path = require('path');
 
-module.exports = {
+module.exports = [{
   entry: './src/index.tsx',
   // devtool: 'inline-source-map',
   module: {
@@ -41,6 +42,25 @@ module.exports = {
     port: 4000,
   },
   plugins: [
+    new WorkboxPlugin.GenerateSW({ 
+        // these options encourage the ServiceWorkers to get in there fast     
+        // and not allow any straggling "old" SWs to hang around     
+        swDest: path.join(__dirname, "dist", 'sw.js'),
+        maximumFileSizeToCacheInBytes: 200 * 1024 * 1024,
+        clientsClaim: true,
+        skipWaiting: true,
+        runtimeCaching: [{
+          urlPattern: ({request, url}) => true,
+          handler: 'StaleWhileRevalidate',
+          options: {
+            cacheName: 'all',
+            expiration: {
+              maxEntries: 1000,
+              purgeOnQuotaError: true,
+            },
+          },
+        }],
+    }),
     new CopyPlugin({
       patterns: [
         { 
@@ -59,4 +79,22 @@ module.exports = {
       ],
     }),
   ],
-};
+}/*, {
+  entry: './src/sw.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  output: {
+    filename: 'sw.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+}*/];