Permalink
Browse files

feat(workbox): workbox 3 + offlinePage (#60)

Co-authored-by: manniL <hello@lichter.io>
Co-authored-by: galvez <jonasgalvez@gmail.com>"
  • Loading branch information...
2 people authored and pi0 committed Aug 24, 2018
1 parent 6d241ec commit 0fef874441e0b98230cb3a96d7035cdebcd294e4
Showing with 2,359 additions and 1,392 deletions.
  1. +6 −0 docs/modules/workbox.md
  2. +6 −6 package.json
  3. +1 −1 packages/meta/index.js
  4. +38 −11 packages/workbox/index.js
  5. +1 −1 packages/workbox/package.json
  6. +19 −6 packages/workbox/templates/sw.template.js
  7. +2,288 −1,367 yarn.lock
@@ -23,6 +23,12 @@ workbox: {
**importScripts** (Array) - Additional scripts to be imported in service worker script. (Relative to `/`. Can be placed in `assets/` directory)
**offlinePage** (String) - Enables routing all offline requests to the specified path. (Example: `/offline`)
**cachingExtensions** (String) - Loads and inserts the contents of the specified file path into the service worker script, below autogenerated calls to `workbox.precaching.*`. You may add as many extra calls as you want to this file.
**routingExtensions** (String) - Loads and inserts the contents of the specified file path into the service worker script, below autogenerated calls to `workbox.routing.*`. You may add as many extra calls as you want to this file.
For list of all available options see [here](https://developers.google.com/web/tools/workbox/modules/workbox-build)
### Adding custom runtimeCaching items (For CDN)
@@ -26,18 +26,18 @@
"axios": "^0.18.0",
"babel-eslint": "^8.1.2",
"codecov": "^3.0.0",
"eslint": "^4.14.0",
"eslint": "^4.19.1",
"eslint-config-standard": "^11.0.0",
"eslint-plugin-html": "^4.0.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jest": "^21.5.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^21.21.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"jest": "^22.0.4",
"jsdom": "^11.5.1",
"lerna": "^3.0.0-alpha.1",
"nuxt": "^1.3.0",
"standard-version": "^4.2.0"
"standard-version": "^4.4.0"
}
}
@@ -100,7 +100,7 @@ function generateMeta (_options) {
}
// Title
if (options.name && !this.options.head.title && typeof (this.options.head.titleTemplate) !== 'function') {
if (options.name && !this.options.head.title && typeof this.options.head.titleTemplate !== 'function') {
this.options.head.title = options.name
}
@@ -1,9 +1,9 @@
const path = require('path')
const swBuild = require('workbox-build')
const { readFileSync, writeFileSync } = require('fs')
const { readFileSync, writeFileSync, existsSync } = require('fs')
const hashSum = require('hash-sum')
const debug = require('debug')('nuxt:pwa')
const { defaultsDeep } = require('lodash')
const { defaultsDeep, pick } = require('lodash')
const fixUrl = url => url.replace(/\/\//g, '/').replace(':/', '://')
const isUrl = url => url.indexOf('http') === 0 || url.indexOf('//') === 0
@@ -33,6 +33,16 @@ module.exports = function nuxtWorkbox (moduleOptions) {
// getRouterBase
// =============================================
function loadScriptExtension (scriptExtension) {
if (scriptExtension) {
const extPath = this.nuxt.resolveAlias(scriptExtension)
if (existsSync(extPath)) {
return readFileSync(extPath, 'utf8')
}
return null
}
}
function getOptions (moduleOptions) {
// Router Base
const routerBase = this.options.router.base
@@ -51,6 +61,8 @@ function getOptions (moduleOptions) {
swSrc: path.resolve(this.options.buildDir, 'sw.template.js'),
swDest: path.resolve(this.options.srcDir, this.options.dir.static || 'static', 'sw.js'),
directoryIndex: '/',
cachingExtensions: null,
routingExtensions: null,
cacheId: process.env.npm_package_name || 'nuxt',
clientsClaim: true,
globPatterns: ['**/*.{js,css}'],
@@ -59,6 +71,7 @@ function getOptions (moduleOptions) {
'': fixUrl(publicPath)
},
offline: true,
offlinePage: null,
_runtimeCaching: [
// Cache all _nuxt resources at runtime
// They are hashed by webpack so are safe to loaded by cacheFirst handler
@@ -73,13 +86,21 @@ function getOptions (moduleOptions) {
const options = defaultsDeep({}, this.options.workbox, moduleOptions, defaults)
// Optionally cache other routes for offline
if (options.offline) {
defaults._runtimeCaching.push({
urlPattern: fixUrl(routerBase + '/.*'),
if (options.offline && !options.offlinePage) {
options._runtimeCaching.push({
urlPattern: fixUrl(`${routerBase}/.*`),
handler: 'networkFirst'
})
}
if (options.cachingExtensions) {
options.cachingExtensions = loadScriptExtension.call(this, options.cachingExtensions)
}
if (options.routingExtensions) {
options.routingExtensions = loadScriptExtension.call(this, options.routingExtensions)
}
return options
}
@@ -93,16 +114,20 @@ function addTemplates (options) {
src: path.resolve(__dirname, 'templates/sw.template.js'),
fileName: 'sw.template.js',
options: {
offlinePage: options.offlinePage,
cachingExtensions: options.cachingExtensions,
routingExtensions: options.routingExtensions,
importScripts: [options.wbDst].concat(options.importScripts || []),
runtimeCaching: [].concat(options._runtimeCaching, options.runtimeCaching).map(i => (Object.assign({}, i, {
urlPattern: i.urlPattern,
handler: i.handler || 'networkFirst',
method: i.method || 'GET'
}))),
clientsClaim: options.clientsClaim,
wbOptions: {
cacheId: options.cacheId,
clientsClaim: options.clientsClaim,
directoryIndex: options.directoryIndex
directoryIndex: options.directoryIndex,
cleanUrls: false
}
}
})
@@ -132,13 +157,13 @@ function emitAssets (options) {
const source = readFileSync(path)
const hash = hashSum(source)
const dst = `${name}.${hash}.${ext}`
assets.push({source, dst})
assets.push({ source, dst })
return dst
}
// Write assets after build
const hook = builder => {
assets.forEach(({source, dst}) => {
assets.forEach(({ source, dst }) => {
writeFileSync(path.resolve(this.options.buildDir, 'dist', dst), source, 'utf-8')
})
}
@@ -165,8 +190,10 @@ function emitAssets (options) {
function workboxInject (options) {
const hook = () => {
const opts = Object.assign({}, options)
delete opts.runtimeCaching
const opts = pick(options, [
'swDest', 'swSrc', 'globDirectory', 'globFollow', 'globIgnores', 'globPatterns', 'dontCacheBustUrlsMatching',
'globStrict', 'templatedUrls', 'maximumFileSizeToCacheInBytes', 'modifyUrlPrefix', 'manifestTransforms'
])
return swBuild.injectManifest(opts)
}
@@ -8,6 +8,6 @@
"access": "public"
},
"dependencies": {
"workbox-build": "^2.1.2"
"workbox-build": "^3.4.1"
}
}
@@ -1,11 +1,24 @@
importScripts(<%= options.importScripts.map(i => `'${i}'`).join(', ') %>)
importScripts(<%= options.importScripts.map((i) => `'${i}'`).join(', ') %>)
const workboxSW = new self.WorkboxSW(<%= JSON.stringify(options.wbOptions, null, 2) %>)
workbox.precaching.precacheAndRoute([], <%= JSON.stringify(options.wbOptions, null, 2) %>)
workboxSW.precache([])
<% if (options.offlinePage) { %>workbox.precaching.precacheAndRoute(['<%= options.offlinePage %>'])<% } %>
<% if (options.cachingExtensions) { %><%= options.cachingExtensions %><% } %>
<% if (options.clientsClaim) { %>workbox.clientsClaim()<% } %>
<% options.runtimeCaching.forEach(r => {
<%
options.runtimeCaching.forEach(r => {
const strategy = JSON.stringify(r.strategyOptions || {})
%>
workboxSW.router.registerRoute(new RegExp('<%= r.urlPattern %>'), workboxSW.strategies.<%= r.handler %>(<%= strategy %>), '<%= r.method %>')
%>
workbox.routing.registerRoute(new RegExp('<%= r.urlPattern %>'), workbox.strategies.<%= r.handler %>(<%= strategy %>), '<%= r.method %>')
<% }) %>
<% if (options.offlinePage) { %>
// offlinePage support
const strategy = workbox.strategies.staleWhileRevalidate()
workbox.routing.registerRoute(new RegExp('/.*'), ({event}) => {
return strategy.handle({event})
.catch(() => caches.match('<%= options.offlinePage %>')
})<% } %>
<% if (options.routingExtensions) { %><%= options.routingExtensions %><% } %>
Oops, something went wrong.

0 comments on commit 0fef874

Please sign in to comment.