Fix up for push notifications on chrome

src/snek/static/push.js

@@ -11,44 +11,61 @@ function arrayBufferToBase64(buffer) {
 const keyResponse = await fetch('/push.json')
 const keyData = await keyResponse.json()
 
+console.log("Key data", keyData);
+
 const publicKey = Uint8Array.from(atob(keyData.publicKey), c => c.charCodeAt(0))
 
-navigator.serviceWorker
-    .register("/service-worker.js")
-    .then((serviceWorkerRegistration) => {
-        console.log(serviceWorkerRegistration);
-        serviceWorkerRegistration.pushManager.subscribe({
-            userVisibleOnly: true,
-            applicationServerKey: publicKey,
-        }).then(
-            (pushSubscription) => {
-                const subscriptionObject = {
-                    ...pushSubscription.toJSON(),
-                    encoding: PushManager.supportedContentEncodings,
-                    /* other app-specific data, such as user identity */
-                };
-                console.log(pushSubscription.endpoint, pushSubscription, pushSubscription.toJSON(), subscriptionObject);
-                // The push subscription details needed by the application
-                // server are now available, and can be sent to it using,
-                // for example, the fetch() API.
+export const registerServiceWorker = async () => {
+    navigator.serviceWorker
+        .register("/service-worker.js")
+        .then((serviceWorkerRegistration) => {
+            console.log(serviceWorkerRegistration);
+            serviceWorkerRegistration.pushManager.subscribe({
+                userVisibleOnly: true,
+                applicationServerKey: publicKey,
+            }).then(
+                (pushSubscription) => {
+                    const subscriptionObject = {
+                        ...pushSubscription.toJSON(),
+                        encoding: PushManager.supportedContentEncodings,
+                        /* other app-specific data, such as user identity */
+                    };
+                    console.log(pushSubscription.endpoint, pushSubscription, pushSubscription.toJSON(), subscriptionObject);
+                    // The push subscription details needed by the application
+                    // server are now available, and can be sent to it using,
+                    // for example, the fetch() API.
 
-                fetch('/push.json', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(subscriptionObject),
-                }).then((response) => {
-                    if (!response.ok) {
-                        throw new Error('Bad status code from server.');
-                    }
-                    return response.json();
-                }).then((responseData) => {
-                    console.log(responseData);
-                });
-            },
-            (error) => {
-                console.error(error);
-            },
-        );
+                    fetch('/push.json', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(subscriptionObject),
+                    }).then((response) => {
+                        if (!response.ok) {
+                            throw new Error('Bad status code from server.');
+                        }
+                        return response.json();
+                    }).then((responseData) => {
+                        console.log(responseData);
+                    });
+                },
+                (error) => {
+                    console.error(error);
+                },
+            );
+        });
+}
+
+window.registerServiceWorker = () => {
+    return Notification.requestPermission().then((permission) => {
+        if (permission === "granted") {
+            return registerServiceWorker();
+        } else if (permission === "denied") {
+            console.log("Permission was denied");
+        } else {
+            console.log("Permission was dismissed");
+        }
     });
+};
+registerServiceWorker().catch(console.error);

src/snek/static/service-worker.js

@@ -7,7 +7,6 @@ async function requestNotificationPermission() {
 async function subscribeUser() {
   const registration =
     await navigator.serviceWorker.register("/service-worker.js");
-
   const subscription = await registration.pushManager.subscribe({
     userVisibleOnly: true,
     applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY),
@@ -44,12 +43,15 @@ self.addEventListener("push",  (event) => {
   const message =
     data.message || "Here's something you might want to check out.";
   const icon = "images/new-notification.png";
+  console.log("showing message", title, message, icon);
 
-  event.waitUntil(self.registration.showNotification(title, {
+  const reg = self.registration.showNotification(title, {
     body: message,
     tag: "simple-push-demo-notification",
     icon,
-  }));
+  }).then(e => console.log("success", e)).catch(console.error);
+
+  event.waitUntil(reg);
 
 });
 
@@ -59,3 +61,21 @@ self.addEventListener("notificationclick", (event) => {
     event.waitUntil(clients.openWindow(
       "https://snek.molodetz.nl",));
 });
+
+self.addEventListener("notificationclose", (event) => {
+
+})
+
+self.addEventListener("fetch", (event) => {
+    // console.log("Fetch event for ", event.request.url);
+    event.respondWith(
+        caches.match(event.request).then((response) => {
+        if (response) {
+            // console.log("Found response in cache: ", response);
+            return response;
+        }
+        // console.log("No response found in cache. About to fetch from network...");
+        return fetch(event.request);
+        })
+    );
+})

src/snek/templates/app.html

@@ -41,6 +41,7 @@
       <a class="no-select" style="display:none" id="install-button" href="#">📥</a>
       <a class="no-select" href="/threads.html">👥</a>
       <a class="no-select" href="/settings/index.html">⚙️</a>
+      <a class="no-select" href="#" onclick="registerServiceWorker">✉️</a>
       <a class="no-select" href="/logout.html">🔒</a>
     </nav>
 

src/snek/view/push.py

@@ -65,7 +65,7 @@ class PushView(BaseFormView):
             print(body)
             notifications =get_notifications()
 
-            cert = base64.b64encode(
+            cert = base64.urlsafe_b64encode(
                 notifications.public_key.public_bytes(
                     encoding=serialization.Encoding.X962,
                     format=serialization.PublicFormat.UncompressedPoint