src/snek/static/push.js

@@ -11,8 +11,11 @@ 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))
 
+export const registerServiceWorker = async () => {
     navigator.serviceWorker
         .register("/service-worker.js")
         .then((serviceWorkerRegistration) => {
@@ -52,3 +55,17 @@ navigator.serviceWorker
                 },
             );
         });
+}
+
+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