Changeset 31e63d1 in Klonkt

Timestamp:

08/07/2026 10:15:44 AM (5 weeks ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

f889429

Parents:

44c9f3f

git-author:

Robin <roboburr@…> (08/07/2026 10:15:42 AM)

git-committer:

roboburr <roboburr@…> (08/07/2026 10:15:44 AM)

Message:

Acties bovenaan, en de push wekt een openstaande pagina (Guardian PWA)

ACTIES BOVENAAN. Zwaaien en loslaten zijn de dingen die je DOET; de rest van het
ward-paneel is lezen. Wie het paneel opende om iets te doen moest eerst langs
vijf secties scrollen.

DE PUSH ALS LIVE-SIGNAAL. Op de vraag of het paneel een long-poll kon worden: dat
hoeft niet. De service worker kreeg de push al binnen en toonde de melding, maar
zei niets tegen een pagina die openstond -- die wachtte tot het volgende tikje
van 45 seconden. Nu stuurt de worker een postMessage naar elk open venster en
ververst de pagina meteen.

Waarom dit beter is dan een tweede, open verbinding: het is hetzelfde kanaal, en
dat kanaal werkt ook als de app DICHT is. Een long-poll zou alleen werken zolang
je kijkt, en dan naast een push-kanaal staan dat hetzelfde nog eens doet. Een
kanaal, twee doelen.

Het tikje blijft als vangnet -- niet elke verandering geeft een melding, en niet
iedereen heeft meldingen aanstaan -- maar tikt niet meer terwijl niemand kijkt.
Dat waren verzoeken voor een tabblad op de achtergrond. Bij terugkomen ververst
hij meteen een keer, want dan is de kans op nieuws het grootst.

Niet gedekt door de suite: dit is client-code en een inline service worker.
Nagelopen op de uitgeleverde /sw.js.

Location:

src

Files:

• assets/js/guardian.js (modified) (2 diffs)
• server.js (modified) (1 diff)

src/assets/js/guardian.js

@@ -453 +453 @@
     actRow.appendChild(rel);
     act.appendChild(actRow);
-    panel.appendChild(act);
+    // Bovenaan, niet onderaan: zwaaien en loslaten zijn de dingen die je DOET.
+    // De rest van het paneel is lezen -- instellingen, wie er nog meer op let,
+    // wat er binnenkwam. Wie het paneel opent om iets te doen hoorde eerst langs
+    // vijf secties te scrollen.
+    panel.insertBefore(act, panel.firstChild);
     return panel;
   }
@@ -706 +710 @@
 
   renderAll(); pushState(); loadFeed(); loadFollowReqs();
-  setInterval(refresh, 45000);   // live-ish while open
+
+  // De push die de melding brengt is meteen het teken dat de staat veranderd is.
+  // Daarmee hoeft er geen tweede, open verbinding bij: hetzelfde kanaal doet het
+  // werk, en het werkt ook als de app dicht is.
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.addEventListener('message', function (e) {
+      if (e.data && e.data.klonkt === 'push') refresh();
+    });
+  }
+  // Het tikje blijft als vangnet -- niet elke verandering geeft een melding, en
+  // niet iedereen heeft meldingen aanstaan. Maar niet tikken terwijl niemand
+  // kijkt: dat waren verzoeken voor een tabblad op de achtergrond. Bij terugkomen
+  // meteen een keer, want dan is de kans op nieuws het grootst.
+  setInterval(function () { if (!document.hidden) refresh(); }, 45000);
+  document.addEventListener('visibilitychange', function () { if (!document.hidden) refresh(); });
   } catch (e) {
     fatal((e && e.message) || String(e));

src/server.js

@@ -546 +546 @@
   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 || '/' },
-  }));
+  e.waitUntil(Promise.all([
+    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 || '/' },
+    }),
+    // Wek ook een pagina die al openstaat. De push IS het teken dat er iets
+    // veranderd is, dus een aparte live-verbinding ernaast zou hetzelfde nog
+    // eens doen -- en die tweede zou alleen werken zolang de app open is,
+    // terwijl dit kanaal er ook is als hij dicht is. Een kanaal, twee doelen.
+    self.clients.matchAll({ type: 'window', includeUncontrolled: true })
+      .then(list => { for (const c of list) c.postMessage({ klonkt: 'push', type: d.type || null }); })
+      .catch(() => { /* geen open venster: niets te wekken */ }),
+  ]));
 });
 self.addEventListener('notificationclick', e => {