Switching from shared web workers (not supported by chrome on android) to "normal" web workers.

src/components/map/Gpxes.tsx

@@ -23,7 +23,9 @@ export const Gpxes: react.FC<GpxesProperties> = (props: GpxesProperties) => {
       console.log(`Gpxes, visibles: ${JSON.stringify(gpxes)}`);
       setVisibleGpxes(gpxes);
     };
-    getVisibleGpxes();
+    if (props.viewPort !== undefined) {
+      getVisibleGpxes();
+    }
   }, [
     props.viewPort?.bottomRight.x,
     props.viewPort?.bottomRight.y,

src/workers/dispatcher-main.ts

@@ -13,7 +13,7 @@ export const init = () => {
 
   console.log(`worker: ${worker}`);
 
-  worker.port.onmessage = (event: any) => {
+  worker.onmessage = (event: any) => {
     const { id, payload } = event.data;
     dispatcherQueue.queue.get(id)(null, payload);
     dispatcherQueue.queue.delete(id);
@@ -45,7 +45,7 @@ const dispatch = (
     id: dispatcherQueue.index++,
     payload: payload,
   };
-  worker.port.postMessage(message);
+  worker.postMessage(message);
 };
 
 export default dispatch;

src/workers/dispatcher-worker.ts

@@ -9,7 +9,7 @@ import {
 import { getTrk, putNewTrk } from '../db/trk';
 import { getTrkseg } from '../db/trkseg';
 
-const self = globalThis as unknown as SharedWorkerGlobalScope;
+const self = globalThis as unknown as WorkerGlobalScope;
 
 const actions = {
   initDb,
@@ -20,24 +20,20 @@ const actions = {
   getGpxesForViewport,
   getGpx,
   getTrk,
-  getTrkseg
+  getTrkseg,
 };
 
-self.onconnect = function (e) {
+onmessage = async function (e) {
-  var port = e.ports[0];
+  console.log(`Worker received ${JSON.stringify(e.data)}`);
-
+  const { id, payload } = e.data;
-  port.onmessage = async function (e) {
+  console.log(`payload.action in actions: ${payload.action in actions}`);
-    console.log(`Worker received ${JSON.stringify(e.data)}`);
+  var returnValue: any = 'unknownAction';
-    const { id, payload } = e.data;
+  if (payload.action in actions) {
-    console.log(`payload.action in actions: ${payload.action in actions}`);
+    returnValue = await actions[<keyof typeof actions>payload.action](
-    var returnValue: any = 'unknownAction';
+      payload.params
-    if (payload.action in actions) {
+    );
-      returnValue = await actions[<keyof typeof actions>payload.action](
+  }
-        payload.params
+  postMessage({ id: id, payload: returnValue });
-      );
-    }
-    port.postMessage({ id: id, payload: returnValue });
-  };
 };
 
 export default self;

src/workers/get-worker.ts

@@ -1,4 +1,4 @@
 export const getWorker = () =>
-  new SharedWorker(new URL('./dispatcher-worker', import.meta.url));
+  new Worker(new URL('./dispatcher-worker', import.meta.url));
 
 export default getWorker;