Merge pull request #15352 from vector-im/t3chguy/remove-workbox

Remove workbox

package.json

@@ -143,8 +143,7 @@
     "typescript": "^3.7.3",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0",
-    "workbox-webpack-plugin": "^5.1.4"
+    "webpack-dev-server": "^3.9.0"
   },
   "jest": {
     "testEnvironment": "jest-environment-jsdom-fourteen",

res/sw.js

@@ -0,0 +1 @@
+self.addEventListener('fetch', () => {});

scripts/copy-res.js

@@ -61,6 +61,7 @@ const INCLUDE_LANGS = [
 // "dest/b/...".
 const COPY_LIST = [
     ["res/manifest.json", "webapp"],
+    ["res/sw.js", "webapp"],
     ["res/welcome.html", "webapp"],
     ["res/welcome/**", "webapp/welcome"],
     ["res/themes/**", "webapp/themes"],

src/vector/index.html

@@ -55,6 +55,16 @@
     <section id="matrixchat" style="height: 100%; overflow: auto;" class="notranslate"></section>
     <script src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
 
+    <!-- Legacy supporting Prefetch images -->
+    <img src="<%= require('matrix-react-sdk/res/img/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/e2e/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/feather-customised/warning-triangle.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/bold.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/code.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/italics.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/quote.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/format/strikethrough.svg') %>" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+
     <audio id="messageAudio">
         <source src="media/message.ogg" type="audio/ogg" />
         <source src="media/message.mp3" type="audio/mpeg" />

src/vector/index.ts

@@ -28,6 +28,11 @@ require('highlight.js/styles/github.css');
 import {parseQsFromFragment} from "./url_utils";
 import './modernizr';
 
+// load service worker if available on this platform
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js');
+}
+
 async function settled(...promises: Array<Promise<any>>) {
     for (const prom of promises) {
         try {

src/vector/platform/WebPlatform.ts

@@ -34,21 +34,6 @@ const POKE_RATE_MS = 10 * 60 * 1000; // 10 min
 export default class WebPlatform extends VectorBasePlatform {
     private runningVersion: string = null;
 
-    constructor() {
-        super();
-
-        // load service worker if available on this platform
-        if ('serviceWorker' in navigator) {
-            // 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().then(reg => reg && reg.unregister());
-            }
-        }
-    }
-
     getHumanReadableName(): string {
         return 'Web Platform'; // no translation required: only used for analytics
     }

webpack.config.js

@@ -1,10 +1,9 @@
 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');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const WorkboxPlugin = require('workbox-webpack-plugin');
+const webpack = require("webpack");
 
 let og_image_url = process.env.RIOT_OG_IMAGE_URL;
 if (!og_image_url) og_image_url = 'https://app.element.io/themes/element/img/logos/opengraph.png';
@@ -32,87 +31,6 @@ module.exports = (env, argv) => {
     const reactSdkSrcDir = path.resolve(require.resolve("matrix-react-sdk/package.json"), '..', 'src');
     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',
-            ignoreOrder: false, // Enable to remove warnings about conflicting order
-        }),
-
-        // This is the app's main entry point.
-        new HtmlWebpackPlugin({
-            template: './src/vector/index.html',
-
-            // we inject the links ourselves via the template, because
-            // HtmlWebpackPlugin will screw up our formatting like the names
-            // of the themes and which chunks we actually care about.
-            inject: false,
-            excludeChunks: ['mobileguide', 'usercontent', 'jitsi'],
-            minify: argv.mode === 'production',
-            vars: {
-                og_image_url: og_image_url,
-            },
-        }),
-
-        // This is the jitsi widget wrapper (embedded, so isolated stack)
-        new HtmlWebpackPlugin({
-            template: './src/vector/jitsi/index.html',
-            filename: 'jitsi.html',
-            minify: argv.mode === 'production',
-            chunks: ['jitsi'],
-        }),
-
-        // This is the mobile guide's entry point (separate for faster mobile loading)
-        new HtmlWebpackPlugin({
-            template: './src/vector/mobile_guide/index.html',
-            filename: 'mobile_guide/index.html',
-            minify: argv.mode === 'production',
-            chunks: ['mobileguide'],
-        }),
-
-        // These are the static error pages for when the javascript env is *really unsupported*
-        new HtmlWebpackPlugin({
-            template: './src/vector/static/unable-to-load.html',
-            filename: 'static/unable-to-load.html',
-            minify: argv.mode === 'production',
-            chunks: [],
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/vector/static/incompatible-browser.html',
-            filename: 'static/incompatible-browser.html',
-            minify: argv.mode === 'production',
-            chunks: [],
-        }),
-
-        // This is the usercontent sandbox's entry point (separate for iframing)
-        new HtmlWebpackPlugin({
-            template: './node_modules/matrix-react-sdk/src/usercontent/index.html',
-            filename: 'usercontent/index.html',
-            minify: argv.mode === 'production',
-            chunks: ['usercontent'],
-        }),
-    ];
-
-    const isDevServer = process.env.WEBPACK_DEV_SERVER;
-    if (!isDevServer) {
-        plugins.push(new WorkboxPlugin.GenerateSW({
-            maximumFileSizeToCacheInBytes: 22000000,
-            runtimeCaching: [{
-                urlPattern: /i18n\/.*\.json$/,
-                handler: 'CacheFirst',
-
-                options: {
-                    cacheName: 'i18n',
-                    expiration: {
-                        maxEntries: 2,
-                    },
-                },
-            }],
-        }));
-    }
-
     return {
         ...development,
 
@@ -230,8 +148,8 @@ module.exports = (env, argv) => {
                     },
                     loader: 'babel-loader',
                     options: {
-                        cacheDirectory: true,
-                    },
+                        cacheDirectory: true
+                    }
                 },
                 {
                     test: /\.css$/,
@@ -242,7 +160,7 @@ module.exports = (env, argv) => {
                             options: {
                                 importLoaders: 1,
                                 sourceMap: true,
-                            },
+                            }
                         },
                         {
                             loader: 'postcss-loader',
@@ -280,7 +198,7 @@ module.exports = (env, argv) => {
                                 "local-plugins": true,
                             },
                         },
-                    ],
+                    ]
                 },
                 {
                     test: /\.scss$/,
@@ -291,7 +209,7 @@ module.exports = (env, argv) => {
                             options: {
                                 importLoaders: 1,
                                 sourceMap: true,
-                            },
+                            }
                         },
                         {
                             loader: 'postcss-loader',
@@ -318,7 +236,7 @@ module.exports = (env, argv) => {
                                 "local-plugins": true,
                             },
                         },
-                    ],
+                    ]
                 },
                 {
                     test: /\.wasm$/,
@@ -330,9 +248,9 @@ module.exports = (env, argv) => {
                     },
                 },
                 {
-                    // cache-bust i18n .json files placed in
+                    // cache-bust languages.json file placed in
                     // riot-web/webapp/i18n during build by copy-res.js
-                    test: /i18n\/.*\.json$/,
+                    test: /\.*languages.json$/,
                     type: "javascript/auto",
                     loader: 'file-loader',
                     options: {
@@ -376,10 +294,69 @@ module.exports = (env, argv) => {
                         },
                     ],
                 },
-            ],
+            ]
         },
 
-        plugins,
+        plugins: [
+            // This exports our CSS using the splitChunks and loaders above.
+            new MiniCssExtractPlugin({
+                filename: 'bundles/[hash]/[name].css',
+                ignoreOrder: false, // Enable to remove warnings about conflicting order
+            }),
+
+            // This is the app's main entry point.
+            new HtmlWebpackPlugin({
+                template: './src/vector/index.html',
+
+                // we inject the links ourselves via the template, because
+                // HtmlWebpackPlugin will screw up our formatting like the names
+                // of the themes and which chunks we actually care about.
+                inject: false,
+                excludeChunks: ['mobileguide', 'usercontent', 'jitsi'],
+                minify: argv.mode === 'production',
+                vars: {
+                    og_image_url: og_image_url,
+                },
+            }),
+
+            // This is the jitsi widget wrapper (embedded, so isolated stack)
+            new HtmlWebpackPlugin({
+                template: './src/vector/jitsi/index.html',
+                filename: 'jitsi.html',
+                minify: argv.mode === 'production',
+                chunks: ['jitsi'],
+            }),
+
+            // This is the mobile guide's entry point (separate for faster mobile loading)
+            new HtmlWebpackPlugin({
+                template: './src/vector/mobile_guide/index.html',
+                filename: 'mobile_guide/index.html',
+                minify: argv.mode === 'production',
+                chunks: ['mobileguide'],
+            }),
+
+            // These are the static error pages for when the javascript env is *really unsupported*
+            new HtmlWebpackPlugin({
+                template: './src/vector/static/unable-to-load.html',
+                filename: 'static/unable-to-load.html',
+                minify: argv.mode === 'production',
+                chunks: [],
+            }),
+            new HtmlWebpackPlugin({
+                template: './src/vector/static/incompatible-browser.html',
+                filename: 'static/incompatible-browser.html',
+                minify: argv.mode === 'production',
+                chunks: [],
+            }),
+
+            // This is the usercontent sandbox's entry point (separate for iframing)
+            new HtmlWebpackPlugin({
+                template: './node_modules/matrix-react-sdk/src/usercontent/index.html',
+                filename: 'usercontent/index.html',
+                minify: argv.mode === 'production',
+                chunks: ['usercontent'],
+            }),
+        ],
 
         output: {
             path: path.join(__dirname, "webapp"),