offline-plugin-integration initial commit

examples/offline-nuxt/nuxt.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  offline: true, // true or https://github.com/NekR/offline-plugin/blob/master/docs/options.md
+  plugins: ['~plugins/init-offline.js']
+}

examples/offline-nuxt/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "offline-config-nuxt",
+  "scripts": {
+    "dev": "../../bin/nuxt",
+    "build": "../../bin/nuxt build",
+    "start": "../../bin/nuxt start"
+  }
+}

examples/offline-nuxt/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+<div>
+This is offline test
+</div>
+</template>

examples/offline-nuxt/plugins/init-offline.js

@@ -0,0 +1,3 @@
+if (process.BROWSER_BUILD && process.env.NODE_ENV === 'production') {
+  require('offline-plugin/runtime').install()
+}

lib/webpack/client.config.js

@@ -7,6 +7,36 @@ import ProgressBarPlugin from 'progress-bar-webpack-plugin'
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
 import base from './base.config.js'
 import { resolve } from 'path'
+
+// offline plugin copy generated assets to static directory
+function OfflinePluginCopyAssetsPlugin(assets, toDir) {
+  this.assets = assets
+  this.toDir = toDir
+}
+OfflinePluginCopyAssetsPlugin.prototype.apply = function(compiler) {
+  compiler.plugin('after-emit', function(compilation, callback) {
+    const assets = this.assets.length > 0 ? this.assets : []
+
+    if (!fs.existsSync(this.toDir)){
+      fs.mkdirSync(this.toDir)
+      fs.mkdirSync(`${this.toDir}/appcache`)
+    }
+
+    let renamePromises = []
+    assets.forEach((asset) => {
+      renamePromises.push(rename(`.nuxt/dist/${asset}`, `${this.toDir}/${asset}`))
+    })
+
+    Promise.all(renamePromises)
+    .then(() => {
+      console.log('\noffline content to static directory...')
+    })
+    .catch((error) => {
+      console.error('\noffline-plugin copy error', error)
+    });
+  }.bind(this));
+}
+
 /*
 |--------------------------------------------------------------------------
 | Webpack Client Config
@@ -85,6 +115,16 @@ export default function () {
       isClient: true
     })
   }
+  // Offline-plugin integration
+  if (!this.dev && this.options.offline) {
+    const offlineOpts = typeof this.options.offline === 'object' ? this.options.offline : {}
+    config.plugins.push(
+      new OfflinePlugin(offlineOpts),
+      new OfflinePluginCopyAssetsPlugin(
+        ['sw.js', 'appcache/manifest.appcache', 'appcache/manifest.html'
+      ], 'static')
+    )
+  }
   // Webpack Bundle Analyzer
   if (!this.dev && this.options.build.analyze) {
     let options = {}

package.json

@@ -107,6 +107,7 @@
     "jsdom": "^9.10.0",
     "json-loader": "^0.5.4",
     "nyc": "^10.1.2",
+    "offline-plugin": "^4.6.1",
     "request": "^2.79.0",
     "request-promise-native": "^1.0.3",
     "webpack-node-externals": "^1.5.4"