Make it possible to disable service worker at runtime

frontend/components/block/attributes.ts

@@ -4,6 +4,7 @@ export interface BlockAttributes {
     instanceId: string,
     defaultHomeserver?: string,
     roomId?: string,
+    enableServiceWorker?: boolean,
     height?: Height,
     borderWidth?: BorderWidth,
     borderRadius?: BorderRadius,
@@ -16,6 +17,7 @@ export function parseAttributes(attributes): BlockAttributes {
         instanceId,
         defaultHomeserver,
         roomId,
+        enableServiceWorker,
         height,
         borderWidth,
         borderRadius,
@@ -27,6 +29,7 @@ export function parseAttributes(attributes): BlockAttributes {
         instanceId,
         defaultHomeserver: defaultHomeserver ?? '',
         roomId: roomId ?? '',
+        enableServiceWorker: enableServiceWorker ?? true,
         height: height ? new Height(height.value, height.unit) : undefined,
         borderWidth: borderWidth ? new BorderWidth(borderWidth.value, borderWidth.unit) : undefined,
         borderRadius: borderRadius ? new BorderRadius(borderRadius.value, borderRadius.unit) : undefined,

frontend/components/block/block.tsx

@@ -13,6 +13,7 @@ export function Block(props: BlockProps) {
         instanceId,
         defaultHomeserver,
         roomId,
+        enableServiceWorker,
         height,
         borderWidth,
         borderRadius,
@@ -34,6 +35,7 @@ export function Block(props: BlockProps) {
         instanceId,
         defaultHomeserver,
         roomId,
+        enableServiceWorker,
     };
 
     return (

frontend/components/chat/chat.tsx

@@ -7,6 +7,7 @@ export interface ChatProps {
     instanceId: string,
     defaultHomeserver?: string,
     roomId?: string,
+    enableServiceWorker?: boolean,
 }
 
 export function Chat(props: ChatProps) {
@@ -15,14 +16,16 @@ export function Chat(props: ChatProps) {
         iframeUrl,
         instanceId,
         defaultHomeserver,
-        roomId
+        roomId,
+        enableServiceWorker,
     } = props;
 
     const ref = focusable ? useFocusableIframe() : undefined;
     const url = new IframeUrl(iframeUrl, {
         instanceId,
         defaultHomeserver,
         roomId,
+        enableServiceWorker,
     });
 
     return (

frontend/components/chat/url.ts

@@ -4,6 +4,7 @@ type IframeParams = {
     instanceId: string,
     defaultHomeserver?: string
     roomId?: string,
+    enableServiceWorker?: boolean,
 }
 
 export class IframeUrl {
@@ -13,9 +14,17 @@ export class IframeUrl {
         this.url = iframeUrl;
 
         for (let key in params) {
-            if (!!params[key]) {
-                this.url.searchParams.append(key, params[key]);
+            let value = params[key];
+
+            if (typeof value === 'boolean') {
+                value = value ? "true" : "false";
+            }
+
+            if (!value) {
+                continue;
             }
+
+            this.url.searchParams.append(key, value);
         }
 
         this.applyLoginToken();

frontend/iframe/config/ConfigFactory.ts

@@ -11,10 +11,21 @@ export class ConfigFactory {
             return param;
         };
 
+        let enableServiceWorker = true;
+        const enableServiceWorkerParam = getQueryParam("enableServiceWorker");
+        if (enableServiceWorkerParam) {
+            if (enableServiceWorkerParam === "true") {
+                enableServiceWorker = true;
+            } else if (enableServiceWorkerParam === "false") {
+                enableServiceWorker = false;
+            }
+        }
+
         return {
             instanceId: getQueryParam("instanceId") ?? "",
             defaultHomeserver: getQueryParam("defaultHomeserver") ?? "",
             roomId: getQueryParam("roomId") ?? "",
+            enableServiceWorker,
             themeManifests: [
                 new URL("assets/theme-chatrix.json", import.meta.url).href,
             ],

frontend/iframe/config/IConfig.ts

@@ -38,4 +38,13 @@ export interface IConfig {
      * Example: !abc123:example.com
      */
     roomId?: string;
+
+    /**
+     * Set to false to disable service worker.
+     * Note that the service worker is required to make Hydrogen work correctly across multiple browser tabs.
+     * You should not disable the service worker in environments where multiple browser tabs are a possibility.
+     *
+     * Defaults to true.
+     */
+    enableServiceWorker?: boolean
 }

frontend/iframe/platform/Platform.ts

@@ -17,7 +17,7 @@ export class Platform extends BasePlatform {
 
         // Register our own service worker handler.
         let serviceWorkerHandler;
-        if (assetPaths.serviceWorker && "serviceWorker" in navigator) {
+        if (options.config.enableServiceWorker && assetPaths.serviceWorker && "serviceWorker" in navigator) {
             serviceWorkerHandler = new ServiceWorkerHandler();
             serviceWorkerHandler.registerAndStart(assetPaths.serviceWorker);
         }