Added serviceworker and web-manifest (#154)

* Added serviceworker and manifest.json

* added deps in package.json

* fixed image link

* actually fixed images i think

* added assets to individual module folders

* added caching

* Serviceworker now properly loads

* Changed single to double quotes

* Update lock

* moved the service worker back into prod only

* removed sw from general

* changed background color of splash screen

* added logo to server

* centralized logo into single assets folder

Author: lucacasonato

package.json

@@ -54,6 +54,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"
   },
   "resolutions": {

packages/web/assets/logo.png

@@ -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/package.json

@@ -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>

packages/web/src/index.html

@@ -4,58 +4,104 @@ 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: /\.(png|ttf|woff|eot|woff2)$/,
-			use: [{
-				loader: "file-loader",
-				options: {
-					name: "[path][name].[ext]",
-				},
-			}],
-		}, {
-			test: /\.svg$/,
-			loader: 'url-loader'
-		}],
-	},
-	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",
-});
+  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: /\.(png|ttf|woff|eot|woff2)$/,
+        use: [{
+          loader: "file-loader",
+          options: {
+            name: "[path][name].[ext]",
+          },
+        }],
+      }, {
+        test: /\.svg$/,
+        loader: 'url-loader'
+      }],
+    },
+    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: "#e5e5e5",
+        icons: [
+          {
+            src: path.join(root, "packages/web/assets/logo.png"),
+            sizes: [96, 128, 192, 256, 384]
+          }
+        ]
+      })
+    ].concat(prod ? [
+      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],
+          },
+        },
+      }*/
+        ]
+      })
+    ] : [new webpack.HotModuleReplacementPlugin()]),
+    target: "web"
+  });