pwa support

offline support

frontend/package.json

@@ -52,7 +52,8 @@
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "4.9.2",
     "webpack-dev-server": "4.7.4",
-    "webpack-merge": "5.8.0"
+    "webpack-merge": "5.8.0",
+    "workbox-webpack-plugin": "6.5.4"
   },
   "dependencies": {
     "axios": "0.21.4",
@@ -72,6 +73,7 @@
     "object-hash": "3.0.0",
     "remove-files-webpack-plugin": "1.5.0",
     "stemmer": "2.0.0",
-    "throttle-debounce": "3.0.1"
+    "throttle-debounce": "3.0.1",
+    "workbox-window": "6.5.4"
   }
 }

frontend/src/ts/ready.ts

@@ -64,6 +64,65 @@ $(document).ready(() => {
     .removeClass("hidden")
     .stop(true, true)
     .animate({ opacity: 1 }, 250);
-  PSA.show();
+  if (ConnectionState.get()) PSA.show();
   MonkeyPower.init();
 });
+
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    // disabling service workers on localhost - they dont really work well with local development
+    // and cause issues with hot reloading
+    if (window.location.hostname === "localhost") {
+      navigator.serviceWorker.getRegistrations().then(function (registrations) {
+        for (const registration of registrations) {
+          // if (registration.scope !== "https://monkeytype.com/")
+          registration.unregister();
+        }
+      });
+    } else {
+      const wb = new Workbox("/service-worker.js");
+
+      let updateBannerId: number;
+
+      // Add an event listener to detect when the registered
+      // service worker has installed but is waiting to activate.
+      wb.addEventListener("waiting", (event) => {
+        // set up a listener that will show a banner as soon as
+        // the previously waiting service worker has taken control.
+        wb.addEventListener("controlling", (event2) => {
+          if (
+            (event.isUpdate || event2.isUpdate) &&
+            updateBannerId === undefined
+          ) {
+            updateBannerId = Notifications.addBanner(
+              "Update ready - please refresh",
+              1,
+              "gift",
+              true
+            );
+          }
+        });
+
+        wb.messageSkipWaiting();
+      });
+
+      wb.register()
+        .then((registration) => {
+          // if (registration?.waiting) {
+          //   //@ts-ignore
+          //   registration?.onupdatefound = (): void => {
+          //     Notifications.add("Downloading update...", 1, 0, "Update");
+          //   };
+          // }
+          console.log("Service worker registration succeeded:", registration);
+
+          setInterval(() => {
+            wb.update(); //check for updates every 15 minutes
+          }, 900000);
+        })
+        .catch((e) => {
+          console.log("Service worker registration failed:", e);
+        });
+    }
+  });
+}

frontend/static/manifest.json

@@ -1,12 +1,19 @@
 {
-  "short_name": "MT",
+  "short_name": "Monkeytype",
   "name": "Monkeytype",
   "start_url": "/",
   "icons": [
     {
-      "src": "/images/mt-icon-512.png",
+      "src": "/images/icons/maskable_icon_x512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/images/icons/general_icon_x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
     }
   ],
   "background_color": "#323437",

frontend/webpack/config.prod.js

@@ -4,6 +4,7 @@ const RemovePlugin = require("remove-files-webpack-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
 const JsonMinimizerPlugin = require("json-minimizer-webpack-plugin");
+const WorkboxPlugin = require("workbox-webpack-plugin");
 
 const BASE_CONFIG = require("./config.base");
 
@@ -73,6 +74,14 @@ const PRODUCTION_CONFIG = {
         include: [resolve(__dirname, "../public/html")],
       },
     }),
+    new WorkboxPlugin.GenerateSW({
+      // these options encourage the ServiceWorkers to get in there fast
+      // and not allow any straggling "old" SWs to hang around
+      clientsClaim: true,
+      skipWaiting: false,
+      //include the generated css and js files
+      maximumFileSizeToCacheInBytes: 11000000,
+    }),
   ],
 };