Disable workbox when running in webpack dev server, not in dev mode

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/vector/platform/WebPlatform.ts

@@ -38,13 +38,20 @@ export default class WebPlatform extends VectorBasePlatform {
         super();
 
         // load service worker if available on this platform
-        // Service worker is disabled in development: https://github.com/GoogleChrome/workbox/issues/1790
-        if ('serviceWorker' in navigator && process.env.NODE_ENV === "production") {
-            navigator.serviceWorker.register('service-worker.js');
+        if ('serviceWorker' in navigator) {
+            // clean up old dummy sw.js
+            navigator.serviceWorker.getRegistration('sw.js').then(reg => reg.unregister());
+
+            // Service worker is disabled in webpack-dev-server: https://github.com/GoogleChrome/workbox/issues/1790
+            if (!process.env.WEBPACK_DEV_SERVER) {
+                navigator.serviceWorker.register('service-worker.js');
+            } else {
+                // we no longer run workbox when in webpack-dev-server, clean it up
+                navigator.serviceWorker.getRegistration('service-worker.js').then(reg => reg.unregister());
+            }
         }
     }
 
-
     getHumanReadableName(): string {
         return 'Web Platform'; // no translation required: only used for analytics
     }

webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const {EnvironmentPlugin} = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
@@ -32,6 +33,8 @@ module.exports = (env, argv) => {
     const jsSdkSrcDir = path.resolve(require.resolve("matrix-js-sdk/package.json"), '..', 'src');
 
     const plugins = [
+        new EnvironmentPlugin(["WEBPACK_DEV_SERVER"]), // pass this as it is used for conditionally loading workbox
+
         // This exports our CSS using the splitChunks and loaders above.
         new MiniCssExtractPlugin({
             filename: 'bundles/[hash]/[name].css',
@@ -92,7 +95,8 @@ module.exports = (env, argv) => {
         }),
     ];
 
-    if (argv.mode === "production") {
+    const isDevServer = process.env.WEBPACK_DEV_SERVER;
+    if (!isDevServer) {
         plugins.push(new WorkboxPlugin.GenerateSW({
             maximumFileSizeToCacheInBytes: 22000000,
             runtimeCaching: [{