diff --git a/examples/offline-nuxt/nuxt.config.js b/examples/offline-nuxt/nuxt.config.js new file mode 100644 index 0000000000..168ad0499c --- /dev/null +++ b/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 } + ] +} diff --git a/examples/offline-nuxt/package.json b/examples/offline-nuxt/package.json new file mode 100644 index 0000000000..20c76d1b6b --- /dev/null +++ b/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" + } +} diff --git a/examples/offline-nuxt/pages/index.vue b/examples/offline-nuxt/pages/index.vue new file mode 100644 index 0000000000..bb1b2bacae --- /dev/null +++ b/examples/offline-nuxt/pages/index.vue @@ -0,0 +1,5 @@ + diff --git a/examples/offline-nuxt/plugins/init-offline.js b/examples/offline-nuxt/plugins/init-offline.js new file mode 100644 index 0000000000..a0fd8f5edb --- /dev/null +++ b/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); + } + }) +} diff --git a/lib/webpack/client.config.js b/lib/webpack/client.config.js index 068a5c20dd..f30da6241a 100644 --- a/lib/webpack/client.config.js +++ b/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 = {} diff --git a/package.json b/package.json index cbb5887478..6e15922166 100644 --- a/package.json +++ b/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",