Add web pack configuration to generate progressive web app code durin…

…g build
ceddlyburge · Jun 22, 2018 · 2531646 · 2531646
1 parent ab5fd02
commit 2531646
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -11,5 +11,9 @@
   "license": "ISC",
   "devDependencies": {
     "webpack-cli": "^3.0.8"
+  },
+  "dependencies": {
+    "sw-precache-webpack-plugin": "^0.11.5",
+    "webpack-pwa-manifest": "^3.6.2"
   }
 }
diff --git a/src/Main.elm b/src/Main.elm
@@ -1,4 +1,4 @@
 import Html
 
 main : Html.Html msg
-main = Html.text "Hello World"
+main = Html.text "Hello World Progessive with WebPack"
diff --git a/src/index.html b/src/index.html
@@ -3,9 +3,17 @@
   <head>
     <meta charset="utf-8" />
     <title>Elm SPA example</title>
+	<link rel="manifest" href="/manifest.json">
   </head>
   <body>
     <div id="main"></div>
     <script src="/app.js"></script>
+	<script>
+    if('serviceWorker' in navigator) {
+      navigator.serviceWorker
+               .register('/service-worker.js')
+               .then(function() { console.log("Service Worker Registered"); });
+    }
+    </script>
   </body>
 </html>
diff --git a/src/static/img/icon.png b/src/static/img/icon.png
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,4 +1,6 @@
 var path = require("path");
+var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
+var WebpackPwaManifest = require('webpack-pwa-manifest');
 
 module.exports = {
   entry: {
@@ -29,6 +31,34 @@ module.exports = {
     noParse: /\.elm$/,
   },
 
+  plugins: [
+	new SWPrecacheWebpackPlugin(
+      {
+        cacheId: 'ceddlyburge/progressive-elm',
+        dontCacheBustUrlsMatching: /\.\w{8}\./,
+        filename: 'service-worker.js',
+        minify: false,
+        navigateFallback: 'index.html',
+        staticFileGlobsIgnorePatterns: [/\.map$/, /manifest\.json$/]
+      }
+    )
+    , new WebpackPwaManifest({
+      name: 'Minimal progressive Elm App, to demonstrate the steps involved',
+      short_name: 'Progessive Elm',
+      description: 'Minimal progressive Elm App. There is a Hello World page, with no images or css, so that there is less noise to detract from the code that is required to make it progressive.',
+      background_color: '#ffffff',
+      theme_color: '#000000',
+      start_url: '/',
+      icons: [
+        {
+          src: path.resolve('src/static/img/icon.png'),
+          sizes: [192],
+          destination: path.join('static', 'img')
+        }
+      ]
+	})
+  ],
+
   devServer: {
     inline: true,
     stats: { colors: true },