quasarframework · sgametrio · May 18, 2017 · May 31, 2017
diff --git a/template/build/webpack.prod.conf.js b/template/build/webpack.prod.conf.js
@@ -8,6 +8,7 @@ var
   ExtractTextPlugin = require('extract-text-webpack-plugin'),
   HtmlWebpackPlugin = require('html-webpack-plugin'),
   OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+  SWPrecachePlugin = require('sw-precache-webpack-plugin')
 
 module.exports = merge(baseWebpackConfig, {
   module: {
@@ -70,6 +71,29 @@ module.exports = merge(baseWebpackConfig, {
     new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest',
       chunks: ['vendor']
+    }),
+    // auto generate service-worker for caching static files
+    new SWPrecachePlugin({
+      cacheId: 'quasar-app',
+      filename: 'service-worker-cache.js',
+      minify: true,
+
+      staticFileGlobs: [
+        'js/**.js',
+        'fonts/**.woff',
+        'statics/*',
+        '/**.html',
+        '/**.css'
+      ],
+
+      runtimeCaching: [{
+        urlPattern: /\/.*/,
+        handler: 'cacheFirst'
+      }],
+
+      dontCacheBustUrlsMatching: /./,
+      navigateFallback: '/'
+
     })
   ]
 })
diff --git a/template/package.json b/template/package.json
@@ -16,6 +16,7 @@
     "moment": "^2.15.0",
     "quasar-framework": "^0.13.4",
     "roboto-fontface": "^0.7.0",
+    "sw-precache-webpack-plugin": "^0.11.0",
     "vue": "^2.3.0",
     "vue-router": "^2.0.0"
   },

diff --git a/template/src/index.html b/template/src/index.html
@@ -5,9 +5,15 @@
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
-
+    <link rel="manifest" href="statics/manifest.json">
     <title>Quasar App</title>
     <link rel="shortcut icon" type="image/x-icon" href="statics/favicon.ico">
+    <script>
+      // activate service worker
+      if('serviceWorker' in navigator) {
+         navigator.serviceWorker.register('service-worker-cache.js');
+      }
+    </script>
   </head>
   <body>
     <div id="q-app"></div>

diff --git a/template/src/statics/logo.png b/template/src/statics/logo.png
diff --git a/template/src/statics/manifest.json b/template/src/statics/manifest.json
@@ -0,0 +1,17 @@
+{
+  "lang": "en",
+  "background_color": "#0273D4",
+  "theme_color": "#0273D4",
+  "name": "Your app name",
+  "short_name": "myApp",
+  "display": "standalone",
+  "start_url": "index.html",
+  "icons": [
+    {
+      "src": "statics/logo.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    }
+  ],
+  "orientation": "portrait"
+}