Add serviceworker + Monaco Service Worker

package.json

@@ -47,6 +47,8 @@
     "webpack-dev-middleware": "^3.5.0",
     "webpack-dev-server": "^3.1.14",
     "webpack-hot-middleware": "^2.24.3",
+    "webpack-pwa-manifest": "^4.0.0",
+    "workbox-webpack-plugin": "^4.1.0",
     "write-file-webpack-plugin": "^4.5.0"
   },
   "dependencies": {

packages/web/package.json

@@ -1,6 +1,6 @@
 {
-	"name": "@coder/web",
-	"scripts": {
-		"build": "../../node_modules/.bin/cross-env UV_THREADPOOL_SIZE=100 node --max-old-space-size=32384 ../../node_modules/webpack/bin/webpack.js --config ./webpack.config.js"
-	}
+  "name": "@coder/web",
+  "scripts": {
+    "build": "../../node_modules/.bin/cross-env UV_THREADPOOL_SIZE=100 node --max-old-space-size=32384 ../../node_modules/webpack/bin/webpack.js --config ./webpack.config.js"
+  }
 }

packages/web/src/index.html

@@ -23,8 +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>
-
 </html>

scripts/webpack.client.config.js

@@ -4,55 +4,108 @@ 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" || process.env.CI === "true";
 
-module.exports = (options = {}) => merge(
-	require("./webpack.general.config")(options), {
-	devtool: prod ? "none" : "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",
-		}),
-	].concat(prod ? [] : [
-		new webpack.HotModuleReplacementPlugin(),
-	]),
-	target: "web",
-});
+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: [
+          {
+            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: {
+          networkTimeoutSeconds: 4,
+          cacheName: "code-server",
+          expiration: {
+            maxAgeSeconds: 86400,
+          },
+          cacheableResponse: {
+            statuses: [0, 200],
+          },
+        },
+      }*/
+        ]
+      })
+    ].concat(prod ? [] : [new webpack.HotModuleReplacementPlugin()]),
+    target: "web"
+  });