Merge pull request #15196 from vector-im/t3chguy/fix/12591

Replace dummy sw.js with pre-caching and runtime-caching workbox SW

package.json

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

res/sw.js

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

scripts/copy-res.js

@@ -61,7 +61,6 @@ 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,16 +55,6 @@
     <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

@@ -30,7 +30,7 @@ import './modernizr';
 
 // load service worker if available on this platform
 if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('sw.js');
+    navigator.serviceWorker.register('service-worker.js');
 }
 
 async function settled(...promises: Array<Promise<any>>) {

webpack.config.js

@@ -3,7 +3,7 @@ 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 webpack = require("webpack");
+const WorkboxPlugin = require('workbox-webpack-plugin');
 
 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';
@@ -248,9 +248,9 @@ module.exports = (env, argv) => {
                     },
                 },
                 {
-                    // cache-bust languages.json file placed in
+                    // cache-bust i18n .json files placed in
                     // riot-web/webapp/i18n during build by copy-res.js
-                    test: /\.*languages.json$/,
+                    test: /i18n\/.*\.json$/,
                     type: "javascript/auto",
                     loader: 'file-loader',
                     options: {
@@ -356,6 +356,20 @@ module.exports = (env, argv) => {
                 minify: argv.mode === 'production',
                 chunks: ['usercontent'],
             }),
+
+            new WorkboxPlugin.GenerateSW({
+                runtimeCaching: [{
+                    urlPattern: /i18n\/.*\.json$/,
+                    handler: 'CacheFirst',
+
+                    options: {
+                        cacheName: 'i18n',
+                        expiration: {
+                            maxEntries: 2,
+                        },
+                    },
+                }],
+            }),
         ],
 
         output: {