Merge pull request #372 from rohitpal99/offline-plugin-integration

Offline plugin integration

examples/offline-nuxt/nuxt.config.js

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

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,20 @@
+if (process.env.NODE_ENV === 'production') {
+  require('offline-plugin/runtime').install()
+  window.onNuxtReady((app) => {
+    if ('serviceWorker' in navigator) {
+      if (navigator.serviceWorker.controller) {} else {
+        navigator.serviceWorker.register('/sw.js').then(function(res) {
+          console.log('sw loaded...')
+        }).catch(function(err) {
+          console.log(err);
+        });
+      }
+    } else if (window.applicationCache) {
+      // register appcache code
+      var iframe = document.createElement('iframe');
+      iframe.style.display = "none";
+      iframe.src = '/appcache/manifest.html';
+      document.body.appendChild(iframe);
+    }
+  })
+}

lib/webpack/client.config.js

@@ -8,8 +8,42 @@ import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin'
 import PreloadWebpackPlugin from 'preload-webpack-plugin'
 import ProgressBarPlugin from 'progress-bar-webpack-plugin'
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
+import OfflinePlugin from 'offline-plugin'
 import base from './base.config.js'
 import { resolve } from 'path'
+import fs from 'fs-extra'
+import pify from 'pify'
+const rename = pify(fs.rename)
+
+// 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
@@ -110,6 +144,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

@@ -72,6 +72,7 @@
     "lodash": "^4.17.4",
     "lru-cache": "^4.0.2",
     "memory-fs": "^0.4.1",
+    "offline-plugin": "^4.6.1",
     "pify": "^2.3.0",
     "post-compile-webpack-plugin": "^0.1.1",
     "preload-webpack-plugin": "^1.2.1",