From 6bab5b4405c9adafb2ce76540595a62eea80acc0 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Fri, 7 Nov 2025 21:39:39 -0500
Subject: De minimis "send me a notification" implementation.

When a user clicks "send a test notification," Pilcrow delivers a push message (with a fixed payload) to all active subscriptions. The included client then displays this as a notification, using browser APIs to do so. This lets us verify that push notification works, end to end - and it appears to.

The API endpoint for sending a test notification is not documented. I didn't feel it prudent to extensively document an endpoint that is intended to be temporary and whose side effects are very much subject to change. However, for posterity, the endpoint is

    POST /api/push/ping

    {}

and the push message payload is

    ping

Subscriptions with permanent delivery failures are nuked when we encounter them. Subscriptions with temporary failures cause the `ping` endpoint to return an internal server error, and are not retried. We'll likely want retry logic - including retry logic to handle server restarts - for any more serious use, but for a smoke test, giving up immediately is fine.

To make the push implementation testable, `App` is now generic over it. Tests use a dummy implementation that stores sent messages in memory. This has some significant limitations, documented in the test suite, but it beats sending real notifications to nowhere in tests.
---
 .../(swatch)/.swatch/PushSubscription/+page.svelte | 79 ++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 ui/routes/(swatch)/.swatch/PushSubscription/+page.svelte

(limited to 'ui/routes/(swatch)/.swatch/PushSubscription/+page.svelte')

diff --git a/ui/routes/(swatch)/.swatch/PushSubscription/+page.svelte b/ui/routes/(swatch)/.swatch/PushSubscription/+page.svelte
new file mode 100644
index 0000000..3d564a3
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/PushSubscription/+page.svelte
@@ -0,0 +1,79 @@
+<script>
+  import { DateTime } from 'luxon';
+
+  import PushSubscription from '$lib/components/PushSubscription.svelte';
+  import { makeDeriver } from '$lib/swatch/derive.js';
+  import EventLog from '$lib/components/swatch/EventLog.svelte';
+  import EventCapture from '$lib/swatch/event-capture.svelte.js';
+  import * as json from '$lib/swatch/json.js';
+
+  function fromBase64(str) {
+    if (str.trim().length === 0) {
+      return null;
+    }
+    const bytes = Uint8Array.fromBase64(str, { alphabet: 'base64url' });
+    return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+  }
+
+  const base64Deriver = makeDeriver(fromBase64);
+
+  // This is a "real" key, but it's not a key that's in use anywhere. I generated it for this
+  // purpose. -o
+  const testVapidKey =
+    'BJXUH-WxM8BoxntTsrLufxc2Zlbwk-A1wsF01-ykUyh9pSUZG1Ymk3R-FOxJTGApQeJWIYTW9j-1sLQFIL8cGBU=';
+
+  let vapidInput = $state('');
+  let vapid = $derived(base64Deriver(vapidInput));
+
+  // See <> for schema. This is an approximation of the browser subscription object.
+  const testSubscription = json.encode({
+    endpoint: 'https://push.example.com/1234',
+    expirationTime: performance.now() + 86400 /* sec */ * 1000 /* millisec */,
+    options: {
+      userVisibleOnly: true,
+      applicationServerKey: null,
+    },
+  });
+
+  let subscriptionInput = $state('');
+  let subscription = $derived(json.decode(subscriptionInput));
+
+  let capture = $state(new EventCapture());
+  const subscribe = capture.on('subscribe');
+  const ping = capture.on('ping');
+</script>
+
+<h1><code>PushSubscription</code></h1>
+
+<nav><p><a href=".">Back to swatches</a></p></nav>
+
+<h2>properties</h2>
+
+<div class="component-properties">
+  <label>vapid key <input type="text" bind:value={vapidInput} /></label>
+  <div class="suggestion">
+    interesting values:
+    <button onclick={() => (vapidInput = '')}>(none)</button>
+    <button onclick={() => (vapidInput = testVapidKey)}>test key</button>
+  </div>
+
+  <label
+    ><p>subscription (json)</p>
+    <textarea bind:value={subscriptionInput}></textarea>
+    <div class="suggestion">
+      interesting values:
+      <button onclick={() => (subscriptionInput = '')}>(none)</button>
+      <button onclick={() => (subscriptionInput = testSubscription)}>example</button>
+    </div>
+  </label>
+</div>
+
+<h2>rendered</h2>
+
+<div class="component-preview">
+  <PushSubscription {vapid} {subscription} {subscribe} {ping} />
+</div>
+
+<h2>events</h2>
+
+<EventLog events={capture.events} clear={capture.clear.bind(capture)} />
-- 
cgit v1.2.3

