add pwa support

Author: egoist

template/build/webpack.prod.js

@@ -5,6 +5,7 @@ const exec = require('child_process').execSync
 const webpack = require('webpack')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const ProgressPlugin = require('webpack/lib/ProgressPlugin')
+const OfflinePlugin = require('offline-plugin')
 const base = require('./webpack.base')
 const pkg = require('../package')
 const _ = require('./utils')
@@ -44,6 +45,15 @@ base.plugins.push(
   new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
     filename: 'vendor.[chunkhash:8].js'
+  }),
+  // progressive web app
+  // it uses the publicPath in webpack config
+  new OfflinePlugin({
+    relativePaths: false,
+    AppCache: false,
+    ServiceWorker: {
+      events: true
+    }
   })
 )
 
@@ -64,4 +74,16 @@ _.cssProcessors.forEach(processor => {
   })
 })
 
+// minimize webpack output
+base.stats = {
+  // Add children information
+  children: false,
+  // Add chunk information (setting this to `false` allows for a less verbose output)
+  chunks: false,
+  // Add built modules information to chunk information
+  chunkModules: false,
+  chunkOrigins: false,
+  modules: false
+}
+
 module.exports = base

template/client/index.js

@@ -1,4 +1,9 @@
 import './promise-polyfill'
 import {app} from './app'
 
+// enable progressive web app support (with offline-plugin)
+if (process.env.NODE_ENV === 'production') {
+  require('./pwa')
+}
+
 app.$mount('#app')

template/client/pwa.js

@@ -0,0 +1,15 @@
+import runtime from 'offline-plugin/runtime'
+
+runtime.install({
+  // When an update is ready, tell ServiceWorker to take control immediately:
+  onUpdateReady() {
+    console.log('update ready')
+    runtime.applyUpdate()
+  },
+
+  // Reload to get the new version:
+  onUpdated() {
+    console.log('updated')
+    location.reload()
+  }
+})

template/package.json

@@ -48,6 +48,7 @@
     "friendly-errors-webpack-plugin": "^1.1.2",
     "html-webpack-plugin": "^2.22.0",
     "raw-loader": "^0.5.1",
+    "offline-plugin": "^4.5.3",
     "postcss-loader": "^0.9.1",
     "postcss-nested": "^1.0.0",
     "style-loader": "^0.13.1",