diff --git a/packages/generators/init-generator.ts b/packages/generators/init-generator.ts
index 96fcf501e76..f255c285ac8 100644
--- 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,12 +212,15 @@ 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(),
@@ -224,9 +228,18 @@ export default class InitGenerator extends Generator {
 			"\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
index 070f7dff6f9..2eba11293a1 100644
--- 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>
\ No newline at end of file
+	<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>
