notifications sketch

.gitignore

···
+node_modules/
+keys.json

server/index.js

···
+#!/usr/bin/env node
+
+const webpush = require('web-push');
+const fs = require('node:fs');
+const http = require('http');
+
+const getOrCreateKeys = filename => {
+  let keys;
+  try {
+    const data = fs.readFileSync(filename);
+    keys = JSON.parse(data);
+  } catch (err) {
+    if (err.code != 'ENOENT') throw err;
+    keys = webpush.generateVAPIDKeys();
+    const data = JSON.stringify(keys);
+    fs.writeFileSync(filename, data);
+  }
+  console.log(`Keys ready with pubkey: ${keys.publicKey}`);
+  return keys;
+}
+
+const getRequesBody = async req => new Promise((resolve, reject) => {
+  let body = '';
+  req.on('data', chunk => body += chunk);
+  req.on('end', () => resolve(body));
+  req.on('error', err => reject(err));
+});
+
+const handleFile = (fname, ftype) => async (req, res, replace = {}) => {
+  let content
+  try {
+    content = await fs.promises.readFile(__dirname + '/web-content/' + fname);
+    content = content.toString();
+  } catch (err) {
+    console.error(err);
+    res.writeHead(500);
+    res.end('Internal server error');
+    return;
+  }
+  res.setHeader('Content-Type', ftype);
+  res.writeHead(200);
+  for (let k in replace) {
+    content = content.replace(k, JSON.stringify(replace[k]));
+  }
+  res.end(content);
+}
+const handleIndex = handleFile('index.html', 'text/html');
+const handleServiceWorker = handleFile('service-worker.js', 'application/javascript');
+
+const handleSubscribe = async (req, res) => {
+  const body = await getRequesBody(req);
+  console.log('got body', body);
+  doStuff(JSON.parse(body));
+  res.setHeader('Content-Type', 'application/json');
+  res.writeHead(201);
+  res.end('{"oh": "hi"}');
+}
+
+const doStuff = sub => {
+  let n = 0;
+  setInterval(() => {
+    webpush.sendNotification(sub, `oh hi: ${n}`);
+    n += 1;
+  }, 2000);
+}
+
+const requestListener = pubkey => (req, res) => {
+  if (req.method === 'GET' && req.url === '/')
+    return handleIndex(req, res, { PUBKEY: pubkey });
+
+  if (req.method === 'GET' && req.url === '/service-worker.js')
+    return handleServiceWorker(req, res, { PUBKEY: pubkey });
+
+  if (req.method === 'POST' && req.url === '/subscribe')
+    return handleSubscribe(req, res);
+
+  res.writeHead(200);
+  res.end('sup');
+}
+
+const main = env => {
+  if (!env.KEY_FILE) throw new Error('KEY_FILE is required to run');
+  const keys = getOrCreateKeys(env.KEY_FILE);
+  webpush.setVapidDetails(
+    'mailto:[e-mail]',
+    keys.publicKey,
+    keys.privateKey,
+  );
+
+  const host = env.HOST || 'localhost';
+  const port = parseInt(env.PORT || 8000, 10);
+
+  http
+    .createServer(requestListener(keys.publicKey))
+    .listen(port, host, () => console.log(`listening at http://${host}:${port}`));
+};
+
+main(process.env);

server/package-lock.json

···
+{
+  "name": "server",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "web-push": "^3.6.7"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
+      "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "license": "MIT",
+      "dependencies": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "node_modules/bn.js": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.2.tgz",
+      "integrity": "sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw==",
+      "license": "MIT"
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/http_ece": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http_ece/-/http_ece-1.2.0.tgz",
+      "integrity": "sha512-JrF8SSLVmcvc5NducxgyOrKXe3EsyHMgBFgSaIUGmArKe+rwr0uphRkRXvwiom3I+fpIfoItveHrfudL8/rxuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
+      "integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^2.0.0",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "license": "ISC"
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/web-push": {
+      "version": "3.6.7",
+      "resolved": "https://registry.npmjs.org/web-push/-/web-push-3.6.7.tgz",
+      "integrity": "sha512-OpiIUe8cuGjrj3mMBFWY+e4MMIkW3SVT+7vEIjvD9kejGUypv8GPDf84JdPWskK8zMRIJ6xYGm+Kxr8YkPyA0A==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "asn1.js": "^5.3.0",
+        "http_ece": "1.2.0",
+        "https-proxy-agent": "^7.0.0",
+        "jws": "^4.0.0",
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "web-push": "src/cli.js"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    }
+  }
+}

server/package.json

···
+{
+  "dependencies": {
+    "web-push": "^3.6.7"
+  }
+}

server/web-content/index.html

···
+<!doctype html>
+<style>
+#error-message {
+  color: tomato;
+}
+</style>
+
+hiiiiii
+
+<button id="subscribe">subscribe</button>
+
+<p id="error-message"></p>
+
+
+<script>
+const err = m => {
+  document.getElementById('error-message').textContent = m;
+  throw new Error(m);
+};
+
+if (!('serviceWorker' in navigator)) err('service worker not supported');
+
+if (!('PushManager' in window)) err('push not supported');
+
+function urlBase64ToUint8Array(base64String) {
+    var padding = '='.repeat((4 - base64String.length % 4) % 4);
+    var base64 = (base64String + padding)
+        .replace(/\-/g, '+')
+        .replace(/_/g, '/');
+
+    var rawData = window.atob(base64);
+    var outputArray = new Uint8Array(rawData.length);
+
+    for (var i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+}
+
+function registerServiceWorker() {
+  return navigator.serviceWorker
+    .register('/service-worker.js')
+    .then(function (registration) {
+      console.log('Service worker successfully registered.');
+      return registration;
+    })
+    .catch(function (err) {
+      console.error('Unable to register service worker.', err);
+    });
+}
+
+function askPermission() {
+  return new Promise(function (resolve, reject) {
+    const permissionResult = Notification.requestPermission(function (result) {
+      resolve(result);
+    });
+
+    if (permissionResult) {
+      permissionResult.then(resolve, reject);
+    }
+  }).then(function (permissionResult) {
+    if (permissionResult !== 'granted') {
+      throw new Error("We weren't granted permission.");
+    }
+  });
+}
+
+function subscribeUserToPush() {
+  return navigator.serviceWorker
+    .register('/service-worker.js')
+    .then(function (registration) {
+      const subscribeOptions = {
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(PUBKEY),
+      };
+
+      return registration.pushManager.subscribe(subscribeOptions);
+    })
+    .then(function (pushSubscription) {
+      console.log(
+        'Received PushSubscription: ',
+        JSON.stringify(pushSubscription),
+      );
+      return pushSubscription;
+    });
+}
+
+document.getElementById('subscribe').addEventListener('click', async () => {
+  const perm = await askPermission();
+  console.log({ perm });
+  const sub = await subscribeUserToPush();
+  console.log({ sub });
+  const res = await fetch('/subscribe', {
+    method: 'POST',
+    body: JSON.stringify(sub),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  console.log('res', res);
+});
+
+</script>

server/web-content/service-worker.js

···
+console.log('hello????');
+
+function urlBase64ToUint8Array(base64String) {
+    var padding = '='.repeat((4 - base64String.length % 4) % 4);
+    var base64 = (base64String + padding)
+        .replace(/\-/g, '+')
+        .replace(/_/g, '/');
+
+    var rawData = window.atob(base64);
+    var outputArray = new Uint8Array(rawData.length);
+
+    for (var i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+}
+
+self.addEventListener('push', function(event) {
+  console.log('Received a push message', event);
+
+  // Display notification or handle data
+  // Example: show a notification
+  const title = 'New Notification';
+  const body = event.data.text();
+  const icon = '/images/icon.png';
+  const tag = 'simple-push-demo-notification-tag';
+
+  event.waitUntil(
+    self.registration.showNotification(title, {
+      body: body,
+      icon: icon,
+      tag: tag
+    })
+  );
+
+  // Attempt to resubscribe after receiving a notification
+  event.waitUntil(resubscribeToPush());
+});
+
+function resubscribeToPush() {
+  return self.registration.pushManager.getSubscription()
+    .then(function(subscription) {
+      if (subscription) {
+        return subscription.unsubscribe();
+      }
+    })
+    .then(function() {
+      return self.registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(PUBKEY)
+      });
+    })
+    .then(function(subscription) {
+      console.log('Resubscribed to push notifications:', subscription);
+      // Optionally, send new subscription details to your server
+    })
+    .catch(function(error) {
+      console.error('Failed to resubscribe:', error);
+    });
+}