feat: add workbox + offline support

webpack · Jun 7, 2019 · 589253e · 589253e
1 parent 77bf564
commit 589253e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/packages/generators/init-generator.ts b/packages/generators/init-generator.ts
@@ -200,6 +200,7 @@ export default class InitGenerator extends Generator {
 			}
 		}
 		if (this.usingDefaults) {
+			// Html webpack Plugin
 			this.dependencies.push("html-webpack-plugin");
 			const htmlWebpackDependency = "html-webpack-plugin";
 			const htmlwebpackPlugin = generatePluginName(htmlWebpackDependency);
@@ -211,22 +212,34 @@ export default class InitGenerator extends Generator {
 			(this.configuration.config.webpackOptions.plugins as string[]).push(`new ${htmlwebpackPlugin}({
 					template: 'index.html'
 				})`);
+
+			// webpack Dev Server
 			this.dependencies.push("webpack-dev-server");
 			this.configuration.config.webpackOptions.devServer = {
 				open: true
 			};
 		}
 
+		// TerserPlugin
 		this.dependencies.push("terser-webpack-plugin");
 		this.configuration.config.topScope.push(
 			tooltip.terser(),
 			"const TerserPlugin = require('terser-webpack-plugin');",
 			"\n"
 		);
 
+		// PWA + offline support
+		this.configuration.config.topScope.push("const workboxPlugin = require('workbox-webpack-plugin');", "\n");
+		this.dependencies.push("workbox-webpack-plugin");
+		(this.configuration.config.webpackOptions.plugins as string[]).push(`new workboxPlugin.GenerateSW({
+			swDest: 'sw.js',
+			clientsClaim: true,
+			skipWaiting: true,
+		})`);
+
+		// Chunksplitting
 		this.configuration.config.webpackOptions.optimization = getDefaultOptimization(this.usingDefaults);
 		this.configuration.config.webpackOptions.mode = this.usingDefaults ? "'production'" : "'development'";
-
 		done();
 	}
 

diff --git a/packages/generators/templates/template.html b/packages/generators/templates/template.html
@@ -1,11 +1,25 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Webpack App</title>
-  </head>
-  <body>
-      <h1>Hello world!</h1>
-      <h2>Tip: Check your console</h2>
-  </body>
-</html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Webpack App</title>
+	</head>
+	<body>
+		<h1>Hello world!</h1>
+		<h2>Tip: Check your console</h2>
+		<script>
+			if ("serviceWorker" in navigator) {
+				window.addEventListener("load", () => {
+					navigator.serviceWorker
+						.register("/sw.js")
+						.then(registration => {
+							console.log("SW registered: ", registration);
+						})
+						.catch(registrationError => {
+							console.log("SW registration failed: ", registrationError);
+						});
+				});
+			}
+		</script>
+	</body>
+</html>