Add a button to the client to set up a push subscription.

Once a user has set up a push subscription, the client will re-establish it as needed whenever possible, falling back to manual intervention only when it is unable to create a push subscription.

This change imposes some architectural changes to the client, though they're not huge: the `session` type now includes a body of state (`push`) whose methods also call into the Pilcrow API. Previously, calls to the API were not made within the `session` types, and were instead only made by page and layout code, but orchestrating that for the push subscription lifecycle proved too complex to deal with. This is an experimental alternative, but it might be something we explore further in the future.

1 files changed, 13 insertions, 6 deletions

diff --git a/ui/lib/session.svelte.js b/ui/lib/session.svelte.js
index c415d0c..cd41aa4 100644
--- a/ui/lib/session.svelte.js
+++ b/ui/lib/session.svelte.js
@@ -5,6 +5,7 @@ import { goto } from '$app/navigation';
 import * as api from './apiServer.js';
 import * as r from './state/remote/state.svelte.js';
 import * as l from './state/local/conversations.svelte.js';
+import * as p from './state/local/push.svelte.js';
 import { Watchdog } from './watchdog.js';
 import { DateTime } from 'luxon';
 
@@ -51,6 +52,7 @@ class Message {
 class Session {
   remote = $state();
   local = $state();
+  push = $state();
   currentUser = $derived(this.remote.currentUser);
   users = $derived(this.remote.users.all);
   messages = $derived(
@@ -62,7 +64,7 @@ class Session {
     ),
   );
 
-  static boot({ login, resume_point, heartbeat, events }) {
+  static async boot({ login, resume_point, heartbeat, events }) {
     const remote = r.State.boot({
       currentUser: login,
       resumePoint: resume_point,
@@ -70,22 +72,25 @@ class Session {
       events,
     });
     const local = l.Conversations.fromLocalStorage();
-    return new Session(remote, local);
+    const push = await p.Push.boot(events);
+    return new Session(remote, local, push);
   }
 
-  reboot({ login, resume_point, heartbeat, events }) {
+  async reboot({ login, resume_point, heartbeat, events }) {
     this.remote = r.State.boot({
       currentUser: login,
       resumePoint: resume_point,
       heartbeat,
       events,
     });
+    this.push = await p.Push.boot(events);
   }
 
-  constructor(remote, local) {
+  constructor(remote, local, push) {
     this.watchdog = new Watchdog(this.watchdogExpired.bind(this));
     this.remote = remote;
     this.local = local;
+    this.push = push;
   }
 
   begin() {
@@ -107,6 +112,7 @@ class Session {
   onMessage(message) {
     const event = JSON.parse(message.data);
     this.remote.onEvent(event);
+    this.push.onEvent(event);
     this.local.retainConversations(this.remote.conversations.all);
     this.watchdog.reset(this.heartbeatMillis());
   }
@@ -127,7 +133,7 @@ class Session {
     // which the session may have been abandoned.
     if (!this.active()) return;
 
-    this.reboot(response);
+    await this.reboot(response);
     this.begin();
   }
 }
@@ -139,6 +145,7 @@ async function bootOrNavigate(navigateTo) {
   } catch (err) {
     switch (true) {
       case err instanceof api.LoggedOut:
+        await this.push.unsubscribe();
         await navigateTo('/login');
         break;
       case err instanceof api.SetupRequired:
@@ -152,5 +159,5 @@ async function bootOrNavigate(navigateTo) {
 
 export async function boot() {
   const response = await bootOrNavigate(async (url) => redirect(307, url));
-  return Session.boot(response);
+  return await Session.boot(response);
 }