Service Worker HTML caching bug fix

packages/peregrine/lib/talons/App/useApp.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import errorRecord from '@magento/peregrine/lib/util/createErrorRecord';
 import { useAppContext } from '@magento/peregrine/lib/context/app';
 
@@ -33,19 +33,11 @@ export const useApp = props => {
         handleError,
         handleIsOffline,
         handleIsOnline,
-        handleHTMLUpdate,
         markErrorHandled,
         renderError,
         unhandledErrors
     } = props;
 
-    const [isHTMLUpdateAvailable, setHTMLUpdateAvailable] = useState(false);
-
-    const resetHTMLUpdateAvaialable = useCallback(
-        () => setHTMLUpdateAvailable(false),
-        [setHTMLUpdateAvailable]
-    );
-
     const reload = useCallback(
         process.env.NODE_ENV === 'development'
             ? () => {
@@ -98,19 +90,12 @@ export const useApp = props => {
         }
     }, [handleIsOnline, handleIsOffline, hasBeenOffline, isOnline]);
 
-    useEffect(() => {
-        if (isHTMLUpdateAvailable) {
-            handleHTMLUpdate(resetHTMLUpdateAvaialable);
-        }
-    }, [isHTMLUpdateAvailable, handleHTMLUpdate, resetHTMLUpdateAvaialable]);
-
     const handleCloseDrawer = useCallback(() => {
         closeDrawer();
     }, [closeDrawer]);
 
     return {
         hasOverlay: !!overlay,
-        handleCloseDrawer,
-        setHTMLUpdateAvailable
+        handleCloseDrawer
     };
 };

packages/pwa-buildpack/lib/Utilities/getClientConfig.js

@@ -4,6 +4,7 @@ const webpack = require('webpack');
 const WebpackAssetsManifest = require('webpack-assets-manifest');
 const TerserPlugin = require('terser-webpack-plugin');
 
+const ServiceWorkerPlugin = require('../WebpackTools/plugins/ServiceWorkerPlugin');
 const PWADevServer = require('../WebpackTools/PWADevServer');
 const RootComponentsPlugin = require('../WebpackTools/plugins/RootComponentsPlugin');
 const UpwardIncludePlugin = require('../WebpackTools/plugins/UpwardIncludePlugin');
@@ -173,6 +174,19 @@ module.exports = async function({
                         }
                     });
                 }
+            }),
+            new ServiceWorkerPlugin({
+                mode,
+                paths,
+                injectManifest: true,
+                enableServiceWorkerDebugging: !!projectConfig.section(
+                    'devServer'
+                ).serviceWorkerEnabled,
+                injectManifestConfig: {
+                    include: [/\.(?:css|js|html|svg)$/],
+                    swSrc: './src/ServiceWorker/sw.js',
+                    swDest: './sw.js'
+                }
             })
         ],
         devtool: 'source-map',

packages/pwa-buildpack/lib/WebpackTools/__tests__/configureWebpack.spec.js

@@ -102,7 +102,7 @@ test('produces a webpack config and friendly manifest plugin', async () => {
         .statsAsDirectory()
         .statsAsFile()
         .productionEnvironment();
-    const { clientConfig: config } = await configureWebpack({ context: '.' });
+    const config = await configureWebpack({ context: '.' });
     expect(config).toMatchObject({
         context: '.',
         mode: 'production',
@@ -150,7 +150,7 @@ test('works in developer mode from cli', async () => {
         .statsAsDirectory()
         .statsAsMissing()
         .productionEnvironment();
-    const { clientConfig } = await configureWebpack({
+    const clientConfig = await configureWebpack({
         context: '.',
         env: { mode: 'development' }
     });
@@ -163,7 +163,7 @@ test('works in developer mode from fallback', async () => {
         .statsAsDirectory()
         .statsAsMissing()
         .devEnvironment();
-    const { clientConfig } = await configureWebpack({ context: '.' });
+    const clientConfig = await configureWebpack({ context: '.' });
 
     expect(clientConfig).toHaveProperty('mode', 'development');
 });
@@ -217,7 +217,7 @@ test('handles special flags', async () => {
     // declare at least one argument or Tapable won't give us anything.
     const specialFeaturesTap = jest.fn(x => x);
     specialFeaturesHook.tap('configureWebpack.spec.js', specialFeaturesTap);
-    const { clientConfig } = await configureWebpack({
+    const clientConfig = await configureWebpack({
         context: './fake/different/context',
         vendor: ['jest'],
         special

packages/pwa-buildpack/lib/WebpackTools/configureWebpack.js

@@ -5,7 +5,6 @@ const pkgDir = require('pkg-dir');
 
 const loadEnvironment = require('../Utilities/loadEnvironment');
 const getClientConfig = require('../Utilities/getClientConfig');
-const getServiceWorkerConfig = require('../Utilities/getServiceWorkerConfig');
 const BuildBus = require('../BuildBus');
 const BuildBusPlugin = require('./plugins/BuildBusPlugin');
 
@@ -112,16 +111,14 @@ async function configureWebpack(options) {
         stats
     };
 
-    const serviceWorkerConfig = getServiceWorkerConfig(configOptions);
-
     const clientConfig = await getClientConfig({
         ...configOptions,
         vendor: options.vendor || []
     });
 
     clientConfig.plugins.unshift(new BuildBusPlugin(bus, busTrackingQueue));
 
-    return { clientConfig, serviceWorkerConfig };
+    return clientConfig;
 }
 
 module.exports = configureWebpack;

packages/pwa-buildpack/lib/WebpackTools/plugins/ServiceWorkerPlugin.js

@@ -65,13 +65,11 @@ class ServiceWorkerPlugin {
      */
     apply(compiler) {
         const { enableServiceWorkerDebugging, mode } = this.config;
-        compiler.hooks.afterEmit.tap('ServiceWorkerPlugin', () => {
-            if (mode === 'development' && !enableServiceWorkerDebugging) {
-                console.warn('Emitting no ServiceWorker in development mode.');
-            } else {
-                this.applyWorkbox(compiler);
-            }
-        });
+        if (mode === 'development' && !enableServiceWorkerDebugging) {
+            console.warn('Emitting no ServiceWorker in development mode.');
+        } else {
+            this.applyWorkbox(compiler);
+        }
     }
 
     /**

packages/pwa-buildpack/lib/WebpackTools/plugins/__tests__/ServiceWorkerPlugin.spec.js

@@ -6,9 +6,7 @@ const WriteFileWebpackPlugin = require('write-file-webpack-plugin');
 
 const ServiceWorkerPlugin = require('../ServiceWorkerPlugin');
 
-const fakeTap = jest.fn();
-
-const fakeCompiler = { hooks: { afterEmit: { tap: fakeTap } } };
+const fakeCompiler = { hooks: {} };
 
 beforeEach(() => {
     WorkboxPlugin.GenerateSW.mockClear();
@@ -39,11 +37,7 @@ test('returns a valid Webpack plugin', () => {
 
     plugin.apply(fakeCompiler);
 
-    fakeTap.mock.calls[0][1].call(plugin);
-
     expect(plugin).toHaveProperty('apply', expect.any(Function));
-    expect(fakeTap.mock.calls[0][0]).toBe('ServiceWorkerPlugin');
-    expect(fakeTap.mock.calls[0][1]).toBeInstanceOf(Function);
 });
 
 test('.apply calls WorkboxPlugin.GenerateSW in prod', () => {
@@ -62,8 +56,6 @@ test('.apply calls WorkboxPlugin.GenerateSW in prod', () => {
 
     plugin.apply(fakeCompiler);
 
-    fakeTap.mock.calls[0][1].call(plugin);
-
     expect(WriteFileWebpackPlugin).not.toHaveBeenCalled();
     expect(WorkboxPlugin.GenerateSW).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -87,8 +79,6 @@ test('.apply calls nothing but warns in console in dev', () => {
 
     plugin.apply(fakeCompiler);
 
-    fakeTap.mock.calls[0][1].call(plugin);
-
     expect(console.warn).toHaveBeenCalledWith(
         expect.stringContaining(
             `Emitting no ServiceWorker in development mode.`
@@ -122,8 +112,6 @@ test('.apply generates and writes out a serviceworker when enableServiceWorkerDe
 
     plugin.apply(fakeCompiler);
 
-    fakeTap.mock.calls[0][1].call(plugin);
-
     expect(WriteFileWebpackPlugin).toHaveBeenCalledWith(
         expect.objectContaining({
             test: expect.objectContaining({
@@ -166,8 +154,6 @@ test('.apply uses `InjectManifest` when `injectManifest` is `true`', () => {
 
     plugin.apply(fakeCompiler);
 
-    fakeTap.mock.calls[0][1].call(plugin);
-
     expect(WorkboxPlugin.InjectManifest).toHaveBeenCalledWith(
         expect.objectContaining(injectManifestConfig)
     );

packages/pwa-buildpack/package.json

@@ -70,14 +70,14 @@
     "terser-webpack-plugin": "~1.2.3",
     "wait-for-expect": "~1.2.0",
     "webpack": "~4.38.0",
-    "workbox-webpack-plugin": "~4.2.0"
+    "workbox-webpack-plugin": "5.1.3"
   },
   "peerDependencies": {
     "babel-loader": "~8.0.5",
     "css-loader": "~2.1.1",
     "terser-webpack-plugin": "~1.2.3",
     "webpack": "~4.38.0",
-    "workbox-webpack-plugin": "~4.2.0"
+    "workbox-webpack-plugin": "5.1.3"
   },
   "engines": {
     "node": ">=10.x",

packages/venia-concept/package.json

@@ -95,7 +95,6 @@
     "lodash.over": "~4.7.0",
     "memoize-one": "~5.0.0",
     "memory-fs": "~0.4.1",
-    "node-html-parser": "~1.1.16",
     "prettier": "~1.16.4",
     "prop-types": "~15.7.2",
     "react": "~16.9.0",
@@ -117,7 +116,7 @@
     "webpack-bundle-analyzer": "~3.3.2",
     "webpack-cli": "~3.2.3",
     "webpack-dev-server": "~3.2.1",
-    "workbox-webpack-plugin": "~4.2.0"
+    "workbox-webpack-plugin": "5.1.3"
   },
   "optionalDependencies": {
     "iltorb": "~2.0.0",