diff --git a/src/vector/platform/WebPlatform.ts b/src/vector/platform/WebPlatform.ts
index 0a82b28e3..3f93ad712 100644
--- a/src/vector/platform/WebPlatform.ts
+++ b/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
     }
diff --git a/webpack.config.js b/webpack.config.js
index 1b59d8740..a3a8af31c 100644
--- a/webpack.config.js
+++ b/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: [{