@yz-social/civildefense.io 4.5.28 → 5.0.0

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.28';
+const serviceVersion = '5.0.0';
 
 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

@@ -254,7 +254,7 @@ 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;
+    transition: opacity 0.4s;
 }
 .alert-commented {
     display: none;
@@ -627,6 +627,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/getLocation.js

@@ -7,10 +7,10 @@ import { resolve } from './dirname.js';
 const filename = './location.json';
 export const data = await import(filename, {with: { type: 'json' }})
   .catch(async error => {
-    console.log(error);
+    console.log("Unable to get location.json");
     const response = await fetch('https://ipinfo.io/json');
     const string = await response.text();
-    console.log('Estimating location as', string);
+    console.log("Estimating location as", string);
     await fs.writeFile(resolve(filename), string, 'utf8');
     return {default: JSON.parse(string)};
   });

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;