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);
     };
+    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,13 +20,10 @@ const actions = {
   getGpxesForViewport,
   getGpx,
   getTrk,
-  getTrkseg
+  getTrkseg,
 };
 
-self.onconnect = function (e) {
+onmessage = async function (e) {
-  var port = e.ports[0];
-
-  port.onmessage = async function (e) {
   console.log(`Worker received ${JSON.stringify(e.data)}`);
   const { id, payload } = e.data;
   console.log(`payload.action in actions: ${payload.action in actions}`);
@@ -36,8 +33,7 @@ self.onconnect = function (e) {
       payload.params
     );
   }
-    port.postMessage({ id: id, payload: returnValue });
+  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;