Add error toast when service worker registration fails (#29895)

* Add error toast when service worker registration fails

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

* Iterate

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

* Update tests

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

* Update tests

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

---------

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

src/BasePlatform.ts

@@ -72,7 +72,7 @@ export default abstract class BasePlatform {
     protected _favicon?: Favicon;
 
     protected constructor() {
-        dis.register(this.onAction);
+        dis.register(this.onAction.bind(this));
         this.startUpdateCheck = this.startUpdateCheck.bind(this);
     }
 
@@ -85,14 +85,14 @@ export default abstract class BasePlatform {
      */
     public abstract getDefaultDeviceDisplayName(): string;
 
-    protected onAction = (payload: ActionPayload): void => {
+    protected onAction(payload: ActionPayload): void {
         switch (payload.action) {
             case "on_client_not_viable":
             case Action.OnLoggedOut:
                 this.setNotificationCount(0);
                 break;
         }
-    };
+    }
 
     // Used primarily for Analytics
     public abstract getHumanReadableName(): string;

src/i18n/strings/en_EN.json

@@ -2457,6 +2457,10 @@
         "recent_changes_heading": "Recent changes that have not yet been received",
         "title": "Server isn't responding"
     },
+    "service_worker_error": {
+        "description": "%(brand)s requires a service worker for loading authenticated media from Matrix content repositories. This is not supported by your browser so you may experience media failing to load.",
+        "title": "Failed to load service worker"
+    },
     "seshat": {
         "error_initialising": "Message search initialisation failed, check <a>your settings</a> for more information",
         "reset_button": "Reset event store",

src/vector/platform/WebPlatform.ts

@@ -18,6 +18,10 @@ import { Action } from "../../dispatcher/actions";
 import { type CheckUpdatesPayload } from "../../dispatcher/payloads/CheckUpdatesPayload";
 import { parseQs } from "../url_utils";
 import { _t } from "../../languageHandler";
+import ToastStore from "../../stores/ToastStore.ts";
+import GenericToast from "../../components/views/toasts/GenericToast.tsx";
+import SdkConfig from "../../SdkConfig.ts";
+import type { ActionPayload } from "../../dispatcher/payloads.ts";
 
 const POKE_RATE_MS = 10 * 60 * 1000; // 10 min
 
@@ -32,32 +36,59 @@ function getNormalizedAppVersion(version: string): string {
 
 export default class WebPlatform extends BasePlatform {
     private static readonly VERSION = process.env.VERSION!; // baked in by Webpack
+    private readonly registerServiceWorkerPromise: Promise<void>;
 
     public constructor() {
         super();
 
         // Register the service worker in the background
-        this.tryRegisterServiceWorker().catch((e) => console.error("Error registering/updating service worker:", e));
+        this.registerServiceWorkerPromise = this.registerServiceWorker();
+        this.registerServiceWorkerPromise.catch((e) => {
+            console.error("Error registering/updating service worker:", e);
+        });
     }
 
-    private async tryRegisterServiceWorker(): Promise<void> {
-        if (!("serviceWorker" in navigator)) {
-            return; // not available on this platform - don't try to register the service worker
-        }
+    protected onAction(payload: ActionPayload): void {
+        super.onAction(payload);
 
+        switch (payload.action) {
+            case "client_started":
+                // Defer drawing the toast until the client is started as the lifecycle methods reset the ToastStore right before
+                this.registerServiceWorkerPromise.catch(this.handleServiceWorkerRegistrationError);
+                break;
+        }
+    }
+
+    private async registerServiceWorker(): Promise<void> {
         // sw.js is exported by webpack, sourced from `/src/serviceworker/index.ts`
         const registration = await navigator.serviceWorker.register("sw.js");
         if (!registration) {
-            // Registration didn't work for some reason - assume failed and ignore.
-            // This typically happens in Jest.
-            return;
+            throw new Error("Service worker registration failed");
         }
 
-        navigator.serviceWorker.addEventListener("message", this.onServiceWorkerPostMessage.bind(this));
+        navigator.serviceWorker.addEventListener("message", this.onServiceWorkerPostMessage);
         await registration.update();
     }
 
-    private onServiceWorkerPostMessage(event: MessageEvent): void {
+    private handleServiceWorkerRegistrationError = (): void => {
+        const key = "service_worker_error";
+        const brand = SdkConfig.get().brand;
+        ToastStore.sharedInstance().addOrReplaceToast({
+            key,
+            title: _t("service_worker_error|title"),
+            props: {
+                description: _t("service_worker_error|description", { brand }),
+                primaryLabel: _t("action|ok"),
+                onPrimaryClick: () => {
+                    ToastStore.sharedInstance().dismissToast(key);
+                },
+            },
+            component: GenericToast,
+            priority: 95,
+        });
+    };
+
+    private onServiceWorkerPostMessage = (event: MessageEvent): void => {
         try {
             if (event.data?.["type"] === "userinfo" && event.data?.["responseKey"]) {
                 const userId = localStorage.getItem("mx_user_id");
@@ -73,7 +104,7 @@ export default class WebPlatform extends BasePlatform {
         } catch (e) {
             console.error("Error responding to service worker: ", e);
         }
-    }
+    };
 
     public getHumanReadableName(): string {
         return "Web Platform"; // no translation required: only used for analytics