PWA installability + working service worker (wishlist #8)

manifest.webmanifest with the existing icons, apple-touch-icon, and SW
registration at startup. The old sw.js was a self-unregistering cleanup
stub — meaning serviceWorker.ready never resolved and web push has been
silently dead; the new worker handles push display and notification
clicks, and makes the app installable.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Carlos Escalante
2026-06-12 18:07:02 -06:00
parent c3c14f54c5
commit fc3461c377
4 changed files with 78 additions and 2 deletions

View File

@@ -12,6 +12,8 @@
<meta name="description" content="WealthySmart — Smart personal finance management" />
<meta name="theme-color" content="#0f172a" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="apple-touch-icon" href="/icons/icon-192.png" />
<title>WealthySmart</title>
</head>
<body>

View File

@@ -0,0 +1,29 @@
{
"name": "WealthySmart",
"short_name": "WealthySmart",
"description": "Smart personal finance management",
"start_url": "/",
"scope": "/",
"display": "standalone",
"background_color": "#0f172a",
"theme_color": "#0f172a",
"lang": "es-CR",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}

View File

@@ -1,4 +1,42 @@
/* WealthySmart service worker: web push + PWA installability.
* (Replaces the old self-unregistering cleanup stub, which also meant
* `navigator.serviceWorker.ready` never resolved and push silently no-oped.) */
self.addEventListener("install", () => self.skipWaiting());
self.addEventListener("activate", async () => {
await self.registration.unregister();
self.addEventListener("activate", (event) => {
event.waitUntil(self.clients.claim());
});
self.addEventListener("push", (event) => {
let data = { title: "WealthySmart", body: "", url: "/" };
try {
data = { ...data, ...event.data.json() };
} catch {
if (event.data) data.body = event.data.text();
}
event.waitUntil(
self.registration.showNotification(data.title, {
body: data.body,
icon: "/icons/icon-192.png",
badge: "/icons/icon-192.png",
data: { url: data.url },
}),
);
});
self.addEventListener("notificationclick", (event) => {
event.notification.close();
const url = event.notification.data?.url || "/";
event.waitUntil(
self.clients.matchAll({ type: "window", includeUncontrolled: true }).then((clients) => {
for (const client of clients) {
if ("focus" in client) {
client.navigate(url);
return client.focus();
}
}
return self.clients.openWindow(url);
}),
);
});

View File

@@ -3,6 +3,13 @@ import { createRoot } from "react-dom/client";
import App from "./App";
import "./index.css";
if ("serviceWorker" in navigator) {
// Required for both web push and PWA installability.
navigator.serviceWorker.register("/sw.js").catch((err) => {
console.warn("Service worker registration failed:", err);
});
}
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />