Use web worker when shared worker are not available

src/dataproxy/common/DataProxyInterface.ts

@@ -46,4 +46,5 @@ export interface ClientData {
   token: string
   instanceOptions: InstanceOptions
   capabilities: ClientCapabilities
+  useRemoteData: boolean
 }

src/dataproxy/worker/SharedWorkerProvider.tsx

@@ -50,23 +50,40 @@ export const SharedWorkerProvider = React.memo(
 
         log.debug('Init SharedWorker')
 
-        const workerInst = new SharedWorker(
-          new URL('./shared-worker.ts', import.meta.url),
-          {
-            name: 'dataproxy-worker'
-          }
-        )
-
-        const obj = Comlink.wrap<DataProxyWorker>(workerInst.port)
-
-        log.debug('Provide CozyClient data to SharedWorker')
+        let obj: Comlink.Remote<DataProxyWorker>
+        let useRemoteData: boolean = false
+        try {
+          const workerInst = new SharedWorker(
+            new URL('./worker.ts', import.meta.url),
+            {
+              name: 'dataproxy-worker'
+            }
+          )
+          obj = Comlink.wrap<DataProxyWorker>(workerInst.port)
+        } catch (e) {
+          // SharedWorker is not available in all contexts, e.g. old desktop browsers
+          // or some mobile browsers. So we fallback to web worker and ask the dataproxy
+          // to use remote data rather than local.
+          log.warn('SharedWorker is not available. Falling back to web Worker')
+          const workerInst = new Worker(
+            new URL('./worker.ts', import.meta.url),
+            {
+              name: 'dataproxy-worker'
+            }
+          )
+          obj = Comlink.wrap<DataProxyWorker>(workerInst)
+          useRemoteData = true
+        }
+
+        log.debug('Provide CozyClient data to Worker')
         const { uri, token } = client.getStackClient()
 
         await obj.setup({
           uri,
           token: token.token,
           instanceOptions: client.instanceOptions,
-          capabilities: client.capabilities
+          capabilities: client.capabilities,
+          useRemoteData
         })
         setWorker(() => obj)
       }

src/dataproxy/worker/shared-worker.ts → src/dataproxy/worker/worker.ts

@@ -36,7 +36,7 @@ import {
 import schema from '@/doctypes'
 import { getPouchLink } from '@/helpers/client'
 
-const log = Minilog('👷‍♂️ [shared-worker]')
+const log = Minilog('👷‍♂️ [DataProxy worker]')
 Minilog.enable()
 
 let client: CozyClient | undefined = undefined
@@ -111,9 +111,10 @@ const dataProxy: DataProxyWorker = {
     // So use the PouchLink only if the user declared a trustful device for the given session
     const isTrustedDevice = await queryIsTrustedDevice(client)
     // TODO: we should add the possibility to disable the pouchlink with a flag
-    const links = isTrustedDevice
-      ? [new PouchLink(pouchLinkOptions), new StackLink()]
-      : [new StackLink()]
+    const links =
+      isTrustedDevice && !clientData.useRemoteData
+        ? [new PouchLink(pouchLinkOptions), new StackLink()]
+        : [new StackLink()]
 
     await client.setLinks(links)
     client.instanceOptions = clientData.instanceOptions
@@ -214,9 +215,16 @@ const updateState = (): void => {
   broadcastChannel.postMessage(state)
 }
 
-onconnect = (e: MessageEvent): void => {
-  const port = e.ports[0]
+if (self instanceof SharedWorkerGlobalScope) {
+  onconnect = (e: MessageEvent): void => {
+    const port = e.ports[0]
 
-  Comlink.expose(dataProxy, port)
+    Comlink.expose(dataProxy, port)
+    updateState()
+  }
+} else if (self instanceof DedicatedWorkerGlobalScope) {
+  Comlink.expose(dataProxy)
   updateState()
+} else {
+  throw new Error('Worker context not available, abort.')
 }

tsconfig.json

@@ -5,7 +5,7 @@
   "compilerOptions": {
     // override from cozy-tsconfig
     "target": "ES2020",
-    "lib": ["DOM", "ES2020"],
+    "lib": ["DOM", "ES2020", "webworker"],
     "emitDeclarationOnly": false,
     "noEmit": true, // needed for swc to handle converting the TypeScript
     "moduleResolution": "bundler",