@yz-social/civildefense.io 4.5.29 → 5.0.3

package/public/service-worker.js

@@ -1,6 +1,6 @@
 const { Request, Response, URL, clients} = self;
 // Little point in trying to automatically pull this through package.json, as we need a byte change in THIS file to trigger a new worker.
-const serviceVersion = '4.5.29';
+const serviceVersion = '5.0.3';
 
 const cacheList = [ // The files we need.
   "/",
@@ -203,8 +203,46 @@ async function cacheSource(version, event) { // Cache source in the given versio
   return version;
 }
 
+const issued = new Set();
+function showNotification({lat, lng, issuedTime, hashtag, alert, body = '', force = false}) { // Promise to show a platform notification. There are two paths to here:
+  // 1. The app handles data from network connections, and determines that it should alert the user.
+  //    In this case, the app sends the data to this service worker.
+  // 2. An upstream node would like to send the data over the network, but finds that we are not connected,
+  //    and so pushes the the network envelope directly to the service worker.
+  // Abstractly, this function could be in either app or service worker, but the app might not be running
+  // in path 2, so it has to be here if we want to have the code in just one place.
+  // Any filtering (e.g., do not show notifications for one's own alerts) happens upstream of here. (We don't know the Agent.current and the sender isn't in the notification.)
+  const seenKey = alert + body;  // If we click on a notification for an off-screen alert, we may process the alert again and try to notify again.
+  if (!force && issued.has(seenKey)) return null;
+  issued.add(seenKey);
+  const base = location.href;
+  const timestamp = issuedTime;
+  const icon = new URL('./images/civil-defense-192.png', base).href;
+  const queryString = `./?tags=${encodeURIComponent(hashtag)}&lat=${lat}&lng=${lng}&alert=${alert}`;
+  const url = new URL(queryString, base).href; // For opening page when it has been closed.
+  const data = {lat, lng, url};
+  const options = {icon, timestamp, body, data, tag: alert, renotify: true};
+  console.log('showNotification', {seenKey, hashtag, options});
+  return self.registration.showNotification(hashtag, options);
+}
+
+function showNotificationFromEnvelope({deleted, message, msgId}) { // We get the generic, application-independent envelope.
+  //console.log('envelope', message, msgId);
+  if (deleted) return cancelNotification(msgId);
+  const {issuedTime, hashtag, payload, alert = msgId} = message;
+  let {lat, lng, message:body, name = ''} = payload;
+  body ||= name;
+  return showNotification({alert, lat, lng, issuedTime, hashtag, body});
+}
 
-self.addEventListener('message', async event => {
+async function cancelNotification(tag, body = '') { // Cancel those that match tag, and if body, then only those also matching body.
+  for (const notification of await self.registration.getNotifications({tag})) {
+    console.log('cancel', {tag, body, notification});
+    if (!body || (body === notification.body)) notification.close();
+  }
+}
+
+self.addEventListener('message', event => {
   const {method, params} = event.data;
   switch (method) {
   case 'version':
@@ -214,11 +252,19 @@ self.addEventListener('message', async event => {
     event.waitUntil(cacheSource(params, event)
 		    .then(version => event.source.postMessage({method: 'cached', params: version})));
     break;
+  case 'notify':
+    event.waitUntil(showNotification(params));
+    break;
+  case 'cancelNotification':
+    event.waitUntil(cancelNotification(...params));
+    break;
   default:
     console.warn(`Unrecognized service worker message: "${event.data}".`);
   }
 });
 
+self.addEventListener('push', event => event.waitUntil(showNotificationFromEnvelope(event.data.json())));
+
 self.addEventListener('notificationclick', event => {
   const {notification} = event;
   const {title, body, tag, data} = notification;
@@ -229,13 +275,12 @@ self.addEventListener('notificationclick', event => {
     clients
       .matchAll({type: 'window', includeUncontrolled: true})
       .then(async clientList => {
-	console.log('notification', {title, body, tag, data, clientList});
         for (const client of clientList) {
-	  console.log('notification click found client');
+	  console.log('notificationclick found client', notification, clientList);
 	  return client.focus().then(() => client.postMessage({method: 'go', params: {alert: tag, ...data}}));
         }
 	// Client has been closed. Open one.
-	console.log('notification click opening client', data.url);
+	console.log('notificationclick  opening client', notification);
 	return clients.openWindow(data.url);
       }),
   );

package/public/stylesheets/style.css

@@ -253,8 +253,8 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
 }
 .alert-marker {
     text-shadow: 8px -3px 10px rgb(0 0 0 / 60%);
-    animation: pulse ease 0.8s 1;
-    transition: transform 0.8s, opacity 0.4s;
+    animation: pulse08 ease 0.8s 1;
+    transition: opacity 0.4s;
 }
 .alert-commented {
     display: none;
@@ -288,7 +288,7 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
     left: -5px;
     background-image: radial-gradient(transparent 30%, var(--md-sys-color-primary), transparent 70%);
     transition: opacity 0.8s;
-    animation: pulse ease 0.8s 1;
+    animation: pulse08 ease 0.8s 1;
 }
 .aggregate.alert-pin.starting {
     font-size: 0px;
@@ -296,19 +296,43 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
 .aggregate.alert-pin.starting:after {
     opacity: 0;
 }
-@keyframes pulse {
-    0% { filter: saturate(1); }
-    25% { filter: saturate(4); }
-    50% { filter: saturate(1); }
-    75% { filter: saturate(0); }
-    100% { filter: saturate(1); }
-}
-@keyframes pulse2 { /* for restarting */
-    0% { filter: saturate(1); }
-    25% { filter: saturate(4); }
-    50% { filter: saturate(1); }
-    75% { filter: saturate(0); }
-    100% { filter: saturate(1); }
+@keyframes pulse08 {
+      0% { filter: saturate(1); background-color: rgb(189, 46, 47, 0%); border-radius: 8px; }
+     25% { filter: saturate(4); background-color: rgb(189, 46, 47, 25%); }
+     50% { filter: saturate(1); background-color: rgb(189, 46, 47, 40%); }
+     75% { filter: saturate(0); background-color: rgb(189, 46, 47, 25%); }
+    100% { filter: saturate(1);  background-color: rgb(189, 46, 47, 0%); border-radius: 8px;}
+}
+/* 0.2s               0.2s  */
+/*   <-0.8s-> <-0.8s->      */
+/*   4       4       4      */
+/* 1   1   1   1   1   1    */
+/*       0       0          */
+@keyframes pulse20 {
+      0% { filter: saturate(1); background-color: rgb(189, 46, 47, 0%); border-radius: 8px; }
+     10% { filter: saturate(4); background-color: rgb(189, 46, 47, 25%); }
+     20% { filter: saturate(1); background-color: rgb(189, 46, 47, 50%); }
+     30% { filter: saturate(0); }
+     40% { filter: saturate(1); }
+     50% { filter: saturate(4); }
+     60% { filter: saturate(1); }
+     70% { filter: saturate(0); }
+     80% { filter: saturate(1);  background-color: rgb(189, 46, 47, 50%); }
+     90% { filter: saturate(4); background-color: rgb(189, 46, 47, 25%); }
+    100% { filter: saturate(1); background-color: rgb(189, 46, 47, 0%); border-radius: 8px; }
+}
+@keyframes pulse20border {
+      0% { filter: saturate(1); background-color: rgb(189, 46, 47, 0%); border-radius: 8px; border: solid thin rgb(189, 46, 47, 0);}
+     10% { filter: saturate(4); background-color: rgb(189, 46, 47, 25%); border: solid thick rgb(189, 46, 47, 100%); }
+     20% { filter: saturate(1); background-color: rgb(189, 46, 47, 50%); }
+     30% { filter: saturate(0); }
+     40% { filter: saturate(1); }
+     50% { filter: saturate(4); }
+     60% { filter: saturate(1); }
+     70% { filter: saturate(0); }
+     80% { filter: saturate(1);  background-color: rgb(189, 46, 47, 50%); }
+     90% { filter: saturate(4); background-color: rgb(189, 46, 47, 25%); border: solid thick rgb(189, 46, 47, 100%); }
+    100% { filter: saturate(1); background-color: rgb(189, 46, 47, 0%); border-radius: 8px; border: solid thin rgb(189, 46, 47, 0); }
 }
 
 #checkForUpdates, #downloadUpdates, #updateContainer md-elevated-button {
@@ -320,7 +344,7 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
     gap: 10px;
 }
 .pub {
-    animation: pulse ease 0.8s 1;
+    animation: pulse08 ease 0.8s 1;
     --_label-text-weight: 800;
     --_selected-label-text-color: var(--md-sys-color-secondary);
     --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-secondary);
@@ -627,6 +651,15 @@ input[type="file"] {
     padding: 0;
     min-width: unset;
 }
+.pwa {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+#learnNotification:after, #learnIdentity:after {
+    content: "";
+    margin-right: 5px;
+}
 .describe {
     margin-bottom: 5px;
 }

package/server/websocket.js

@@ -5,7 +5,7 @@ import * as operator from '../public/javascripts/pubsub.js';
 const sockets = {};
 operator.setReceiver((nodeId, id, envelope) => {
   const socket = sockets[nodeId];
-  socket?.send(JSON.stringify([id, envelope]));
+  socket.send(JSON.stringify([id, envelope])); // We want an error if socket is gone, closed, etc.
 });
 
 function heartbeat() {
@@ -20,9 +20,13 @@ export function configureWebsocket(server) {
     sockets[nodeTag] = ws;
 
     ws.on('message', async message => {
-      const [id, methodName, ...rest] = JSON.parse(message);
-      const result = await operator[methodName](...rest);
-      if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify([id, result]));
+      try {
+	const [id, methodName, ...rest] = JSON.parse(message);
+	const result = await operator[methodName](...rest);
+	if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify([id, result]));
+      } catch (error) {
+	console.error(`Incomming ${error.message}: ${message}\n${error.stack}`);
+      }
     });
 
     ws.isAlive = true;
@@ -38,7 +42,10 @@ export function configureWebsocket(server) {
 
   const interval = setInterval(function ping() { // Keep-alive ping/pong on interval
     wss.clients.forEach(function each(ws) {
-      if (!ws.isAlive) return ws.terminate();
+      if (!ws.isAlive) {
+	console.log('heartbeat failure');
+	return ws.terminate();
+      }
       if (ws.readyState == WebSocket.OPEN) {
 	ws.isAlive = false;
 	ws.ping();