@yz-social/civildefense.io 4.5.29 → 5.0.3

package/public/javascripts/alert.js

@@ -1,14 +1,15 @@
 import * as L from 'leaflet';
 import { P2PWebNetwork } from './p2pWebNetwork.js';
+import { generateVapidKeys } from './browser-push.js';
 import { Int } from './translations.js';
 import { map, trackMap, showMessage } from './map.js';
-import { networkPromise, resetInactivityTimer, notificationsAllowed, tooltip, clickTip, getText, openAbout, delay, osName } from './main.js';
+import { closeAll, postServiceMessage, networkPromise, resetInactivityTimer, notificationsAllowed, tooltip, clickTip, getText, openAbout, delay, osName, lastCells } from './main.js';
 import { consume } from './display.js';
 import { Hashtags } from './hashtags.js';
 import { Agent } from './agent.js';
 import { Conversation, Reply } from './conversation.js';
 import { alertTopic, topicRegion, cellHex, topicCell, topicTag } from './versions.js';
-import { getContainingCells, getSmallestCellId, getSubdivision, findCoverCellsByMinMaxLatLng, cellContains, pointFromLatLng, cellFromCellID } from './s2.js';
+import { getContainingCells, getSmallestCellId, getSubdivision, findCoverCellsByMinMaxLatLng, cellContains, pointFromLatLng, cellFromCellID, getCellCorners } from './s2.js';
 const { localStorage, getComputedStyle, URL, URLSearchParams, domtoimage } = globalThis;
 
 
@@ -43,7 +44,7 @@ export async function share(properties) {  // Invoke platform share API on prope
     }
   }
   if (!properties.files) {
-    Alert.closePopup();
+    closeAll();
     await delay(500); // Allow popup time to close. It doesn't render well because of the web component style sheets.
     const target = document.getElementById('mapCapture'); // For capturing a screen shot.
     const icon = target.lastElementChild;
@@ -65,6 +66,7 @@ export async function share(properties) {  // Invoke platform share API on prope
 const ttl = 24 * 60 * 60e3; // 24 hours
 let openOnReceive = null;
 export function go({lat = null, lng = null, zoom = null, alert = null}) { // Go to specified location (if any) and open marker (if any).
+  closeAll();
   if (lat !== null && lng !== null) {
     lat = parseFloat(lat);
     lng = parseFloat(lng);
@@ -91,7 +93,7 @@ class AlertReply extends Reply {
     // and contents, and then have ensureContent() arrange in its delayed followup to replace the placeholder when the promise
     // resolves.
     await super.initialize(properties);
-    const {container, agent, issuedTime, payload} = properties;
+    const {container, agent, issuedTime, payload, alert} = properties;
     const {file:attachmentTopic} = payload;
     if (attachmentTopic) {
       const contact = await networkPromise;
@@ -99,13 +101,30 @@ class AlertReply extends Reply {
       const {dataURL:file, name, msgIds} = await contact.assembleChunkedDataURL(attachmentTopic);
       Object.assign(payload, {file, name, attachmentTopic, msgIds});
     }
-    container.showNotification({agent, issuedTime, body: payload.message || payload.name || payload});
+    this.showNotification();
     return this;
   }
+  get body() {
+    const {payload} = this;
+    const body = payload.message || payload.name || payload;
+    return body;
+  }
   update() { } // TODO: are we really getting multiple reply events for the same data?
+  // We coalesce notifications by tags. If we did not, it would be nice to remove the
+  // notification if the reply is deleted.
+  // Since we do coelesce, that's largely unnecessary. However, there is still the case
+  // of the poster deleting the currently last reply. It would be nice to restore the
+  // previous message in the notification body. We COULD do that in a delete() method
+  // here, but that wouldn't work in a service worker for offline notifications, as it does
+  // not have access to the list of previous messages.
+  // So... for now, we do not remove alerts at all, because in the one case that it matters,
+  // it could result in a user becoming unaware of the remaining messages.
+  showNotification({force = false} = {}) {
+    const {container, agent, issuedTime, body, alert} = this;
+    container.showNotification({agent, issuedTime, body, alert, force});
+  }
 }
 
-import { s2 } from 's2js';
 export class Alert extends Conversation { // A wrapper around L.marker
   // For each hashtag, we subscribe to a set of non-overlapping cells at varying S2 levels that cover the current map.
   // An Alert is made when a subscription handler fires, and it keeps information that is (mostly) true regardless of
@@ -150,22 +169,21 @@ export class Alert extends Conversation { // A wrapper around L.marker
       const marker = this.marker = L.marker([lat, lng], {icon, autoPan: false}).addTo(map);
       const region = P2PWebNetwork.regionCode(lat, lng);
       hashtag = Hashtags.add(hashtag); // We already have it and are subscribing, but this updates our extended form if needed.
-      super.initialize({payload, hashtag, tag, agent, lat, lng, issuedTime, originalPosting, ...rest});
+      super.initialize({payload, hashtag, tag, agent, lat, lng, region, issuedTime, originalPosting, ...rest});
       if (aggregate) {
 	// Destroy existing eventName markers and add their positions to the aggregate we are creating.
 	this.becomeAggregate(eventName);
 	this.constructor.clearEventMarkers(eventName, aggregate);
       } else {
 	this.noteEventName(eventName);
-	marker.bindPopup('', {className: 'alert'}).on('popupopen', event => this.ensureContent(event.popup));
+	marker.bindPopup('', {className: 'alert'})
+	  .on('popupopen', event => this.ensureContent(event.popup))
+	  .on('popupclose', () => this.closeTeach());
 	tooltip(marker.getElement(), Int`Show conversation for this ${hashtag} alert.`);
-	if (tag === openOnReceive) { // Bug! How can we handle URLs to an alert that has been aggregated?
+	if (tag === openOnReceive) {
 	  openOnReceive = false;
 	  this.openPopup();
 	}
-	networkPromise.then(async contact => { // Subscribe to replies to this tag, now that we have an alert for them to go to.
-	  contact.subscribe({eventName: tag, region, handler: data => this.ensure(data)});
-	});
       }
     }
     const alert = aggregate || this;
@@ -173,6 +191,17 @@ export class Alert extends Conversation { // A wrapper around L.marker
     alert.showNotification({agent, issuedTime});
     return keep;
   }
+  susbscribed = false;
+  async ensureRepliesSubscribed(unsubscribe = false) { // Listen for replies to this alert.
+    const {tag, region, aggregate, subscribed} = this;
+    console.log('subscribeReplies', {tag, region, aggregate, subscribed, unsubscribe});
+    if (aggregate) return;
+    this.subscribed = true;
+    const contact = await networkPromise;
+    if (unsubscribe) await contact.subscribe({eventName: tag, region, handler: null});
+    await contact.subscribe({eventName: tag, region, handler: data => this.ensure(data),
+			     pushData: await this.constructor.pushData});
+  }
   update({topic, ts, ...rest}) { // Called when handling an existing Conversation. super confirms that nothing immutable has changed.
     return super.update({...rest}); // topic and ts vary with level, and so must not be part of ensure/update checks.
   }
@@ -185,7 +214,9 @@ export class Alert extends Conversation { // A wrapper around L.marker
     this.clearAvatars();
     const {isAggregate, marker, tag, region} = this;
     // Unsubscribe from replies.
-    if (!isAggregate) networkPromise?.then(async contact => contact.subscribe({eventName: tag, region, handler: null}));
+    if (!isAggregate) networkPromise?.then(async contact => {
+      contact.subscribe({eventName: tag, region, handler: null});
+    });
     this.cellBorder?.removeFrom(map);
     super.destroy();
     if (markerDelayMS) {
@@ -196,40 +227,105 @@ export class Alert extends Conversation { // A wrapper around L.marker
     }
     marker.removeFrom(map);
   }
+  delete() { // If ensure gets an empty body, cancel any associated notification.
+    if (notificationsAllowed()) postServiceMessage('cancelNotification', [this.tag]);
+    return super.delete();
+  }
 
-  static subscriptionQueue = Promise.resolve(); // Serialize updates so they don't overlap each other.
-  static async updateSubscriptions({newKeys, oldKeys, throttleMS = 20} = {}) { // Update current subscriptions.
-    // A value of {} passed for oldKeys is used to start things off fresh (i.e., without supressing subscription of any carry-overs).
-    return this.subscriptionQueue = this.subscriptionQueue.then(async () => {
-      oldKeys ||= this.subscriptions;
-      newKeys ||= this.subscriptionFromMap();
+  static subscriptionQueue = []; // Queue of pending updateSubscriptions reasons.
+  static updateSubscriptions(reason = 'map') { // Update current subscriptions for the given purpose:
+    // newNode: Supply an empty oldSubscriptions.
+    // stickyChange: Make sticky subscriptions match a new state.
+    // map: Make fewest changes for new map display.
+    //
+    // The effects must be serialized, but a pending map update can always be skipped for something after it.
+    // We don't want to stack up such changes, because the update can take several seconds on a bad network, during
+    // which the user might just keep futzing with the map.
+    const queue = this.subscriptionQueue;
+    const inProgress = queue.length;
+    queue.push(reason);
+    if (!inProgress) this.updatePendingSubscriptions();
+  }
+  static async updatePendingSubscriptions() { // Process the queue.
+    const contact = await networkPromise;
+    if (!contact) {
+      console.warn("No network through which to subscribe.");
+      return null; }
 
-      if (!newKeys) return; // e.g., wacky computation. Don't change anything.
-      const contact = await networkPromise;
-      const dropped = [], added = [];
-      if (!contact) { console.warn("No network through which to subscribe."); return; } // Does this ever happen? Why?
-      this.subscriptions = newKeys; // Before subscribing.
-      const subscribe = async (eventName, handler) => {
-	if (!eventName) console.log('sub to no eventName', {oldKeys, newKeys, dropped, added, handler});
-	const region = topicRegion(eventName);
-	if (handler) Agent.current?.trackPublicChanges(region); // Background. No need to await.
-	await contact.subscribe({eventName, region, handler}).then(() => throttleMS && P2PWebNetwork.delay(throttleMS));
-      };
-      for (const key in newKeys) oldKeys.hasOwnProperty(key) || added.push(key);
-      for (const key in oldKeys) newKeys.hasOwnProperty(key) || dropped.push(key);
-      console.log('updating subscriptions', {added, dropped, newKeys, oldKeys});
-
-      // Before subscribing, as that that may bring in an alert with the same tag as one being cleared.
-      if (this.aggregateLimit) {
-	// TODO: more efficient way?
-	new Set(added.map(topicTag)).forEach(tag => {
-	  const hasTag = topicName => topicTag(topicName) === tag;
-	  this.transferOrClearEventMarkers(added.filter(hasTag), dropped.filter(hasTag), newKeys, oldKeys);
-	});
+    const queue = this.subscriptionQueue;
+    const reason = queue[0];
+    let newKeys, oldKeys;
+    if (reason === 'stickyChange') {
+      await contact.resetPersisted();
+    }
+    if (reason !== 'map') {
+      oldKeys = {};
+      // Update replies subscriptions for alerts that have already been opened.
+      for (const alert of this.items) {
+	if (alert.subscribed) await alert.ensureRepliesSubscribed(true);
       }
+    } else if (queue.length > 1) { // Skip this map and just go on to whatever is pending.
+      queue.shift();
+      return this.updatePendingSubscriptions();
+    }
+
+    // Now complete this subscription update in full, before considering any others.
+    oldKeys ||= this.subscriptions;
+    newKeys ||= this.subscriptionFromMap();
 
-      for (const key of added) await subscribe(key, data => Alert.ensure(data));
-      for (const key of dropped) await subscribe(key, null);
+    const dropped = [], added = [];
+    this.subscriptions = newKeys; // Before subscribing.
+    const subscribe = async (eventName, handler) => {
+      if (!eventName) console.log('sub to no eventName', {oldKeys, newKeys, dropped, added, handler});
+      const region = topicRegion(eventName);
+      const pushData = handler && await this.pushData;
+      if (handler) Agent.current?.trackPublicChanges(region); // Background. No need to await.
+      return contact.subscribe({eventName, region, handler, pushData, pushPersist: null});
+    };
+    for (const key in newKeys) oldKeys.hasOwnProperty(key) || added.push(key);
+    for (const key in oldKeys) newKeys.hasOwnProperty(key) || dropped.push(key);
+    console.log('updating subscriptions', {reason, added, dropped, newKeys, oldKeys});
+
+    // Before subscribing, as that that may bring in an alert with the same tag as one being cleared.
+    if (this.aggregateLimit) {
+      // TODO: more efficient way?
+      new Set(added.map(topicTag)).forEach(tag => {
+	const hasTag = topicName => topicTag(topicName) === tag;
+	this.transferOrClearEventMarkers(added.filter(hasTag), dropped.filter(hasTag), newKeys, oldKeys);
+      });
+    }
+    // Subtle: await throttle time between initiating network request, but do not wait for each request to complete before starting the next.
+    // Do wait for all to complete.
+    const throttleMS = 20;
+    const promises = [];
+    for (const key of added) {
+      promises.push(subscribe(key, data => Alert.ensure(data)));
+      if (throttleMS) await P2PWebNetwork.delay(throttleMS);
+    }
+    for (const key of dropped) {
+      promises.push(subscribe(key, null));
+      if (throttleMS) await P2PWebNetwork.delay(throttleMS);
+    }
+    contact.pushPersist();
+    await Promise.all(promises);
+    queue.shift();
+    //console.log('updated', promises.length);
+    if (queue.length) return this.updatePendingSubscriptions(); // Handle anything now pending.
+    return null;
+  }
+  static clearPushData() { // Force new push subscription when next asked. Not needed at startup, but when creating a new node.
+    this._pushData = null; // Otherwise, new subscriptions with the old data will be rejected by the service as being for an unsubscribed client.
+  }
+  static get pushData() {
+    if (!notificationsAllowed()) return null;
+    if (this._pushData) return this._pushData;
+    return this._pushData = new Promise(async resolve => {
+      const {publicKey:applicationServerKey, privateKey:applicationId} = await generateVapidKeys();
+      const registration = await navigator.serviceWorker.ready;
+      const data = await registration.pushManager.subscribe({userVisibleOnly: true, applicationServerKey});
+      const json = data.toJSON();
+      //console.log('pushData', {registration, data, json});
+      resolve({...json, applicationId, applicationServerKey});
     });
   }
 
@@ -254,15 +350,14 @@ export class Alert extends Conversation { // A wrapper around L.marker
     this.eventName = eventName;
     if (!this.isAggregate) return;
     this.cellBorder?.removeFrom(map);
-    const cell = cellFromCellID(topicCell(eventName));
-    const radiansToDegrees = 180 / Math.PI;
-    const corners = Array.from({ length: 4 }, (_, i) => {
-      const point = cell.vertex(i);
-      const latLng = s2.LatLng.fromPoint(point);
-      return [latLng.lat * radiansToDegrees, latLng.lng * radiansToDegrees];
-    });
-    const border = this.cellBorder = L.polygon(corners, {color: this.constructor.md_sys_color_secondary, fillOpacity: 0.1});
+    this.cellBorder = this.constructor.displayCell(topicCell(eventName));
+  }
+  static displayCell(cell, color = this.md_sys_color_secondary) { // And return cell for caching/removal.
+    // Draw polygon border from cell corners.
+    const corners = getCellCorners(cell);
+    const border = L.polygon(corners, {color, fillOpacity: 0.1});
     border.addTo(map);
+    return border;
   }
   static md_sys_color_secondary = '#BD2E2F';
   static forEachAlertOf(eventName, callback, alerts = this.items) { // Apply callback to each of alerts matching eventName.
@@ -394,7 +489,9 @@ export class Alert extends Conversation { // A wrapper around L.marker
 
   // We do not record exactly where you were looking across sessions, but we do record the containing level 9 cell.
   static lastLevel9Cell = null; // S2 level 9 cells average a radius of about 10km ~ 6.5 miles.
-  static subscriptionFromMap() { // Generate new subscriptions list ({eventName => count}) for current map bounds.
+  static shownCells = false; // Empty array for stashing debug polygons, else falsy.
+  static subscriptionFromMap() { // Generate new subscriptions list ({eventName => count}) for current map bounds,
+    // and additionally, a 1x1 degree box around the user's last known position, if any, regardless of map bounds.
     const center = map.getCenter();
     const bounds = map.getBounds();
     const northEast = bounds.getNorthEast();
@@ -407,7 +504,15 @@ export class Alert extends Conversation { // A wrapper around L.marker
       minLng: southWest.lng,
       maxLng: northEast.lng
     });
-    if (!newCells) return null;
+    if (!newCells) return {};
+    if (this.shownCells) { // debugging
+      this.shownCells.forEach(polygon => polygon.removeFrom(map));
+      const mapPolys = newCells.map(cell => this.displayCell(cell));
+      const geoPolys = lastCells.map(cell => this.displayCell(cell, 'blue'));
+      this.shownCells = [...mapPolys, ...geoPolys];
+    }
+    // Alert.ensure will not pub multiple markers/notifications for the same alert, but let us not double subscriptions.
+    if (lastCells) lastCells.forEach(cell => newCells.includes(cell) || newCells.push(cell));
     const newKeys = {};
     newCells.forEach(cell => Hashtags.getSubscribe().forEach(hash => { // Populate count with existing count (exctly carried over cell sizes), else 0.
       const eventName = alertTopic(cell, hash);
@@ -437,7 +542,6 @@ export class Alert extends Conversation { // A wrapper around L.marker
 			payload = {lat, lng, originalPosting}, // If payload is null (cancels tag), lat & lng are still used to generate eventNames.
 			cancel = undefined, // First unpublish the specified data, if any. Complicated default.
 			issuedTime = Date.now(), tag,
-			throttleMS = 0,
 			...rest
 		       }) {
     // We call all the publishing at once and return tag, without waiting for each to occur.
@@ -457,14 +561,14 @@ export class Alert extends Conversation { // A wrapper around L.marker
 
       const contact = await networkPromise; // subtle: The rest of this all happens synchronously, with any null payloads definitely first.
       let oldCells = null, oldHash, oldTag = null; // Recorded for logging, below.
-      let lastFillIn;
+      let lastFillIn = {lat, lng, hashtag, issuedTime};
       if (payload) {
-	lastFillIn = {lat, lng, hashtag, issuedTime};
 	this.lastPublished.push(lastFillIn); // Capture the added data.
 	const periodStart = Date.now() - (this.maxPublish * 60e3); // maxPublish minutes ago.
 	this.lastPublished = this.lastPublished.filter(past => past.issuedTime >= periodStart);
 	if (cancel === undefined && this.lastPublished.length > this.maxPublish) { // Unless specified otherwise, cancel oldest over maxPublish.
-	  showMessage(Int`Too many posts. (5 allowed every 5 minutes.) Removing oldest from this period.`, 'instructions');
+	  setTimeout(() => showMessage(Int`Too many posts. (5 allowed every 5 minutes.) Removing oldest from this period.`),
+		     3e3); // If immediate, it will get covered by instructions on the new alert.
 	  cancel = this.lastPublished.shift();
 	}
       }
@@ -473,36 +577,15 @@ export class Alert extends Conversation { // A wrapper around L.marker
 	oldCells = getContainingCells(lat, lng);
 	oldHash = hashtag; oldTag = tag;
 	const region = P2PWebNetwork.regionCode(lat, lng);
-	for (const cell of oldCells) {
-	  const eventName = alertTopic(cell, hashtag);
-	  // Note: we cannot unpublish replies by others, but they expire after a while anyway.
-	  await contact.publish({eventName, region, killTag: tag, payload: null});
-	  throttleMS && await P2PWebNetwork.delay(throttleMS);
-	}
+	await Promise.all(oldCells.map(cell => contact.publish({eventName: alertTopic(cell, hashtag), region, killTag: tag, payload: null})));
       }
 
       const region = P2PWebNetwork.regionCode(lat, lng);
-      for (const eventName of eventNames) {
-	if (payload) {
-	  // The Axona message will be {hashtag, issuedTime, payload:{lat, lng, originalPosting}}
-	  // and when combined with the publisher's authorId will be unique to this user/time/hashtag,
-	  // and yet the same for each of the individual publications at the different s2 scales.
-	  const msgId = await contact.publish({eventName, region, payload, issuedTime, hashtag, ...rest});
-	  if (tag && tag !== msgId) throw new Error(`msgId is drifting: ${tag} => ${msgId}`);
-	  tag = msgId;
-	  if (lastFillIn) {
-	    lastFillIn.tag = tag;
-	    lastFillIn = null;
-	  }
-	} else {
-	  await contact.publish({eventName, region, killTag: tag, payload: null});
-	  throttleMS && await P2PWebNetwork.delay(throttleMS);
-	}
-      }
-      if (!payload) {
-	const index = this.lastPublished.findIndex(past => past.tag === tag);
-	if (index >= 0) this.lastPublished.splice(index, 1);
-      }
+      const pubs = await Promise.all(eventNames.map(eventName =>
+	contact.publish({eventName, region, killTag: tag, payload: tag ? null : payload, issuedTime, hashtag, ...rest})));
+      if (payload) tag = lastFillIn.tag = pubs[0];
+      else this.lastPublished = this.lastPublished.filter(past => past.tag !== tag);
+
       console.log('Published', {cells, n: cells.length, region, hashtag, tag, payload, oldCells, oldHash, oldTag});
       return tag;
     } finally {
@@ -516,10 +599,11 @@ export class Alert extends Conversation { // A wrapper around L.marker
   
   static noMessage = Int`No additional information.`;
   static closePopup() { // Close any open popup.
-    map.closePopup();
+    map?.closePopup();
     Hashtags.closeSelector();
   }
-  static openPopup(alertTag) { // Open the marker specified by tag.
+  static async openPopup(alertTag) { // Open the marker specified by tag.
+    await networkPromise;
     const wrapper = this.getItem(alertTag);
     wrapper?.openPopup() || (openOnReceive = alertTag);
   }
@@ -561,10 +645,12 @@ export class Alert extends Conversation { // A wrapper around L.marker
   }
 
   needsRedisplay = true;
-  ensureContent(popup = this.marker.getPopup()) { // Set content and handlers in popup if/as needed.
+  async ensureContent(popup = this.marker.getPopup()) { // Set content and handlers in popup if/as needed.
+    resetInactivityTimer();
     if (!popup) return;
     if (!popup.isOpen()) return;
     this.logAlert();
+    if (!this.subscribed) await this.ensureRepliesSubscribed();
     if (!this.needsRedisplay) {
       this.initializeHandlers(popup);
       return;
@@ -575,18 +661,27 @@ export class Alert extends Conversation { // A wrapper around L.marker
     let content = this.formatAttribution({agent, issuedTime, originalPosting, hashtag});
     content += this.formatReplies();
     popup.setContent(content);
-    delay(100).then(() => {
-      this.marker.getPopup().update();
+    const onFirstNewPopup = () => {
+      const popup = this.marker.getPopup();
+      if (!popup) delay(50).then(onFirstNewPopup);
+      popup.update();
       this.initializeHandlers(popup);
       this.teach('firstConversation');
       if (Agent.isMine(this.agent)) this.teach('firstPublish');
-    });
+    };
+    onFirstNewPopup();
   }
   teach(classname) {
     if (localStorage.getItem(classname)) return;
     localStorage.setItem(classname, '1');
     document.body.classList.toggle(classname, true);
+    document.querySelectorAll('.teach').forEach(element => element.onclick = () => this.closeTeach());
+  }
+  closeTeach() { // All of them.
+    document.body.classList.toggle('firstConversation', false);
+    document.body.classList.toggle('firstPublish', false);
   }
+
   clearAvatars(popup = this.marker?.getPopup()) {
     popup?.getElement()?.querySelectorAll('.correspondent[data-tag]')
       .forEach(element => Agent.ensure({tag: element.dataset.tag}).removeElement(element, 'mixed', element.classList.contains('avatar') ? 'avatar' : 'handle'));
@@ -614,10 +709,10 @@ export class Alert extends Conversation { // A wrapper around L.marker
       filenameDisplay.textContent = fileChooser.files.length ? (fileChooser.files[0].name || 'camera') : '';
     };
     this.initChangeHashtag(popupElement);
+    const region = this.region;
     for (const correspondent of popupElement.querySelectorAll('.correspondent')) {
       const tag = correspondent.dataset.tag;
-      const region = P2PWebNetwork.regionCode(this.lat, this.lng);
-      const agent = Agent.ensure({tag, region: region});
+      const agent = Agent.ensure({tag, region});
       const isAvatar = correspondent.classList.contains('avatar');
       if (agent.addElement(correspondent, 'mixed', isAvatar ? 'avatar' : 'handle')) {
 	const isMine = Agent.isMine(tag);
@@ -674,7 +769,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
 `;
     return `<md-outlined-button class="changeHashtag">${pubtag}</md-outlined-button>`;
   }
-  formatAttributionActions({agent, hashtag}) { // Anser div HTML containing: [deleter] sharer [hashtag]
+  formatAttributionActions({agent, hashtag}) { // Answer div HTML containing: [deleter] sharer [hashtag]
     // Where deletere appears if it our reply (no hashtag), and hashtag if present is a button if ours (and otherwise just text).
     const isOurs = agent === Agent.tag;
     const deleter = !hashtag && isOurs ? `<md-outlined-icon-button><md-icon class="material-icons">delete_forever</md-icon></md-outlined-icon-button>` : '';
@@ -728,8 +823,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
 	const ringElement = this.startFader('.alert-commented', remaining);
 	if (ringElement) {
 	  ringElement.style.display = 'block';
-	  // Restart the pulse animation by setting animationName to something it isn't.
-	  ringElement.style.animationName = ringElement.style.animationName === 'pulse2' ? 'pulse' : 'pulse2';
+	  ringElement.style.animationName = 'pulse20 ease 2s 1';
 	}
       }
     }
@@ -742,9 +836,8 @@ export class Alert extends Conversation { // A wrapper around L.marker
     event.stopPropagation();
     const button = event.target;
     const inputElement = button.parentElement;
-    let payload = inputElement.value.trim();
-    const {tag, hashtag, lat, lng} = this;
-    const region = P2PWebNetwork.regionCode(lat, lng);
+    const {tag, hashtag, lat, lng, region} = this;
+    let payload = {message: inputElement.value.trim(), lat, lng};
     const files = inputElement.parentElement.querySelector('input[type="file"]').files;
     if (!payload && !files.length) return;
     inputElement.value = '';
@@ -752,15 +845,17 @@ export class Alert extends Conversation { // A wrapper around L.marker
     const contact = await networkPromise;
     if (files.length) {
       const {topic:file, msgIds} = await contact.chunkifyBlob({blob: files[0], region});
-      payload = {message: payload, file};
+      payload.file = file;
     }
-    await contact.publish({eventName: tag, region, payload}); // Publish the new reply.
+    // Users won't subscribe to tag unless the alert itself has already landed, and that has lat/lng/hashtag.
+    // However, these must be included anyway in case the receiving user clicks on an out-of-band
+    // notification at a later time, without the alert being on the map at that moment.
+    await contact.publish({eventName: tag, region, payload, hashtag, alert: tag}); // Publish the new reply.
     Agent.current.persistPublicMetadata();
   }
   deleteReply(replyElement) {
     resetInactivityTimer();
-    const {lat, lng, tag} = this;
-    const region = P2PWebNetwork.regionCode(lat, lng);
+    const {lat, lng, region, tag} = this;
     const killTag = replyElement.dataset.tag;
     networkPromise.then(async contact => {
       // We won't be here unless we are the signer.
@@ -776,34 +871,23 @@ export class Alert extends Conversation { // A wrapper around L.marker
       }
     });
   }
-  showNotification({issuedTime = this.issuedTime, body = '', agent = this.agent, alert = this.tag, lat = this.lat, lng = this.lng, hashtag = this.hashtag}) {
+  showNotification({issuedTime = this.issuedTime, body = '', agent = this.agent, alert = this.tag, lat = this.lat, lng = this.lng, hashtag = this.hashtag, force = false}) {
     // Give OS notification that comes back to here, unless act is us.
     // All notifications on the same alert (e.g., the post and each reply) have the same tag, so OS can collapse them.
+    //console.log('alert showNotification', {lat, lng, hashtag, alert, agent, body, force});
     if (agent === Agent.tag || !notificationsAllowed()) return;
-    navigator.serviceWorker.ready.then(registration => {
-      const timestamp = issuedTime;
-      const icon = new URL('./images/civil-defense-192.png', location.href).href;
-      const url = getShareableURL(alert, [hashtag]).href; // For opening page when it has been closed.
-      const data = {lat, lng, url};
-      // It appears that on 8/14/26:
-      // Safari ignores tag/renotify, and ALWAYS tells the user and displays each notification separately, without consolidating by tag.
-      // Chrome ignores renotify, and ALWAYS consolidates by tag, replacing old body with new, and NEVER renotifies the user (for the same tag).
-      // So... we could get uniform behavior by skipping the tag, but for now we'll try using it as intended, in case the browsers ever start to comply.
-      const options = {icon, timestamp, tag: alert, body, data, renotify: true};
-      console.log('showNotification', hashtag, options);
-      registration.showNotification(hashtag, options);
-    });
+    postServiceMessage('notify', {lat, lng, issuedTime, hashtag, alert, body, force});
   }
   // Each reply element is a DIV.reply with data-tag and data-text attributes that are used in sharing.
   // It contains an attribution header with controls, zero or one attachments, and then the message text.
   // If present the attachment will be an A element with download attribute, surrounding either an IMG, A/V player, or an attachment icon followed by the file name.
   formatReplies() { // Answer HTML for the replies and input box.
     const { items, agent, originalPosting } = this;
-    const formatReply = ({tag, payload, ...rest}) => {
+    const formatReply = ({tag, payload, hashtag, ...rest}) => {
       const {message = payload, file, name} = payload || {}; // Message text converts recognized urls to A/V players or links.
       let text = message
-	  .replace(/https?:\/\/\S+\.(mp3|aac|ogg|oga|opus|m4a|m3u8|m3u|mpu|mpd)$/ig, url => `<audio controls src="${url}" crossorigin="anonymous"></audio>`) // show audio urls as players
-	  .replace(/https?:\/\/\S+\.(mp4|mov|webm)$/ig, url => `<video controls src="${url}" crossorigin="anonymous"></video>`) // show video urls as players
+	  .replace(/https?:\/\/\S+\.(mp3|aac|ogg|oga|opus|m4a|m3u|mpu|mpd)$/ig, url => `<audio controls src="${url}" crossorigin="anonymous"></audio>`) // show audio urls as players
+	  .replace(/https?:\/\/\S+\.(mp4|mov|webm|m3u8)$/ig, url => `<video controls src="${url}" crossorigin="anonymous"></video>`) // show video urls as players
 	  .replace(/(?<!")https?:\/\/\S+/g, url => `<a href="${url}" target="yz.sidebar">${url}</a>`); // show urls as links
       let attachment = '';
       if (file?.startsWith?.('data:image')) attachment = `<a href="${file}" download="${name}"><img class="attachment" src="${file}"></img></a>`;

package/public/javascripts/browser-push.js

@@ -0,0 +1,56 @@
+function bufferToBase64Url(buffer) { // Like it says.
+  const bytes = new Uint8Array(buffer);
+  let binary = '';
+  for (let i = 0; i < bytes.byteLength; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary)
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '');
+}
+
+// These are the keys used by sender to authenticate itself to the push service.
+// The pubkey is given by the application to the browser pushManager.subscribe() so that the push-service knows.
+// Then the entity sending the push signs the request that it makes to the push-service.
+//
+// The browser only allows ONE current subscribe in the page, with one such pubkey.
+// I.e., a page cannot have multiple subscriptions to different services simultaneously.
+//
+// In server-sovereign applications, the server makes the key pair only once (for at least the lifetime of an app version),
+// and passes the pubkey to the app.
+//
+// In our client-sovereign applications, each Axon root is essentially its own appserver in that it makes the requests
+// to the push-service. In order to have just one subscription per client, we have the client generate the keypair,
+// use the pubkey in the normal way when makeing the pushManger.subscribe() call, and pass the keys to Axon node for
+// use when pushing to this particular client. It will use other keys when pushing to other clients.
+// (The client still authenticates the pushed envelope in the normal way, just as if it had been delivered directly
+// through the connected Axona network.)
+
+export async function generateVapidKeys() {
+  // 1. Generate an ECDSA key pair on the P-256 curve
+  const keyPair = await window.crypto.subtle.generateKey(
+    {
+      name: 'ECDSA',
+      namedCurve: 'P-256',
+    },
+    true, // extractable
+    ['sign', 'verify']
+  );
+
+  // 2. Export public key in 'raw' format (65 bytes: 0x04 + 32-byte X + 32-byte Y)
+  const rawPublicKey = await window.crypto.subtle.exportKey('raw', keyPair.publicKey);
+  const publicKeyBase64Url = bufferToBase64Url(rawPublicKey);
+
+  // 3. Export private key in 'jwk' format to extract the 32-byte 'd' parameter
+  const jwkPrivateKey = await window.crypto.subtle.exportKey('jwk', keyPair.privateKey);
+  
+  // The 'd' field in JWK is base64url encoded already; decode it to bytes then re-encode safely
+  const privateKeyBytes = Uint8Array.from(atob(jwkPrivateKey.d.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0));
+  const privateKeyBase64Url = bufferToBase64Url(privateKeyBytes);
+
+  return {
+    publicKey: publicKeyBase64Url,   // 65 bytes decoded
+    privateKey: privateKeyBase64Url  // 32 bytes decoded
+  };
+}

package/public/javascripts/conversation.js

@@ -23,23 +23,26 @@ export class Tagged { // Maintains cached existence within a (possibly instance-
     }
     return this;
   }
-  destroy() { // Subclasses extend to remove UI.
+  destroy() { // Subclasses extend to remove UI. Clients may call this directly. (Compare delete.)
     // Subclass extensions of ensure may expect this answer falsy, indicating that an item was removed.
     // NOTE: Does not destroy replies, as these may have been published by others.
     this.container.removeItem(this.tag);
     return null;
   }
+  delete() { // Form of destroy called by ensure() with no payload.
+    return this.destroy(); // Hook for recognizing that an item is "un-ensured" rather than destroyed directly.
+  }
 
   static async ensureIn(data, container, kind = container.itemKind) { // update() or initialize() item and remember what those answer. (Falsy is deleted).
     const {tag, payload, ...rest} = data;
     let item = container.getItem(tag); // existing item
-    if (!payload) return item?.destroy();
+    if (!payload) return item?.delete();
 
     // update or create item.
     if (item) item = await item.update(data);
     else item = await (new kind().initialize({...data, container}));
 
-    if (!item) return container.removeItem(tag)?.destroy();
+    if (!item) return container.removeItem(tag)?.delete();
     return container.setItem(item.tag, item); // initialize() may come up with a better tag.
   }
 }