WIP: service worker

Author: benthecarman

package.json

@@ -48,14 +48,14 @@
         "@capacitor/clipboard": "^5.0.6",
         "@capacitor/core": "^5.2.2",
         "@capacitor/filesystem": "^5.1.4",
-        "@capacitor/share": "^5.0.6",
         "@capacitor/haptics": "^5.0.6",
+        "@capacitor/share": "^5.0.6",
         "@capacitor/toast": "^5.0.6",
         "@kobalte/core": "^0.9.8",
         "@kobalte/tailwindcss": "^0.5.0",
         "@modular-forms/solid": "^0.18.1",
         "@mutinywallet/barcode-scanner": "5.0.0-beta.3",
-        "@mutinywallet/mutiny-wasm": "0.4.25",
+        "@mutinywallet/mutiny-wasm": "^0.4.25",
         "@mutinywallet/waila-wasm": "^0.2.1",
         "@nostr-dev-kit/ndk": "^0.8.11",
         "@solid-primitives/upload": "^0.0.111",

pnpm-lock.yaml

@@ -0,0 +1,48 @@
+// /// <reference lib="WebWorker" />
+// /// <reference types="vite/client" />
+//
+// import initMutinyWallet, { MutinyWallet } from "@mutinywallet/mutiny-wasm";
+//
+// // SERVICE WORKER SETUP STUFF
+// declare let self: ServiceWorkerGlobalScope
+//
+// const entries = self.__WB_MANIFEST
+//
+// if (import.meta.env.DEV)
+//     entries.push({ url: '/', revision: Math.random().toString() })
+//
+// // allow only fallback in dev: we don't want to cache anything
+// let allowlist: undefined | RegExp[]
+// if (import.meta.env.DEV)
+//     allowlist = [/^\/$/]
+//
+// // deny api and server page calls
+// let denylist: undefined | RegExp[]
+// if (import.meta.env.PROD) {
+//     denylist = [
+//         /^\/sw.js$/,
+//         // exclude webmanifest: has its own cache
+//         /^\/manifest-(.*).webmanifest$/,
+//     ]
+// }
+//
+//
+// ACTUAL LOGIC
+console.log("hello from the service worker?")
+
+self.addEventListener('push', (event) => {
+    console.log("push event", event)
+    if (!(self.Notification && self.Notification.permission === "granted")) {
+        return;
+    }
+
+    const data = event.data?.json() ?? {};
+    const options = {
+        body: data.body,
+        icon: data.icon,
+        badge: data.badge
+    };
+    event.waitUntil(
+        self.registration.showNotification(data.title, options)
+    );
+});

public/sw.ts

@@ -1,17 +1,59 @@
 import { Button, InnerCard, NiceP, VStack } from "~/components";
 import { useI18n } from "~/i18n/context";
 import { useMegaStore } from "~/state/megaStore";
+import {MutinyWallet} from "@mutinywallet/mutiny-wasm";
+
+async function subscribeUserToPush(mutinyWallet: MutinyWallet) {
+    console.log("waiting for service worker");
+    const registration = await navigator.serviceWorker.ready;
+    console.log("using push manager");
+    const subscription = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array('BJbNCspGEEdyrj4hI6DD5OBlXpEgVzfaWwZP72p0EiSUTQKXyWauOKGzi-_NWq0dT31s3r5MRPvYVeussdEBygM')
+    });
+    console.log("talking to mutiny notification service");
+    try {
+        // Send the subscription to your server
+        await mutinyWallet.register_web_push(subscription);
+        console.log("registered")
+    } catch (e) {
+        console.error(e)
+    }
+}
+
+function urlBase64ToUint8Array(base64String) {
+    const padding = '='.repeat((4 - base64String.length % 4) % 4);
+    const base64 = (base64String + padding)
+        .replace(/\-/g, '+')
+        .replace(/_/g, '/');
+    const rawData = window.atob(base64);
+    const outputArray = new Uint8Array(rawData.length);
+    for (let i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+}
+
 
 export function ResetRouter() {
     const i18n = useI18n();
     const [state, _] = useMegaStore();
 
     async function reset() {
-        try {
-            await state.mutiny_wallet?.reset_router();
-        } catch (e) {
-            console.error(e);
-        }
+        // Request notification permission from the user
+        Notification.requestPermission().then(async permission => {
+            if (permission === 'granted') {
+                console.log('Notification permission granted.');
+                if (state.mutiny_wallet) {
+                    await subscribeUserToPush(state.mutiny_wallet);
+                    console.log('subscribed.');
+                } else {
+                    console.error('no mutiny wallet');
+                }
+            } else {
+                console.error('Notification permission denied.');
+            }
+        });
     }
 
     return (

src/components/ResetRouter.tsx

@@ -235,6 +235,7 @@ export async function setupMutinyWallet(
         subscriptions,
         storage,
         scorer,
+        "http://127.0.0.1:8080",
         // Do not connect peers
         undefined,
         // Do not skip device lock

src/logic/mutinyWalletSetup.ts

@@ -23,8 +23,11 @@ import {
 import { useI18n } from "~/i18n/context";
 import { FeedbackLink } from "~/routes/Feedback";
 import { useMegaStore } from "~/state/megaStore";
+import { registerSW } from 'virtual:pwa-register';
 
 export default function App() {
+    registerSW({ immediate: true });
+
     const i18n = useI18n();
     const [state, _actions] = useMegaStore();
 

src/routes/index.tsx

@@ -13,9 +13,13 @@ const commitHash = process.env.VITE_COMMIT_HASH ?? child.execSync("git rev-parse
 
 const pwaOptions: Partial<VitePWAOptions> = {
     base: "/",
+    injectRegister: 'inline',
+    filename: 'sw.ts',
+    strategies: 'injectManifest',
     registerType: "autoUpdate",
     devOptions: {
-        enabled: false
+        enabled: true,
+        type: "module"
     },
     includeAssets: ["favicon.ico", "robots.txt"],
     manifest: manifest