Serviceworker now properly loads

Author: lucacasonato

packages/web/src/index.html

@@ -23,7 +23,15 @@
 				return;
 			}
 			document.body.style.background = bg;
-		})();
+    })();
+    
+    // Check that service workers are registered
+    if ('serviceWorker' in navigator) {
+      // Use the window load event to keep the page load performant
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/service-worker.js');
+      });
+    }
 	</script>
 </body>
 

scripts/webpack.client.config.js

@@ -1,88 +1,96 @@
-const webpack = require("webpack");
-const path = require("path");
-const merge = require("webpack-merge");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const PreloadWebpackPlugin = require("preload-webpack-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const WebpackPwaManifest = require('webpack-pwa-manifest')
+const webpack = require('webpack');
+const path = require('path');
+const merge = require('webpack-merge');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const PreloadWebpackPlugin = require('preload-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const WebpackPwaManifest = require('webpack-pwa-manifest');
 const { GenerateSW } = require('workbox-webpack-plugin');
 
 // const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 
-const root = path.join(__dirname, "..");
-const prod = process.env.NODE_ENV === "production";
+const root = path.join(__dirname, '..');
+const prod = process.env.NODE_ENV === 'production';
 
-module.exports = (options = {}) => merge(
-	require("./webpack.general.config")(options), {
-	devtool: prod ? "source-map" : "cheap-module-eval-source-map",
-	mode: prod ? "production" : "development",
-	entry: prod ? options.entry : [
-		"webpack-hot-middleware/client?reload=true&quiet=true",
-		options.entry,
-	],
-	module: {
-		rules: [{
-			test: /\.s?css$/,
-			// This is required otherwise it'll fail to resolve CSS in common.
-			include: root,
-			use: [{
-				loader: MiniCssExtractPlugin.loader,
-			}, {
-				loader: "css-loader",
-			}, {
-				loader: "sass-loader",
-			}],
-		}, {
-			test: /\.(svg|png|ttf|woff|eot|woff2)$/,
-			use: [{
-				loader: "file-loader",
-				options: {
-					name: "[path][name].[ext]",
-				},
-			}],
-		}],
-	},
-	plugins: [
-		new MiniCssExtractPlugin({
-			filename: "[name].css",
-			chunkFilename: "[id].css",
-		}),
-		new HtmlWebpackPlugin({
-			template: options.template,
-		}),
-		new PreloadWebpackPlugin({
-			rel: "preload",
-			as: "script",
-    }),
-    new WebpackPwaManifest({
-      name: "Coder",
-      short_name: "Coder",
-      description: "Run VS Code on a remote server",
-      background_color: "#303030",
-      icons: [
+module.exports = (options = {}) =>
+  merge(require('./webpack.general.config')(options), {
+    devtool: prod ? 'source-map' : 'cheap-module-eval-source-map',
+    mode: prod ? 'production' : 'development',
+    entry: prod
+      ? options.entry
+      : ['webpack-hot-middleware/client?reload=true&quiet=true', options.entry],
+    module: {
+      rules: [
         {
-          src: path.resolve("./assets/logo.png"),
-          sizes: [96, 128, 192, 256, 384]
+          test: /\.s?css$/,
+          // This is required otherwise it'll fail to resolve CSS in common.
+          include: root,
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader
+            },
+            {
+              loader: 'css-loader'
+            },
+            {
+              loader: 'sass-loader'
+            }
+          ]
+        },
+        {
+          test: /\.(svg|png|ttf|woff|eot|woff2)$/,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                name: '[path][name].[ext]'
+              }
+            }
+          ]
         }
       ]
-    }),
-	].concat(prod ? [
-    new GenerateSW({
-      runtimeCaching: [{
-        urlPattern: "",
-        handler: 'StaleWhileRevalidate',
-        options: {
-          cacheName: 'code-server',
-          expiration: {
-            maxAgeSeconds: 86400,
-          },
-          cacheableResponse: {
-            statuses: [0, 200],
-          },
-        },
-      }
-      // Network first caching is also possible.
-      /*{
+    },
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: '[name].css',
+        chunkFilename: '[id].css'
+      }),
+      new HtmlWebpackPlugin({
+        template: options.template
+      }),
+      new PreloadWebpackPlugin({
+        rel: 'preload',
+        as: 'script'
+      }),
+      new WebpackPwaManifest({
+        name: 'Coder',
+        short_name: 'Coder',
+        description: 'Run VS Code on a remote server',
+        background_color: '#303030',
+        icons: [
+          {
+            src: path.resolve('./assets/logo.png'),
+            sizes: [96, 128, 192, 256, 384]
+          }
+        ]
+      }),
+      new GenerateSW({
+        runtimeCaching: [
+          {
+            urlPattern: new RegExp('.*'),
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'code-server',
+              expiration: {
+                maxAgeSeconds: 86400
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          }
+          // Network first caching is also possible.
+          /*{
         urlPattern: "",
         handler: 'NetworkFirst',
         options: {
@@ -95,10 +103,9 @@ module.exports = (options = {}) => merge(
             statuses: [0, 200],
           },
         },
-      }*/]    
-    }),
-  ] : [
-		new webpack.HotModuleReplacementPlugin(),
-	]),
-	target: "web",
-});
+      }*/
+        ]
+      })
+    ].concat(prod ? [] : [new webpack.HotModuleReplacementPlugin()]),
+    target: 'web'
+  });