Experiment with Push API‌ notifications and service workers.

Caddyfile

@@ -0,0 +1,9 @@
+localhost {
+    file_server browse
+
+    @websockets {
+        header Connection *Upgrade*
+        header Upgrade    websocket
+    }
+    reverse_proxy @websockets localhost:15674
+}

src/core/push_kit.js

@@ -29,6 +29,7 @@
  * - patterns-push-password containing the password of a read only user on the message queue server used to connect.
  */
 import logging from "./logging";
+import utils from "./utils";
 
 const logger = logging.getLogger("core push kit");
 
@@ -45,37 +46,51 @@ const push_kit = {
         const user_login = document.querySelector("meta[name=patterns-push-login]")?.content; // prettier-ignore
         const user_pass = document.querySelector("meta[name=patterns-push-password]")?.content; // prettier-ignore
 
-        const StompJS = await import("@stomp/stompjs");
-        const client = new StompJS.Client({
-            brokerURL: url,
-            connectHeaders: {
-                login: user_login,
-                passcode: user_pass,
-            },
-            debug: function (str) {
-                logger.debug(str);
-            },
-            reconnectDelay: 5000,
-            heartbeatIncoming: 0,
-            heartbeatOutgoing: 20000,
-        });
+        debugger;
 
-        client.onConnect = () => {
-            if (exchange) {
-                client.subscribe(
-                    `/exchange/${exchange}/${topicfilter}.#`,
-                    this.on_push_marker.bind(this)
-                );
-            }
-        };
+        const service_worker = await navigator.serviceWorker.register(
+            utils.base_url() + "../push_worker.js"
+        );
+
+        //service_worker.postMessage({
+        //    type: "initialize",
+        //    url: url,
+        //    exchange: exchange,
+        //    user_login: user_login,
+        //    user_pass: user_pass,
+        //});
+
+        // const StompJS = await import("@stomp/stompjs");
+        // const client = new StompJS.Client({
+        //     brokerURL: url,
+        //     connectHeaders: {
+        //         login: user_login,
+        //         passcode: user_pass,
+        //     },
+        //     debug: function (str) {
+        //         logger.debug(str);
+        //     },
+        //     reconnectDelay: 5000,
+        //     heartbeatIncoming: 0,
+        //     heartbeatOutgoing: 20000,
+        // });
+
+        // client.onConnect = () => {
+        //     if (exchange) {
+        //         client.subscribe(
+        //             `/exchange/${exchange}/${topicfilter}.#`,
+        //             this.on_push_marker.bind(this)
+        //         );
+        //     }
+        // };
 
-        client.onStompError = (frame) => {
-            logger.error("Broker reported error: " + frame.headers["message"]);
-            logger.debug("Additional details: " + frame.body);
-        };
+        // client.onStompError = (frame) => {
+        //     logger.error("Broker reported error: " + frame.headers["message"]);
+        //     logger.debug("Additional details: " + frame.body);
+        // };
 
-        client.activate();
-        logger.debug("StompJS push support initialised on " + url);
+        // client.activate();
+        // logger.debug("StompJS push support initialised on " + url);
     },
 
     on_push_marker(message) {

src/core/push_worker.js

@@ -0,0 +1,74 @@
+console.log("SW 1");
+
+const url = "wss://patternslib/ws";
+const exchange = "patternslib";
+const user_login = "guest";
+const user_pass = "guest";
+const topicfilter = "push_marker";
+
+const logger = console;
+
+let client;
+
+self.addEventListener("install", function (event) {
+    console.log("SW 2");
+    importScripts("stomp.umd.js");
+    console.log("SW 5");
+});
+
+self.addEventListener("activate", function (event) {
+    console.log("SW 3");
+
+    client = new self.StompJs.Client({
+        brokerURL: url,
+        connectHeaders: {
+            login: user_login,
+            passcode: user_pass,
+        },
+        debug: function (str) {
+            logger.log(str);
+        },
+        reconnectDelay: 5000,
+        heartbeatIncoming: 0,
+        heartbeatOutgoing: 20000,
+    });
+
+    client.onConnect = () => {
+        if (exchange) {
+            client.subscribe(
+                `/exchange/${exchange}/${topicfilter}.#`,
+
+                () => {
+                    console.log("ok");
+                    self.registration.showNotification("aha", { body: "ok" });
+                }
+                //this.on_push_marker.bind(this)
+            );
+        }
+    };
+
+    client.onStompError = (frame) => {
+        logger.error("Broker reported error: " + frame.headers["message"]);
+        logger.debug("Additional details: " + frame.body);
+    };
+
+    client.activate();
+    logger.debug("StompJs push support initialised on " + url);
+});
+
+self.addEventListener("message", function (event) {
+    console.log("SW 6");
+    console.log(event.data);
+});
+
+// Register event listener for the 'push' event.
+self.addEventListener("push", function (event) {
+    console.log("SW 4");
+    // Keep the service worker alive until the notification is created.
+    event.waitUntil(
+        // Show a notification with title 'ServiceWorker Cookbook' and body 'Alea iacta est'.
+        self.registration.showNotification("ServiceWorker Cookbook", {
+            body: "Alea iacta est",
+        })
+    );
+});