Pre-cache key assets with Workboxjs. (#23533)

assets/js/src/pwa.js

@@ -7,6 +7,21 @@
     window.addEventListener('load', function () {
       navigator.serviceWorker.register('/sw.js').then(function (registration) {
         console.log('ServiceWorker registration successful with scope: ', registration.scope)
+        registration.onupdatefound = function () {
+          var installingWorker = registration.installing
+          installingWorker.onstatechange = function () {
+            switch (installingWorker.state) {
+              case 'installed':
+                if (navigator.serviceWorker.controller) {
+                  console.log('new update available')
+                  location.reload(true)
+                }
+                break
+
+              default:
+            }
+          }
+        }
       }).catch(function (err) {
         console.log('ServiceWorker registration failed: ', err)
       })

build/workbox.config.json

@@ -0,0 +1,8 @@
+{
+  "globDirectory": "./",
+  "globPatterns": [
+    "_gh_pages/**/*.{html,css,js,json,png,jpg}"
+  ],
+  "swSrc": "./sw.js",
+  "swDest": "./_gh_pages/sw.js"
+}

build/workbox.js

@@ -0,0 +1,37 @@
+const fs = require('fs')
+const path = require('path')
+const swBuild = require('workbox-build')
+const config = require('./workbox.config.json')
+const buildPrefix = '_gh_pages/'
+
+const workboxSWSrcPath = require.resolve('workbox-sw')
+const wbFileName = path.basename(workboxSWSrcPath)
+const workboxSWDestPath = buildPrefix + 'assets/js/vendor/' + wbFileName
+const workboxSWSrcMapPath = `${workboxSWSrcPath}.map`
+const workboxSWDestMapPath = `${workboxSWDestPath}.map`
+
+fs.createReadStream(workboxSWSrcPath).pipe(fs.createWriteStream(workboxSWDestPath))
+fs.createReadStream(workboxSWSrcMapPath).pipe(fs.createWriteStream(workboxSWDestMapPath))
+
+const updateUrl = (manifestEntries) => manifestEntries.map((entry) => {
+  if (entry.url.startsWith(buildPrefix)) {
+    const regex = new RegExp(buildPrefix, 'g')
+    entry.url = entry.url.replace(regex, '')
+  }
+  return entry
+})
+
+config.manifestTransforms = [updateUrl]
+
+swBuild.injectManifest(config).then(() => {
+  const wbSwRegex = /{fileName}/g
+  fs.readFile(config.swDest, 'utf8', (err, data) => {
+    if (err) {
+      throw err
+    }
+    const swFileContents = data.replace(wbSwRegex, wbFileName)
+    fs.writeFile(config.swDest, swFileContents, () => {
+      console.log('Pre-cache Manifest generated.')
+    })
+  })
+})

package.json

@@ -44,10 +44,11 @@
     "js-test-cloud": "ruby -r webrick -e \"s = WEBrick::HTTPServer.new(:Port => 3000, :DocumentRoot => Dir.pwd, :Logger => WEBrick::Log.new('/dev/null'), :AccessLog => []); trap('INT') { s.shutdown }; s.start\" & grunt saucelabs-qunit",
     "docs": "npm-run-all docs-compile docs-lint",
     "docs-lint": "htmllint --rc build/.htmllintrc _gh_pages/*.html _gh_pages/**/*.html js/tests/visual/*.html",
-    "docs-compile": "bundle exec jekyll build",
+    "docs-compile": "bundle exec jekyll build && npm run docs-workbox-precache",
     "docs-serve": "bundle exec jekyll serve",
     "docs-github": "shx echo \"github: true\" > twbsconfig.yml && npm run docs-compile -- --config _config.yml,twbsconfig.yml && shx rm ./twbsconfig.yml",
     "docs-upload-preview": "build/upload-preview.sh",
+    "docs-workbox-precache": "node build/workbox.js",
     "maintenance-dependencies": "ncu -a -x jquery && npm update && bundle update && shx echo 'Manually update assets/js/vendor/*, js/tests/vendor/* and .travis.yml'",
     "release-version": "node build/change-version.js",
     "release-zip": "cd dist/ && zip -r9 bootstrap-$npm_package_version-dist.zip * && shx mv bootstrap-$npm_package_version-dist.zip ..",
@@ -99,7 +100,8 @@
     "rollup-plugin-node-resolve": "^3.0.0",
     "shelljs": "^0.7.8",
     "shx": "^0.2.2",
-    "uglify-js": "^3.0.24"
+    "uglify-js": "^3.0.24",
+    "workbox-build": "^2.0.1"
   },
   "engines": {
     "node": ">=4"

sw.js

@@ -1 +1,4 @@
-// empty for now
+self.importScripts('/assets/js/vendor/{fileName}')
+
+const workboxSW = new self.WorkboxSW()
+workboxSW.precache([])