2 files changed, 22 insertions, 14 deletions
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 9089c7e..841d597 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -10,7 +10,7 @@
 
   function doSubscribe() {
     navigator.serviceWorker.ready
-      .then(async(registration) => {
+      .then(async (registration) => {
         const response = await fetch("/api/vapid");
         // and if we fail to get it?
         const vapidPublicKey = await response.text();
@@ -20,8 +20,13 @@
           applicationServerKey: convertedVapidKey
         });
       }).then((subscription) => {
-        subscriptionJson = JSON.parse(JSON.stringify(subscription));
-        return fetch("/api/register", {
+        const subJson = subscription.toJSON();
+        subscriptionJson = {
+          endpoint: subJson.endpoint,
+          p256dh: subJson.keys.p256dh,
+          auth: subJson.keys.auth,
+        };
+        return fetch("/api/push", {
           method: "post",
           headers: { "Content-type": "application/json" },
           body: JSON.stringify(subscriptionJson),
@@ -34,14 +39,15 @@
       .then((registration) => {
         return registration.pushManager.getSubscription();
       }).then((subscription) => {
+        const { endpoint } = subscription.toJSON();
         return subscription.unsubscribe()
-          .then(function() {
-            subscriptionJson = null;
-            return fetch("/api/unregister", {
-              method: "post",
+          .then(() => {
+            fetch("/api/push", {
+              method: "delete",
               headers: { "Content-type": "application/json" },
-              body: JSON.stringify({ subscription })
+              body: JSON.stringify({ endpoint }),
             });
+            subscriptionJson = null;
           });
       });
   }
@@ -59,8 +65,8 @@
       method: "post",
       headers: { "Content-type": "application/json" },
       body: JSON.stringify({
-        ...subscriptionJson,
-        msg: "oople doople",
+        endpoint: subscriptionJson.endpoint,
+        msg: JSON.stringify({"msg": "oople doople"}),
       })
     });
   }
diff --git a/ui/service-worker.js b/ui/service-worker.js
index 319b251..a88c5a2 100644
--- a/ui/service-worker.js
+++ b/ui/service-worker.js
@@ -54,10 +54,12 @@ self.addEventListener('fetch', (event) => {
 });
 
 self.addEventListener('push', (event) => {
-  const payload = event.data?.text() ?? "no payload";
+  // If the data isn't json, this dies hard:
+  const payload = event.data?.json() ?? null;
   event.waitUntil(
-    self.registration.showNotification("ServiceWorker Cookbook", {
-      body: payload,
-    }),
+    // How do we control the action you get when you click the notification?
+    self.registration.showNotification(payload.title, {
+      body: payload.body
+    })
   );
 });