Changeset 053bf51 in Klonkt

Timestamp:

07/22/2026 07:12:11 AM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

8240e80

Parents:

ad10715

git-author:

Robin <roboburr@…> (07/22/2026 07:05:42 AM)

git-committer:

Robin <roboburr@…> (07/22/2026 07:12:11 AM)

Message:

Feature: web push slice 2, enable/disable UI + service worker delivery

The visible half of docs/webpush-design.md: an owner can now turn on
notifications per device, pick what to be notified about, and send a test.

• Routes: GET /push/vapid (the public key, public by design), POST /push/subscribe|/unsubscribe|/alerts|/test (logged-in; a subscription row is personal, only its creator may touch it). Mounted before the /:slug catch-all, like /paid.
• Service worker: push handler (shows the encrypted JSON payload {type,title,body,url}; same-type bursts collapse via tag) and notificationclick (focus an open tab and navigate, else open a window). Cache name bumped to v19.
• Beheer -> Notificaties (/admin/push): per-device toggle, alert-type checkboxes (saved prefs shown for the current device), test button, linked-devices list with remove, iOS install hint (push needs an installed PWA there), plain <script> so injectCspNonce provides the real nonce.
• Not premium-gated: notifications are infrastructure, not an extra.

Verified live on a dev server: /push/vapid serves the generated key,
storage/.vapid is 0600, sw.js carries both handlers, and an unauthenticated
subscribe is refused.

Changed files:
src/server.js

• mount /push + /admin/push; sw.js push/notificationclick handlers, v19

src/views/pages/admin.ejs

• "Notificaties" button (always visible, not premium)

New file:
src/routes/push.js

• vapid/subscribe/unsubscribe/alerts/test

src/routes/admin-push.js

• the Beheer page (requireSiteManager)

src/views/pages/admin-push.ejs

• device toggle, prefs, test, device list, iOS hint

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

Location:

src

Files:

• routes/admin-push.js (added)
• routes/push.js (added)
• server.js (modified) (5 diffs)
• views/pages/admin-push.ejs (added)
• views/pages/admin.ejs (modified) (1 diff)

src/server.js

@@ -47 +47 @@
 import adminStatsRoutes from './routes/admin-stats.js';
 import adminPaidRoutes from './routes/admin-paid.js';
+import adminPushRoutes from './routes/admin-push.js';
+import pushRoutes from './routes/push.js';
 import adminMediaRoutes from './routes/admin-media.js';
 import circleRoutes from './routes/circle.js';
@@ -381 +383 @@
 app.use('/admin/stats', adminStatsRoutes);
 app.use('/admin/paid', adminPaidRoutes);
+app.use('/admin/push', adminPushRoutes);
 app.use('/admin/newsletter', adminNewsletterRoutes);
 app.use('/admin/shows', adminShowsRoutes);
@@ -402 +405 @@
 app.use('/', langRoutes); // /lang/:code — interface-taal kiezen (vóór de catch-all)
 app.use('/paid', paidRoutes);   // paid-posts patron/passkey flow (before the /:slug catch-all)
+app.use('/push', pushRoutes);   // web-push subscribe/test (before the /:slug catch-all)
 app.use('/', postsRoutes);
 
@@ -478 +482 @@
   res.set('Cache-Control', 'no-cache');
   res.send(`
-const CACHE_VERSION = 'pcms-v18-' + new Date().toISOString().split('T')[0];
+const CACHE_VERSION = 'pcms-v19-' + new Date().toISOString().split('T')[0];
 self.addEventListener('install', e => {
   e.waitUntil(caches.open(CACHE_VERSION).then(c => c.addAll(['/'])));
@@ -522 +526 @@
   );
 });
+// Web push (docs/webpush-design.md): payload is JSON {type,title,body,url},
+// encrypted end-to-end to this browser (RFC 8291). Show it; click opens url.
+self.addEventListener('push', e => {
+  let d = {};
+  try { d = e.data ? e.data.json() : {}; } catch (err) { /* non-JSON push */ }
+  const title = d.title || 'Klonkt';
+  e.waitUntil(self.registration.showNotification(title, {
+    body: d.body || '',
+    icon: '/favicon.svg',
+    badge: '/favicon.svg',
+    tag: d.type ? ('klonkt-' + d.type) : undefined,   // collapse same-type bursts
+    data: { url: d.url || '/' },
+  }));
+});
+self.addEventListener('notificationclick', e => {
+  e.notification.close();
+  const url = (e.notification.data && e.notification.data.url) || '/';
+  e.waitUntil(clients.matchAll({ type: 'window', includeUncontrolled: true }).then(list => {
+    for (const c of list) {
+      if (new URL(c.url).origin === self.location.origin && 'focus' in c) { c.navigate(url); return c.focus(); }
+    }
+    return clients.openWindow(url);
+  }));
+});
   `);
 });

src/views/pages/admin.ejs

@@ -55 +55 @@
     <%# Fediverse pages (News / Notifications / My replies / Blocking) are reached via the
         "Fediverse" nav button + the bell + the tabbed section — not duplicated here. %>
+    <a href="/admin/push" class="btn">Notificaties</a>
     <a href="/admin/updates" class="btn"><%= t('admin.b_updates') %></a>
     <a href="/admin/handleiding" class="btn"><%= t('admin.b_help') %></a>