feat: lay down prep work for adding full on service worker support to Pattern Lab's UI. Cache busting logic will likely need to get added but the overall setup being added pretty much works!

Author: bolt-bot

packages/uikit-workshop/gulpfile.js

@@ -8,6 +8,9 @@ const inlinesource = require('gulp-inline-source');
 const path = require('path');
 const { buildCriticalCSS } = require('./penthouse');
 
+// @todo: uncomment once cache-busting strategy in place.
+// const workboxBuild = require('workbox-build');
+
 /* load the plugins */
 const gulpLoadPlugins = require('gulp-load-plugins');
 const plugins = gulpLoadPlugins({ scope: ['devDependencies'] });
@@ -181,6 +184,17 @@ gulp.task('build:js-pattern', ['clean', 'build:js-viewer'], function() {
     .pipe(copyPublic('styleguide/js'));
 });
 
+// @todo: re-enable once cache busting strategy in place
+// gulp.task('service-worker', ['build:html'], function() {
+//   return workboxBuild.generateSW({
+//     globDirectory: 'dist',
+//     globPatterns: ['**/*.{html,json,js,css}'],
+//     swDest: 'dist/sw.js',
+//     clientsClaim: true,
+//     skipWaiting: true,
+//   });
+// });
+
 gulp.task(
   'default',
   [
@@ -190,6 +204,7 @@ gulp.task(
     'build:js-pattern',
     'build:html',
     'prebuild:html',
+    // 'service-worker', // @todo: uncomment once cache-busting strategy in place
   ],
   function() {
     if (args.watch !== undefined) {

packages/uikit-workshop/package.json

@@ -45,6 +45,7 @@
     "imagemin-pngcrush": "^5.1.0",
     "main-bower-files": "^2.13.1",
     "penthouse": "^1.6.2",
+    "workbox-build": "^3.4.1",
     "yargs": "^12.0.1"
   },
   "publishConfig": {

packages/uikit-workshop/src/html/index.html

@@ -112,6 +112,14 @@
       }
     });
 
+    // Check that service workers are registered
+    // @todo: uncomment once cache-busting strategy is in place
+    // if ('serviceWorker' in navigator) {
+    //   // Use the window load event to keep the page load performant
+    //   window.addEventListener('load', () => {
+    //     navigator.serviceWorker.register('/sw.js');
+    //   });
+    // }
   </script>
 
 </body>