v4 to v5 migration

Author: jeffposnick

package.json

@@ -44,7 +44,15 @@
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-string": "^3.0.0",
-    "workbox-cli": "^5.0.0"
+    "workbox-cacheable-response": "^5.0.0",
+    "workbox-cli": "^5.0.0",
+    "workbox-core": "^5.0.0",
+    "workbox-expiration": "^5.0.0",
+    "workbox-precaching": "^5.0.0",
+    "workbox-routing": "^5.0.0",
+    "workbox-strategies": "^5.0.0",
+    "workbox-streams": "^5.0.0"
   }
 }

rollup.config.mjs

@@ -17,8 +17,7 @@
 import {string} from 'rollup-plugin-string';
 import babel from 'rollup-plugin-babel';
 import compiler from '@ampproject/rollup-plugin-closure-compiler';
-import os from 'os';
-import path from 'path';
+import replace from 'rollup-plugin-replace';
 import resolve from 'rollup-plugin-node-resolve';
 
 // The version of Chromium used by Samsung Internet 6.x.
@@ -58,6 +57,10 @@ export default [{
 }, {
   input: 'src/service-worker.mjs',
   plugins: [
+    replace({
+      'process.env.NODE_ENV': JSON.stringify(
+          process.env.NODE_ENV || 'development'),
+    }),
     resolve(),
     babel({
       presets: [['@babel/preset-env', {
@@ -68,7 +71,7 @@ export default [{
     compiler(),
   ],
   output: {
-    file: path.join(os.tmpdir(), 'service-worker.js'),
+    file: 'build/service-worker.js',
     format: 'iife',
   },
 }, {

src/lib/partials.mjs

@@ -15,8 +15,8 @@
  **/
 
 export default {
-  about: () => workbox.precaching.getCacheKeyForURL('partials/about.html'),
-  foot: () => workbox.precaching.getCacheKeyForURL('partials/foot.html'),
-  head: () => workbox.precaching.getCacheKeyForURL('partials/head.html'),
-  navbar: () => workbox.precaching.getCacheKeyForURL('partials/navbar.html'),
+  about: 'partials/about.html',
+  foot: 'partials/foot.html',
+  head: 'partials/head.html',
+  navbar: 'partials/navbar.html',
 };

src/service-worker.mjs

@@ -14,49 +14,50 @@
  * limitations under the License.
  **/
 
+import {CacheableResponsePlugin} from 'workbox-cacheable-response';
+import {CacheFirst, StaleWhileRevalidate} from 'workbox-strategies';
+import {cleanupOutdatedCaches, matchPrecache, precacheAndRoute}
+  from 'workbox-precaching';
+import {clientsClaim, skipWaiting} from 'workbox-core';
+import {ExpirationPlugin} from 'workbox-expiration';
+import {registerRoute} from 'workbox-routing';
+import {strategy as streamsStrategy} from 'workbox-streams';
+
 import {API_CACHE_NAME, DEFAULT_TAG} from './lib/constants.mjs';
 import * as templates from './lib/templates.mjs';
 import * as urls from './lib/urls.mjs';
 import partials from './lib/partials.mjs';
 import routeMatchers from './lib/route-matchers.mjs';
 
-importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.0.0-beta.1/workbox-sw.js');
-workbox.setConfig({
-  debug: true,
-});
-workbox.precaching.precacheAndRoute([]);
-workbox.precaching.cleanupOutdatedCaches();
-
-const cacheStrategy = new workbox.strategies.CacheFirst({
-  cacheName: workbox.core.cacheNames.precache,
-});
+precacheAndRoute(self.__WB_MANIFEST);
+cleanupOutdatedCaches();
 
-const apiStrategy = new workbox.strategies.StaleWhileRevalidate({
+const apiStrategy = new StaleWhileRevalidate({
   cacheName: API_CACHE_NAME,
   plugins: [
-    new workbox.expiration.Plugin({maxEntries: 50}),
+    new ExpirationPlugin({maxEntries: 50}),
   ],
 });
 
-workbox.routing.registerRoute(
+registerRoute(
     routeMatchers.get('about'),
-    workbox.streams.strategy([
-      () => cacheStrategy.makeRequest({request: partials.head()}),
-      () => cacheStrategy.makeRequest({request: partials.navbar()}),
-      () => cacheStrategy.makeRequest({request: partials.about()}),
-      () => cacheStrategy.makeRequest({request: partials.foot()}),
+    streamsStrategy([
+      () => matchPrecache(partials.head),
+      () => matchPrecache(partials.navbar),
+      () => matchPrecache(partials.about),
+      () => matchPrecache(partials.foot),
     ])
 );
 
-workbox.routing.registerRoute(
+registerRoute(
     routeMatchers.get('questions'),
-    workbox.streams.strategy([
-      () => cacheStrategy.makeRequest({request: partials.head()}),
-      () => cacheStrategy.makeRequest({request: partials.navbar()}),
-      async ({event, url, params}) => {
+    streamsStrategy([
+      () => matchPrecache(partials.head),
+      () => matchPrecache(partials.navbar),
+      async ({event, params}) => {
         try {
           const questionId = params[1];
-          const questionResponse = await apiStrategy.makeRequest({
+          const questionResponse = await apiStrategy.handle({
             event,
             request: urls.getQuestion(questionId),
           });
@@ -66,19 +67,19 @@ workbox.routing.registerRoute(
           return templates.error(error.message);
         }
       },
-      () => cacheStrategy.makeRequest({request: partials.foot()}),
+      () => matchPrecache(partials.foot),
     ])
 );
 
-workbox.routing.registerRoute(
+registerRoute(
     routeMatchers.get('index'),
-    workbox.streams.strategy([
-      () => cacheStrategy.makeRequest({request: partials.head()}),
-      () => cacheStrategy.makeRequest({request: partials.navbar()}),
+    streamsStrategy([
+      () => matchPrecache(partials.head),
+      () => matchPrecache(partials.navbar),
       async ({event, url}) => {
         try {
           const tag = url.searchParams.get('tag') || DEFAULT_TAG;
-          const listResponse = await apiStrategy.makeRequest({
+          const listResponse = await apiStrategy.handle({
             event,
             request: urls.listQuestionsForTag(tag),
           });
@@ -88,37 +89,37 @@ workbox.routing.registerRoute(
           return templates.error(error.message);
         }
       },
-      () => cacheStrategy.makeRequest({request: partials.foot()}),
+      () => matchPrecache(partials.foot),
     ])
 );
 
 // Gravatar images support CORS, so we won't be storing opaque responses.
-workbox.routing.registerRoute(
+registerRoute(
     new RegExp('https://www\\.gravatar\\.com/'),
-    new workbox.strategies.CacheFirst({
+    new CacheFirst({
       cacheName: 'profile-images',
       plugins: [
-        new workbox.expiration.Plugin({
+        new ExpirationPlugin({
           maxEntries: 50,
           purgeOnQuotaError: true,
         }),
       ],
     })
 );
 
-workbox.routing.registerRoute(
+registerRoute(
     new RegExp('^https://.*(?:\\.jpg|\\.png)'),
-    new workbox.strategies.CacheFirst({
+    new CacheFirst({
       cacheName: 'other-images',
       plugins: [
-        new workbox.cacheableResponse.Plugin({statuses: [0, 200]}),
-        new workbox.expiration.Plugin({
+        new CacheableResponsePlugin({statuses: [0, 200]}),
+        new ExpirationPlugin({
           maxEntries: 10,
           purgeOnQuotaError: true,
         }),
       ],
     })
 );
 
-workbox.core.skipWaiting();
-workbox.core.clientsClaim();
+skipWaiting();
+clientsClaim();

workbox-config.js

@@ -14,14 +14,13 @@
  * limitations under the License.
  **/
 
-const os = require('os');
 const path = require('path');
 
 module.exports = {
   globDirectory: 'build',
   globPatterns: [
     '**/*.{html,js,svg,png,json}',
   ],
-  swSrc: path.join(os.tmpdir(), 'service-worker.js'),
+  swSrc: path.join('build', 'service-worker.js'),
   swDest: path.join('build', 'service-worker.js'),
 };