sw loading

packages/app/src/Pages/ErrorPage.tsx

@@ -10,7 +10,7 @@ const ErrorPage = () => {
   return (
     <div className="main-content page">
       <h4>
-        <FormattedMessage defaultMessage="An error has occured!" />
+        <FormattedMessage defaultMessage="An error has occured!" id="error.title" />
       </h4>
       <AsyncButton
         onClick={async () => {
@@ -18,7 +18,7 @@ const ErrorPage = () => {
           globalThis.localStorage.clear();
           globalThis.location.href = "/";
         }}>
-        <FormattedMessage defaultMessage="Clear cache and reload" />
+        <FormattedMessage defaultMessage="Clear cache and reload" id="error.clear-cache" />
       </AsyncButton>
       {
         <pre>

packages/app/src/index.tsx

@@ -21,7 +21,7 @@ import {
   encodeTLVEntries,
   socialGraphInstance,
 } from "@snort/system";
-import PowWorkerURL from '@snort/system/dist/pow-worker.js?worker&url';
+import PowWorkerURL from '@snort/system/src/pow-worker.ts?worker&url';
 import { SnortContext } from "@snort/system-react";
 import { removeUndefined, throwIfOffline } from "@snort/shared";
 

packages/app/src/serviceWorkerRegistration.ts

@@ -1,36 +1,40 @@
+// Import the service worker with Vite's special syntax
+import ServiceWorkerURL from "./service-worker?worker&url";
+
 export function register() {
-  if ("serviceWorker" in navigator) {
-    window.addEventListener("load", () => {
-      registerValidSW("/service-worker.js");
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      registerValidSW(ServiceWorkerURL);
     });
   }
 }
 
 async function registerValidSW(swUrl: string) {
   try {
-    const registration = await navigator.serviceWorker.register(swUrl);
+    const registration = await navigator.serviceWorker.register(swUrl,
+      { type: 'module' });
     registration.onupdatefound = () => {
       const installingWorker = registration.installing;
       if (installingWorker == null) {
         return;
       }
       installingWorker.onstatechange = () => {
-        if (installingWorker.state === "installed") {
+        if (installingWorker.state === 'installed') {
           if (navigator.serviceWorker.controller) {
-            console.log("Service worker updated, pending reload");
+            console.log('Service worker updated, pending reload');
           } else {
-            console.log("Content is cached for offline use.");
+            console.log('Content is cached for offline use.');
           }
         }
       };
     };
   } catch (e) {
-    console.error("Error during service worker registration:", e);
+    console.error('Error during service worker registration:', e);
   }
 }
 
 export async function unregister() {
-  if ("serviceWorker" in navigator) {
+  if ('serviceWorker' in navigator) {
     const registration = await navigator.serviceWorker.ready;
     await registration.unregister();
   }

packages/system/src/pow.ts

@@ -16,9 +16,10 @@ export class PowWorker implements PowMiner {
   #worker: Worker;
   #queue: Map<string, PowQueue> = new Map();
 
-  constructor(script: string) {
-    this.#worker = new Worker(script, {
-      name: "POW",
+  constructor(workerPath: string) {
+    this.#worker = new Worker(new URL(workerPath, import.meta.url), {
+      type: 'module',
+      name: 'POW',
     });
     this.#worker.onerror = ev => {
       console.error(ev);