@yz-social/civildefense.io 5.0.3 → 5.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yz-social/civildefense.io",
   "description": "Browser app to safely share live sightings on a map.",
-  "version": "5.0.3",
+  "version": "5.1.1",
   "keywords": [
     "map",
     "browser",

package/public/about/en.html

@@ -110,7 +110,7 @@
   </ul>
 
   <p>
-  <a href="/?tags=%F0%9F%8E%B8%20classic%20rock,%F0%9F%8E%BC%20classical,%F0%9F%A4%A0%20country,%F0%9F%8E%B7%20jazz,%F0%9F%8E%99%EF%B8%8F%20news,%F0%9F%8E%B5%20pop&z=5&lang=en" class="launch-btn" target="civildefense">
+  <a href="/?tags=%F0%9F%94%A5%20fire&z=5&lang=en" class="launch-btn" target="civildefense">
     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
     Try it!
   </a>
@@ -168,7 +168,7 @@
   <h2 id="censorship">Resist Censorship</h2>
   <ul>
     <li>No user can be censored because there are no accounts. No one can steal your account information because there isn't any.</li>
-    <li>No content can be censored, there is no central organization who controls the network or has power to alter content.<a href="#p2p"><sup>1</sup></a></li>
+    <li>No content can be censored because there is no central organization who controls the network or has power to alter content.<a href="#p2p"><sup>1</sup></a></li>
   </ul>
 
   <h2 id="takedown">Resist Takedown</h2>

package/public/about/style.css

@@ -72,10 +72,14 @@ a:hover { color: var(--red); }
 }
 .button-img { width: 80px; }
 a > img {
-    box-shadow: 0 4px 28px rgba(255, 90, 0, 0.45);
+    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
     border-radius: 18px;
     border: solid thick var(--red);
 }
+a > img:hover {
+    transform: translateY(-2px);
+    transition: transform 0.15s;
+}
 .hero-logo {
     width: 80px;
     height: 80px;
@@ -221,6 +225,8 @@ video + .carousel-caption {
     padding: 2.5rem 1.25rem 4rem;
 }
 
+.content-wrap div.centered + p { padding-top: 2rem; }
+
 /* Section headings */
 .content-wrap h1 {
     font-family: var(--font-display);
@@ -288,9 +294,9 @@ video + .carousel-caption {
     letter-spacing: 0.08em;
     text-transform: uppercase;
     padding: 14px 38px;
-    border-radius: 4px;
+    border-radius: 18px;
     text-decoration: none;
-    box-shadow: 0 4px 28px rgba(255,90,0,0.45);
+    box-shadow: 0 8px 40px rgba(0,0,0,0.45);
     transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
 }
 .launch-btn:hover {

package/public/index.html

@@ -11,13 +11,14 @@
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:image" content="https://civildefense.io/images/hero-small.png" />
 
-    <link rel="author" href="https://yz.social/index.html" />
-    <link rel="help" href="https://yz.social/civildefense.html" />
-    <link rel="manifest" href="manifest.json" />
     <link rel="shortcut icon" href="favicon.ico" />
+    <link rel="manifest" href="manifest.json" />
+    <link rel="author" href="https://yz.social/index.html" />
+    <link rel="help" href="about/index.html" />
+    <link rel="apple-touch-icon" href="images/civil-defense-180-square.png" />
     <link rel="stylesheet" href="leaflet/leaflet.css" />
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <link rel="stylesheet" href="stylesheets/style.css" />
     <script type="importmap">
       {

package/public/javascripts/alert.js

@@ -512,7 +512,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
       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));
+    //fixme 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);

package/public/javascripts/hashtags.js

@@ -142,6 +142,116 @@ export const Hashtags = {
         <md-icon-button slot="remove-trailing-icon"><md-icon class="material-icons"></md-icon></md-icon-button>
       </md-filter-chip>`;
   },
+  sort(tags) { // Sort list of tags in place without regard to leding emoji
+    tags.sort((a, b) => stripLeadingEmoji(a).localeCompare(stripLeadingEmoji(b)));
+  },
+  resetSubscriberDisplay() { // Lay out all the hashtag chips display, including the input for adding new ones.
+    this.chipset.innerHTML = '';
+    const tags = this.getAll();
+
+    // Sort alphabetically, ignoring any leading emoji, as these have unexpected orderings.
+    this.sort(tags);
+    const reordered = {};
+    tags.forEach(tag => reordered[tag] = this.hashtags[tag]);
+    this.hashtags = reordered;
+
+    // Add a chip for each hashtag.
+    tags.forEach(label => { // Elements are displayed from the bottom up.
+      this.chipset.insertAdjacentHTML("afterbegin", this.chipHTML(label));
+    });
+    // IWBNI we just added handlers once to the chipset and relied on bubbling up, but there's something not working about that.
+    [...this.chipset.children].forEach(element => {
+      // Material design will update the displays. We have to handle the data changes.
+      element.addEventListener('remove', event => { // Clicking the button WITHIN the chip (which is the material design 'remove' event).
+	resetInactivityTimer();
+	const chip = event.target;
+	if (!chip.selected) { // 'x' icon. Not currently selected. Go ahead and remove it.
+	  showMessage(Int`Topic "${chip.label}" has been removed. You can add it back with "add topic".`, 'instructions');
+	  return this.remove(chip);
+	} // radio button icon. Chip is already selected. We are setting the publishing tag.
+	event.preventDefault();
+	showMessage(Int`Tapping the map will now produce an alert for the "${chip.label}" topic.`, 'instructions');
+	if (chip.classList.contains('pub')) return false;
+	return this.setPublish(chip.label);
+      });
+      clickTip(element, Int`Toggle whether alerts for this topic shown on the map. Separately, a radio button is shown when selected and sets this as the initial topic of the next alert you make, while an x button is shown when deselected and removes the topic.`, event => { // Toggle action on whole chip.
+	event.stopPropagation();
+	resetInactivityTimer();
+	const chip = event.target;
+	if (chip.selected) showMessage(Int`Turning "${chip.label}" alerts back on in the map.`, 'instructions');
+	else showMessage(Int`Turning off "${chip.label}" alerts in the map. You can delete the topic altogether with the X.`, 'instructions');
+	this.toggleChip(chip);
+	Alert.closePopup();
+	this.onchange({redisplaySubscribers: false});
+      });
+    });
+    this.chipset.insertAdjacentHTML("afterbegin",  // Chip to add a new hashtag.
+				    `<div class="combobox">
+  <md-filled-text-field class="newtag"
+     aria-expanded="false"
+     aria-controls="knownTagsListbox"
+     aria-autocomplete="list"
+     autocomplete="off"
+     tabindex="0"
+     placeholder="➕${Int`add topic`}"></md-filled-text-field>
+</div>`);
+    // I've tried also supplying a datalist, e.g., to supply the mobile keyboard completions, but
+    // I have not been able to get it to work.
+    this.initializeTopicInput();
+  },
+  remove(chip, redisplaySubscribers = false) { // Remove this topic, persistently.
+    delete this.hashtags[chip.label];
+    delete this.canonical2extended[canonicalTag(chip.label)];
+    this.onchange({redisplaySubscribers, resetSubscriptions: false});
+  },
+  toggleChip(chip) { // Switch whether the topic is or is not subscribed.
+    // Now selected => hashtags[label] becomes 'pub' (selected and the publisher) and clear old pub
+    // NOT now selected => hashtags[label] becomes false (through mechanism as follows)
+    //    but if publisher => set alt publisher if possible, else remember as backupPublisher
+    const label = chip.label;
+
+    // chip.selected is new state, after clicking.
+    if (chip.selected) return this.setPublish(label);  // Become publisher, clearing old publisher.
+
+    // Not selected:
+
+    // If we're not publisher, just clear. But don't go through getPublish, as that can have side effects.
+    if (this.hashtags[label] !== 'pub') return this.hashtags[label] = false;
+
+    // Also clear, but...
+    const subs = this.getSubscribe();
+    if (subs.length > 1) {  // Find and set alternative publisher if possible.
+      const pubIndex = subs.indexOf(label);
+      const index = (pubIndex + 1) % subs.length;
+      this.setPublish(subs[index]);
+    } else {
+      // No alternative available. Clear it, but remember for use by getPublish.
+      // It will stay .pub styled while toggled, until anything toggles on.
+      this.backupPublisher = label;
+    }
+    return this.hashtags[label] = false;
+  },
+  getChip(label) { // Handy for scripting, but not otherwise used in app.
+    for (const chip of this.chipset.children) {
+      if (chip.label === label) return chip;
+    }
+    return null;
+  },
+  setPublish(newTag) { // Make this topic be the one to be used when we next publish an alert.
+    // newTag will be marked for publishing (in this.hashtags and element style)
+    // Old publish tag (if any) will be set back to merely be subscribed (in same)
+    let oldTag = this.getPublish();
+    const backup = this.backupPublisher;
+    if (oldTag) this.hashtags[oldTag] = true; // true (instead of 'pub')
+    else if (backup) oldTag = backup;
+    this.backupPublisher = false;
+    this.hashtags[newTag] = 'pub';
+    for (const chip of this.chipset.children) {
+      if (chip.label === newTag) chip.classList.add('pub');
+      else if (chip.label === oldTag) chip.classList.remove('pub');
+    }
+    return oldTag;
+  },
 
   // Topic entry, with autocomplete.
   // - When you click the input box, it shows all the topics we know about.
@@ -157,6 +267,7 @@ export const Hashtags = {
   //   - otherwise => exact contents of input box is used.
   closeSelector() { // Close the autocomplete tag selector
     const { listbox, newtag } = this;
+    for (const li of listbox.children) li.classList.toggle('active', false);
     listbox.classList.toggle('hidden', true);
     newtag.setAttribute('aria-expanded', 'false');
     newtag.removeAttribute('aria-activedescendant');
@@ -189,17 +300,20 @@ export const Hashtags = {
     this.acceptTag();
   },
   acceptTag() { // Add the new hashtag.
+    console.log('acceptTag', this.newtag?.value);
     resetInactivityTimer();
     let tag = this.newtag?.value  // Get into standard form, but do not strip emoji or case into canonical yet.
 	.replace(/^#/, '')        // No leading hash
 	.replace(':', '.')        // Replace colon with some other separator.
 	.replace(/\s+/g, ' ')     // Replace multiple spaces with a single space
 	.normalize('NFD');        // Standardize different ways of making accents into decomposed form - but do not remove them.
+    console.log('tag:', tag);
     Alert.closePopup();
     if (!tag) return;
     if (this.firstEmoji(tag)) { // Possibly REPLACE existing with the new tag.
       const canonical = canonicalTag(tag);
       const existingExtended = this.canonical2extended[canonical];
+      console.log({canonical, existingExtended});
       if (existingExtended !== tag) {
 	delete this.canonical2extended[canonical];
 	delete this.hashtags[existingExtended];
@@ -207,6 +321,7 @@ export const Hashtags = {
     }
     tag = this.add(tag); // Might exist, in which case tag might now be extended.
     this.setPublish(tag);
+    console.log('onchange with', this.hashtags);
     this.onchange({highlightPublish: true});
   },
   activeIndex: -1,
@@ -241,14 +356,6 @@ export const Hashtags = {
       li.id = `tag-option-${i}`;
       li.setAttribute('role', 'option');
       li.innerHTML = this.formatPubtag(highlight(item, matchString), item);
-      li.onclick = event => {
-	// pointerdown would fire before the text field's blur event,
-	// so we would not have to delay that. But then we would not
-	// scroll properly by touch drag.
-        event.preventDefault();
-	event.stopPropagation();
-        this.selectValue(item);
-      };
       listbox.appendChild(li);
     });
     setTimeout(() => { // Needs a tick.
@@ -256,67 +363,45 @@ export const Hashtags = {
       const max = Math.max(125, width);
       newtag.style.width = max + 'px'; // Set newtag so that input box makes room for floating lis
     }, 50);
-
     this.openSelector();
   },
-  sort(tags) { // Sort list of tags in place without regard to leding emoji
-    tags.sort((a, b) => stripLeadingEmoji(a).localeCompare(stripLeadingEmoji(b)));
-  },
-  resetSubscriberDisplay() { // Lay out all the hashtag chips display, including the input for adding new ones.
-    this.chipset.innerHTML = '';
-    const tags = this.getAll();
-
-    // Sort alphabetically, ignoring any leading emoji, as these have unexpected orderings.
-    this.sort(tags);
-    const reordered = {};
-    tags.forEach(tag => reordered[tag] = this.hashtags[tag]);
-    this.hashtags = reordered;
-
-    // Add a chip for each hashtag.
-    tags.forEach(label => { // Elements are displayed from the bottom up.
-      this.chipset.insertAdjacentHTML("afterbegin", this.chipHTML(label));
-    });
-    // IWBNI we just added handlers once to the chipset and relied on bubbling up, but there's something not working about that.
-    [...this.chipset.children].forEach(element => {
-      // Material design will update the displays. We have to handle the data changes.
-      element.addEventListener('remove', event => { // Clicking the button WITHIN the chip (which is the material design 'remove' event).
-	resetInactivityTimer();
-	const chip = event.target;
-	if (!chip.selected) { // 'x' icon. Not currently selected. Go ahead and remove it.
-	  showMessage(Int`Topic "${chip.label}" has been removed. You can add it back with "add topic".`, 'instructions');
-	  return this.remove(chip);
-	} // radio button icon. Chip is already selected. We are setting the publishing tag.
-	event.preventDefault();
-	showMessage(Int`Tapping the map will now produce an alert for the "${chip.label}" topic.`, 'instructions');
-	if (chip.classList.contains('pub')) return false;
-	return this.setPublish(chip.label);
-      });
-      clickTip(element, Int`Toggle whether alerts for this topic shown on the map. Separately, a radio button is shown when selected and sets this as the initial topic of the next alert you make, while an x button is shown when deselected and removes the topic.`, event => { // Toggle action on whole chip.
-	event.stopPropagation();
-	resetInactivityTimer();
-	const chip = event.target;
-	if (chip.selected) showMessage(Int`Turning "${chip.label}" alerts back on in the map.`, 'instructions');
-	else showMessage(Int`Turning off "${chip.label}" alerts in the map. You can delete the topic altogether with the X.`, 'instructions');
-	this.toggleChip(chip);
-	Alert.closePopup();
-	this.onchange({redisplaySubscribers: false});
-      });
-    });
-    this.chipset.insertAdjacentHTML("afterbegin",  // Chip to add a new hashtag.
-				    `<div class="combobox">
-  <md-filled-text-field class="newtag"
-     aria-expanded="false"
-     aria-controls="knownTagsListbox"
-     aria-autocomplete="list"
-     autocomplete="off"
-     tabindex="0"
-     placeholder="➕${Int`add topic`}"></md-filled-text-field>
-</div>`);
-    // I've tried also supplying a datalist, e.g., to supply the mobile keyboard completions, but
-    // I have not been able to get it to work.
+  initializeTopicInput() {
+    // Getting this correct is hard.
+    // We want all of the following to be true, on ALL BROWSERS, INCLUDING MOBILE BROWSERS:
+    // 0. The UL listbox starts as display:none.
+    // 1. When the INPUT newtag is clicked, the UL and it's LI become visible.
+    // 2. When the combined height of the LI elements exceeds that of the UL, they must be scrollable.
+    // 3. When a UL > LI is visible and clicked, an action is taken in the app, and the UL becomes display:none again.
+    // 4. When the INPUT loses focus by any other action, the UL becomes display:none again without the app action.
+    // 5. When a UL > LI is visible and clicked, the map underneath does NOT receive a click.
     const newtag = this.newtag = this.chipset.querySelector('.newtag');
     const listbox = this.listbox = document.querySelector('.combobox-listbox');
+    // Specifically mousedown, not pointerdown.
+    // Stop the dropdown from stealing focus -> stops premature blur
+    // and is also what keeps the UL on top for the WHOLE mousedown->mouseup->click
+    // sequence, which is what keeps us from click through to map.
+    listbox.onmousedown = event => event.preventDefault();
+    listbox.onclick = event => {
+      const li = event.target.closest('li');
+      console.log('listbox click', li);
+      if (!li) return;
+      this.selectValue(li.textContent);
+      this.closeSelector();       // safe here — this click's path is already resolved
+    };
+    newtag.oninput = () => this.renderSelector(newtag.value);
+    newtag.onchange = () => {
+      if (this.activeIndex < 0) {
+	this.acceptTag(); // As is, not from list.
+      } else {
+        this.selectValue(this.selectors[this.activeIndex]);
+      }
+    },
+    newtag.onblur = () => {
+      console.log('input blur');
+      this.closeSelector();
+    },
     clickTip(newtag, Int`Add a new topic for which the map should show any alerts.`, event => { // Focusing "add topic".
+      console.log('input click');
       event.stopPropagation();
       Alert.closePopup();
       resetInactivityTimer();
@@ -324,7 +409,7 @@ export const Hashtags = {
       if (navigator.maxTouchPoints <= 1) { // Only when no multi-touch. On-screen keyboard makes it shoot off the top.
 	showMessage(Int`Type a new topic name to see any alerts on the map with this topic.`, 'instructions');
       }
-    });
+    }),
     newtag.onkeydown = event => {
       if (listbox.classList.contains('hidden')) return;
       const optionCount = listbox.querySelectorAll('.combobox-option').length;
@@ -332,11 +417,7 @@ export const Hashtags = {
       switch (event.key) {
       case 'Enter':
 	event.preventDefault();
-        if (this.activeIndex < 0) {
-	  this.acceptTag(); // As is, not from list.
-        } else {
-          this.selectValue(this.selectors[this.activeIndex]);
-	}
+	newtag.onchange();
         break;
 
       case 'Escape':
@@ -363,63 +444,6 @@ export const Hashtags = {
 	this.activeIndex = -1;
       }
     };
-    newtag.oninput = () => this.renderSelector(newtag.value);
-    // When we click on the listbox, the browser will first blur newtag, and then
-    // we would not get the click! So here we delay closing a bit.
-    newtag.onblur = () => setTimeout(() => this.closeSelector(), 200);
-  },
-  remove(chip, redisplaySubscribers = false) { // Remove this topic, persistently.
-    delete this.hashtags[chip.label];
-    delete this.canonical2extended[canonicalTag(chip.label)];
-    this.onchange({redisplaySubscribers, resetSubscriptions: false});
-  },
-  toggleChip(chip) { // Switch whether the topic is or is not subscribed.
-    // Now selected => hashtags[label] becomes 'pub' (selected and the publisher) and clear old pub
-    // NOT now selected => hashtags[label] becomes false (through mechanism as follows)
-    //    but if publisher => set alt publisher if possible, else remember as backupPublisher
-    const label = chip.label;
-
-    // chip.selected is new state, after clicking.
-    if (chip.selected) return this.setPublish(label);  // Become publisher, clearing old publisher.
-
-    // Not selected:
-
-    // If we're not publisher, just clear. But don't go through getPublish, as that can have side effects.
-    if (this.hashtags[label] !== 'pub') return this.hashtags[label] = false;
-
-    // Also clear, but...
-    const subs = this.getSubscribe();
-    if (subs.length > 1) {  // Find and set alternative publisher if possible.
-      const pubIndex = subs.indexOf(label);
-      const index = (pubIndex + 1) % subs.length;
-      this.setPublish(subs[index]);
-    } else {
-      // No alternative available. Clear it, but remember for use by getPublish.
-      // It will stay .pub styled while toggled, until anything toggles on.
-      this.backupPublisher = label;
-    }
-    return this.hashtags[label] = false;
-  },
-  getChip(label) { // Handy for scripting, but not otherwise used in app.
-    for (const chip of this.chipset.children) {
-      if (chip.label === label) return chip;
-    }
-    return null;
-  },
-  setPublish(newTag) { // Make this topic be the one to be used when we next publish an alert.
-    // newTag will be marked for publishing (in this.hashtags and element style)
-    // Old publish tag (if any) will be set back to merely be subscribed (in same)
-    let oldTag = this.getPublish();
-    const backup = this.backupPublisher;
-    if (oldTag) this.hashtags[oldTag] = true; // true (instead of 'pub')
-    else if (backup) oldTag = backup;
-    this.backupPublisher = false;
-    this.hashtags[newTag] = 'pub';
-    for (const chip of this.chipset.children) {
-      if (chip.label === newTag) chip.classList.add('pub');
-      else if (chip.label === oldTag) chip.classList.remove('pub');
-    }
-    return oldTag;
   }
 };
 globalThis.Hashtags = Hashtags; // for debugging

package/public/javascripts/main.js

@@ -16,24 +16,16 @@ window.P2PWebNetwork = P2PWebNetwork;
 document.getElementById('appVersion').textContent = appVersion;
 document.getElementById('kernelVersion').textContent = P2PWebNetwork.kernelVersion;
 
-const RETRY_SECONDS = 90;
-const INACTIVITY_SECONDS = 5 * 60; // five minutes
-
 export function delay(ms = 800, value = undefined) { // Promise resolves to value after specified milliseconds.
   return new Promise(resolve => setTimeout(resolve, ms, value));
 }
 
-var inactivityTimer = null, reconnectCountdown, networkPromise = null;
-export { networkPromise };
-export async function resetInactivityTimer(clearMessage = true) { // if !network, initialize(false), else disconnect after INACTIVITY_SECONDSif not restarted
+export var networkPromise = null;
+export async function resetInactivityTimer(clearMessage = true) { // if !networkPromise, initialize(false).
+  // Historically, this also managed a timer that disconnected from network after a perdiod with no activity.
   //console.log('resetInactivityTimer, networkPromise:', networkPromise);
   if (clearMessage) showMessage('');
-  clearTimeout(inactivityTimer);
-  clearInterval(reconnectCountdown);
   if (!networkPromise) return initialize(false);
-  // return inactivityTimer = setTimeout(() => {
-  //   networkPromise?.then(contact => contact.disconnect());
-  // }, INACTIVITY_SECONDS * 1e3);
 }
 
 function asElement(elementOrQuerySelector) { // Return an element - treating a string arg as a query selector, or just return the arg.
@@ -81,7 +73,7 @@ export function notificationsAllowed() { // Combined result.
   return postServiceMessage && (Notification?.permission === 'granted') && notificationsRequested();
 }
 let notificationsPreviouslyAllowed = notificationsAllowed();
-function noteNotificationPermission(permission) { // Update permission controls/text/persistence.
+function noteNotificationPermission(permission = window.Notification?.permission) { // Update permission controls/text/persistence.
   // Called when checkbox is toggled, opening dialog, or if platform happens to tell us permission was externally changed (e.g., even if dialog already open).
   if (isWebView()) {
     showNotifications.checked = false;
@@ -132,12 +124,9 @@ showNotifications.onchange = () => {
     localStorage.setItem('notificationsRequested', showNotifications.checked ? '1' : '');
     noteNotificationPermission('granted');
   } else {
-    window.Notification?.requestPermission().then(noteNotificationPermission());
+    window.Notification?.requestPermission().then(noteNotificationPermission);
   }
 };
-// Safari never fires 'change': https://webkit.org/b/259432
-navigator.permissions.query({ name: 'notifications'})
-  .then(status => status.onchange = () => noteNotificationPermission(window.Notification?.permission));
 
 export function closeAll() { // Close anything that might be open.
   closeAbout();
@@ -146,11 +135,17 @@ export function closeAll() { // Close anything that might be open.
   ['aboutContainer', 'updateContainer', 'correspondentContainer', 'qrContainer']
     .forEach(tag => document.getElementById(tag).classList.toggle('hidden', true));
 }
+let notificationPermissionInterval;
 export function openAbout(event) {
   openDisplay('aboutContainer', event);
-  noteNotificationPermission(window.Notification?.permission);
+  noteNotificationPermission();
+  // I'd rather do:
+  // navigator.permissions.query({ name: 'notifications'}).then(status => status.onchange = () => noteNotificationPermission());
+  // but Safari never fires 'change' - https://webkit.org/b/259432 - and it's simpler to the following for all rather than just for some.
+  notificationPermissionInterval = setInterval(noteNotificationPermission, 1e3);
 }
 export function closeAbout() {
+  clearInterval(notificationPermissionInterval);
   document.getElementById('aboutContainer').classList.toggle('hidden', true);
 }
 document.getElementById('scriptChooser').onchange = event => { // Run a script module chosen by the user. e.g., for testing.
@@ -200,28 +195,13 @@ clickTip('#share', Int`${osName()} share a link to this map and topics, with pic
 
 clickTip('#recenterButton', Int`Recenter the map to where you are in the world.`, recenterMap);
 
-function checkOnline() { //true if online and visible, else cancel reconnectCountdown and inactivityTimeout, and show "offline"
+function checkOnline() { //true if online and visible, else cancel inactivityTimeout, and show "offline"
   //console.log('checkOnline', navigator.onLine && !document.hidden);
   if (navigator.onLine && !document.hidden) return true;
-  clearTimeout(inactivityTimer);
-  clearInterval(reconnectCountdown);
   if (!navigator.onLine) showMessage(Int`No network connection.`, 'error');
   else console.warn('hidden');
   return false;
 }
-function resetReconnectCountdown() { // if !checkOnline each second, show time remaining; at expiration initialize(false)
-  console.log('resetReconnectCountdown');
-  clearInterval(reconnectCountdown);
-  let counter = RETRY_SECONDS;
-  reconnectCountdown = setInterval(() => {
-    if (!checkOnline()) return null;
-    if (counter > 1) return showMessage(Int`Disconnected. Retrying in ` + counter-- + Int` seconds.`, 'error');
-    showMessage('');
-    console.log('countdown timer expired');
-    clearInterval(reconnectCountdown);
-    return initialize(false);
-  }, 1e3);
-}
 
 export let positionWatch;
 let subscribeOneShot;
@@ -305,6 +285,7 @@ let checking = false; // For debouncing.
 // On startup, get last persisted portals list, else the portal we came in on.
 //fixme let portals = new Set(JSON.parse(localStorage.getItem('portals') || `["${new URL('/kdht', window.location).href}"]`));
 async function initialize(event) { // Ensure there is a network promise and map, and reset geolocation:
+  // Called with no event by startup and resetInactivityTimer, and with event by handlers for visibilitychange and online.
   // debounce
   // if !checkOnline(), return
   // set network to promise a new Contact, set ondisconnect, and connect.
@@ -315,6 +296,7 @@ async function initialize(event) { // Ensure there is a network promise and map,
   try {
     // Always close about display, because notification permissions and the like can change in the OS while we're hidden, and safari and mobile chrome don't issue change events for them.
     closeAbout();
+    if (event) await delay(); // In some cases (iOS PWA), we may get online or visibilitychange BEFORE the previous network close event. So give that a moment.
 
     // If networkPromise has not yet been set (or cleared by disconnect), we will be subscribing.
     const needsConnection = !networkPromise;
@@ -360,15 +342,6 @@ async function initialize(event) { // Ensure there is a network promise and map,
 	  // so as not to confuse other nodes that have given up on the unresponsive old GUID.
 	  showMessage(message, 'error');
 	});
-	//contact.connect(/*fixme ...portals*/)
-	  // .then(() => contact.subscribe({ // Add and persist any new portals we haven't heard about.
-	  //   eventName: 'sys:portals',
-	  //   handler: data => {
-	  //     const operation = data.payload ? 'add' : 'delete';
-	  //     const resultSet = portals[operation](data.subject);
-	  //     localStorage.setItem('portals', JSON.stringify([...resultSet]));
-	  //   }
-	  // }))
       });
     }
     await Agent.initialize();

package/public/javascripts/p2pWebNetwork.js

@@ -79,7 +79,7 @@ export class P2PWebNetwork {
       const [pushId, ...topics] = JSON.parse(lastPushed);
       await Promise.all([
 	navigator.serviceWorker.ready
-	  .then(registration => registration.pushManager.getSubscription())
+	  .then(registration => registration.pushManager?.getSubscription())
 	  .then(subscription => subscription?.unsubscribe()),
 	...topics.map(topic => peer.unsub(topic, {pushId}))
       ]);

package/public/javascripts/protocol.js

@@ -95,15 +95,18 @@ if (dht < 1) {
 	socket.onmessage = event => {
 	  const [tag, ...rest] = JSON.parse(event.data);
 	  const subHandler = handlers[tag];
+	  if (subHandler) {
+	    const [ackTag, ...parameters] = rest;
+	    console.log('event', ackTag);
+	    socket.send(JSON.stringify([0, ackTag]));
+	    return subHandler(...parameters);
+	  }
 	  const inFlightResolver = inFlight[tag];
-
-	  // if ((!subHandler && !inFlightResolver) || // debug
-	  //     ((typeof(subHandler) !== 'function') && (typeof(inFlightResolver) !== 'function')))
-	  //   console.warn('no handler or request', {tag, rest, subHandler, inFlightResolver, handlers, inFlight});
-
-	  if (subHandler) return subHandler(...rest);
-	  delete inFlight[tag];
-	  return inFlightResolver?.(...rest);
+	  if (inFlightResolver) {
+	    delete inFlight[tag];
+	    return inFlightResolver(...rest);
+	  }
+	  return console.log('unexpected message', event.data);
 	};
 	socket.onopen = () => {
 	  if (socket.readyState !== WebSocket.OPEN) return; // You would think that can't happen, but...
@@ -123,7 +126,7 @@ if (dht < 1) {
 	disconnect = () => socket.close();
       } else {
 	disconnect = () => null;
-	operator.setReceiver((nodeTag, id, ...rest) => handlers[id](...rest));
+	operator.setSender((nodeTag, id, ...rest) => handlers[id](...rest));
 	resolve((methodName, ...rest) => operator[methodName](...rest)); // send()
       }
     });

package/public/javascripts/pubsub.js

@@ -37,18 +37,26 @@ const PUBLISH_TIMEOUT = 24 * 60 * 60e3;      // Delete after 24 hours.
 const TRACK_TIMEOUT = PUBLISH_TIMEOUT;
 
 let invoke;
-export function setReceiver(receiver) { // Set the means by which we fire events over a connection.
+export function setSender(receiver) { // Set the means by which we fire events over a direct connection.
   invoke = receiver; // E.g. (nodeId, handlerId, envelope) => getSocket(nodeId).send(JSON.stringify([handlerId, envelope]));
 }
-async function fireEvent(...rest) { // Send envelope to a subscribed hander.
-  try {
-    invoke(...rest);
-  } catch (error) { // Error sending, e.g., nodeTag is gone and we had not yet noticed.
+
+function directFireEvent(...rest) { // Send envelope to a subscribed hander.
+  return invoke(...rest).catch(async error => { // Error sending, e.g., nodeTag is gone and we had not yet noticed.
+    console.log(new Date(), error.message || error);
     const [nodeTag, id, envelope] = rest;
     await deleteSubscriber(nodeTag);
-    const subscription = await store.get('sub', await deriveTopicId(envelope.topic), id);
-    if (subscription) push(envelope, subscription, PUBLISH_TIMEOUT);
-  }
+    const topic = envelope.topic;
+    const topicId = await deriveTopicId(topic);
+    const subscription = await store.get('sub', topicId, id);
+    console.log('push error activation:', topic, topicId, id, subscription);
+    if (subscription) push(envelope, subscription, PUBLISH_TIMEOUT); // Do not wait for push.
+  });
+}
+
+let burstQueue = Promise.resolve();
+function sendBurst(thunk) { // Serialize outbursts so that we and a client that subscribed to a bunch both have time to send/accept ack's.
+  burstQueue = burstQueue.then(thunk);
 }
 
 export async function subscribe(topic, nodeTag, {since = 'all', pushData = null}) {
@@ -58,27 +66,34 @@ export async function subscribe(topic, nodeTag, {since = 'all', pushData = null}
   const id = uuidv4();
   await store.set('sub', topicId, nodeTag, id, SUBSCRIPTION_TIMEOUT);
   // If pushData, store it separately by nodeTag until it needs to be activated.
-  if (pushData) await store.set('track', topicId, nodeTag, pushData, TRACK_TIMEOUT);
-  else store.remove('track', topicId, nodeTag);
+  if (pushData) {
+    console.log('track push sub', topicId, nodeTag, pushData.endpoint.slice(0, 80));
+    await store.set('track', topicId, nodeTag, pushData, TRACK_TIMEOUT);
+  } else {
+    store.remove('track', topicId, nodeTag);
+  }
   if (since) { // invoke handler on any sticky data, but only after we have told client the subscription id. TODO: is there a better way?
     setTimeout(async () => {
-      let lastEnvelope = null, lastTime = 0;
-      for (const envelope of await store.values('pub', topicId)) {
-	switch (since) {
-	case 'all':
-	  await fireEvent(nodeTag, id, envelope);
-	  break;
-	case 'latest':
-	  if (envelope.ts > lastTime) {
-	    lastTime = envelope.ts;
-	    lastEnvelope = envelope;
+      //sendBurst(async () => {
+	let lastEnvelope = null, lastTime = 0;
+	for (const envelope of await store.values('pub', topicId)) {
+	  if (!await store.get('sub', topicId, nodeTag)) return;
+	  switch (since) {
+	  case 'all':
+	    await directFireEvent(nodeTag, id, envelope);
+	    break;
+	  case 'latest':
+	    if (envelope.ts > lastTime) {
+	      lastTime = envelope.ts;
+	      lastEnvelope = envelope;
+	    }
+	    break;
+	  default: // Must be a timestamp
+	    if (envelope.ts === since) await directFireEvent(nodeTag, id, envelope);
 	  }
-	  break;
-	default: // Must be a timestamp
-	  if (envelope.ts === since) await fireEvent(nodeTag, id, envelope);
 	}
-      }
-      if (lastEnvelope) fireEvent(nodeTag, id, lastEnvelope);
+	if (lastEnvelope) directFireEvent(nodeTag, id, lastEnvelope);
+      //});
     }, 100);
   }
   return {topicName: {name, region, owner, write}, topicId, id};
@@ -89,26 +104,28 @@ export async function unsubscribe(topic, nodeTag, {pushId}) {
   // Additionally, an activated sticky pushId will be removed if specified - it is the nodeTag from a previous session).
 
   const topicId = await deriveTopicId(topic);
-  let id = await store.remove('sub', topicId, nodeTag);
+  let id = await store.remove('sub', topicId, nodeTag), tracked;
   // Also remove any sticky push subscription:
   // If not yet promoted to sub, it's in track under our current, protectable nodeTag.
   await store.remove('track', topicId, nodeTag);
   // Otherwise, it might have been activated in sub under pushId (i.e., a previous session nodeTag).
   // TODO: pushId should probably be a JWS that was signed in the subscribing node's previous session by the pushId,
   // thus proving that the request actually came from the succcessor to that node.
-  if (pushId) pushId = await store.remove('sub', topicId, pushId);  // pushId must match that used during activation.
-  return {ok: !!id, id, pushId}; // Axona doesn't return the id(s) of the subscription(s), but it is convenient for us to do so.
+  if (pushId) tracked = await store.remove('sub', topicId, pushId);  // pushId must match that used during activation.
+  //if (pushId) console.log('normal unsubscribe remove tracking', pushId, tracked?.endpoint.slice(0, 80));
+  return {ok: !!id, id, pushId: tracked}; // Axona doesn't return the id(s) of the subscription(s), but it is convenient for us to do so.
 }
 
 export async function deleteSubscriber(nodeTag) {
-  // The node is gone: lost connection, or fireEvent failed.
-
+  // The node is gone: lost connection, or directFireEvent failed.
+  console.log('deleteSubscriber', nodeTag);
   for (const topicId of await store.topics('sub')) { // Remove in all topics.
-    await store.remove('sub', topicId, nodeTag);
+    const sub = await store.remove('sub', topicId, nodeTag);
+    if (sub) console.log('removed sub', topicId, nodeTag, sub);
     // Activate pending push subscription, if any, by moving it from 'track' to active 'sub'.
     const pushSubscription = await store.remove('track', topicId, nodeTag);
     if (pushSubscription) {
-      //console.log('activiting', topicId, nodeTag, pushSubscription);
+      console.log('activating', topicId, nodeTag, pushSubscription.endpoint.slice(0, 80));
       await store.set('sub', topicId, nodeTag, pushSubscription, TRACK_TIMEOUT);
     }
   }
@@ -122,9 +139,11 @@ async function handleEvents(topicId, envelope)  {
   // Each sub's handlerInfo can be an ordinary subscription nodeId, or a sticky push subscription data.
   return Promise.all(subs.map(([nodeTag, handlerInfo]) => {
     if (isConnectedSubscription(handlerInfo)) { // nodeId
-      return fireEvent(nodeTag, handlerInfo, envelope);
+      return directFireEvent(nodeTag, handlerInfo, envelope);
     } else { // activated sticky push subscription data object.
-      return push(envelope, handlerInfo, PUBLISH_TIMEOUT);
+      console.log('pushing for nodeId', nodeTag, handlerInfo?.endpoint.slice(0, 80));
+      push(envelope, handlerInfo, PUBLISH_TIMEOUT);
+      return null; // Do not wait for push
     }
   }));
 }
@@ -153,3 +172,5 @@ export async function unpublish(topic, msgId, {signWith}) {
   await handleEvents(topicId, envelope);
   return {ok: true};
 }
+
+export const operators = {setSender, subscribe, unsubscribe, deleteSubscriber, publish, unpublish};

package/public/javascripts/push.js

@@ -23,6 +23,6 @@ export async function push(envelope, {applicationServerKey, applicationId, ...su
   // to correlate known topic activity with someone's push records obtained from the service.
   const reply = await webpush.sendNotification?.(subscription, JSON.stringify(envelope), options)
       .catch(error => console.error(`${error.message} for push ${subscription?.endpoint}.`));
-  //console.log('push', {envelope, subscription, options, reply});
+  console.log('push', {msgId: envelope.msgId, endpoint: subscription.endpoint, status: reply?.statusCode});
   return reply;
 }

package/public/javascripts/service-manager.js

@@ -1,6 +1,6 @@
 const { Request, Response, URL, localStorage, BroadcastChannel } = globalThis;
 import { appVersion } from './versions.js';
-import { resetInactivityTimer, clickTip, closeAbout } from './main.js';
+import { resetInactivityTimer, clickTip, closeAbout, delay } from './main.js';
 import { openDisplay } from './display.js';
 import { go, getShareableURL } from './alert.js';
 import { Int } from './translations.js';
@@ -79,7 +79,10 @@ async function installUpdate(event, newVersion) {
   event.stopPropagation();
   event.target.textContent = Int`Installing...`; // In case there is some delay, tell the user what we're trying to do. Will be cleared with reload.
   event.target.disabled = true;
-  await caches.delete(appVersion); // Must be before cacheSource, or we'll just recache the same files!
+  // Must be before cacheSource, or we'll just recache the same files!
+  const cacheNames = await caches.keys();
+  await Promise.all(cacheNames.map(name => caches.delete(name))); // Includes ALL cache storage, such as seen notifications.
+
   await cacheSource(newVersion);
   closeAbout();
   // Reload, but convince all browsers to re-"fetch" (through the new service worker that is now running).
@@ -141,6 +144,8 @@ await navigator.serviceWorker
 	resolveCached?.(params);
 	break;
       case 'go':
+	await delay();
+	resetInactivityTimer();
 	go(params);
 	break;
       default:

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 = '5.0.3';
+const serviceVersion = '5.1.1';
 
 const cacheList = [ // The files we need.
   "/",
@@ -174,7 +174,7 @@ self.addEventListener('activate', async event => {
   // Apply to running clients now, so that first fresh install sees updatefound event.
   // Otherwise, the service worker wouldn't fire until the code NEXT time the page loads after
   // registration, and thus the initial load would not see any updatefound events.
-  event.waitUntil(self.clients.claim());
+  event.waitUntil(self.clients.claim().then(expireStaleAlerts));
 });
 
 self.addEventListener('fetch', event => {
@@ -203,8 +203,36 @@ 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:
+// The service worker is stopped and restarted for events, and so we can't keep an in-memory set of issued alerts.
+// Here we keep it in cache, and manually clean up expired entries.
+const alertCache = 'alerts-' + serviceVersion;
+function hasSeenAlert(seenKey) { // Have we noted seenKey before?
+  return caches.open(alertCache).then(cache => cache.match(seenKey));
+}
+function noteSeenAlert(seenKey, issuedTime) { // Record seenKey and it's expiration timestamp.
+  return caches.open(alertCache).then(cache => cache.put(seenKey, new Response(issuedTime.toString())));
+}
+const ALERT_EXPIRATION_MS = 24 * 60 * 60e3;
+let lastMaintenance = 0;
+const SERVICE_INTERVAL = 60 * 60e3;
+async function expireStaleAlerts() { // Maintenance: declutter notifications and cache storage.
+  const now = Date.now();
+  if (now < lastMaintenance + SERVICE_INTERVAL) return;
+  lastMaintenance = now;
+  const cache = await caches.open(alertCache);
+  const firstSafeIssuedTime = Date.now() - ALERT_EXPIRATION_MS;
+  const firstSafeIssuedString = firstSafeIssuedTime.toString();
+  for (const key of await cache.keys()) {
+    const response = await cache.match(key);
+    if (!response) console.error('how can there not be a response at', key);
+    else if (firstSafeIssuedString > await response.text()) {console.log('removing stale seen', key); cache.delete(key); }
+  }
+  for (const notification of await self.registration.getNotifications()) {
+    if (firstSafeIssuedTime > notification.data.issuedTime) {console.log('removing stale alert', notification.close());}
+  }
+}
+
+async 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,
@@ -213,21 +241,24 @@ function showNotification({lat, lng, issuedTime, hashtag, alert, body = '', forc
   // 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 seen = !force && await hasSeenAlert(seenKey);
+  console.log({seenKey, seen});
+  if (seen) return null;
+  noteSeenAlert(seenKey, issuedTime);
   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 data = {lat, lng, url, issuedTime};
   const options = {icon, timestamp, body, data, tag: alert, renotify: true};
   console.log('showNotification', {seenKey, hashtag, options});
-  return self.registration.showNotification(hashtag, options);
+  await self.registration.showNotification(hashtag, options);
+  return expireStaleAlerts();
 }
 
 function showNotificationFromEnvelope({deleted, message, msgId}) { // We get the generic, application-independent envelope.
-  //console.log('envelope', message, msgId);
+  console.log('received push', msgId, deleted ? 'cancel' : '');
   if (deleted) return cancelNotification(msgId);
   const {issuedTime, hashtag, payload, alert = msgId} = message;
   let {lat, lng, message:body, name = ''} = payload;
@@ -237,7 +268,7 @@ function showNotificationFromEnvelope({deleted, message, msgId}) { // We get the
 
 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});
+    console.log('cancel notification', {tag, body, notification});
     if (!body || (body === notification.body)) notification.close();
   }
 }

package/public/stylesheets/style.css

@@ -205,6 +205,7 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
     bottom: 55px;
     max-height: 45dvh; /* leaving room for portrait keyboard. landscape keyboard has no room at all *\/ */
     overflow-y: auto;
+    overscroll-behavior: contain;      /* don't chain scroll to page */
     width: fit-content;
     min-width: var(--combobox-minWidth);
     z-index: 1000;

package/server/websocket.js

@@ -1,12 +1,47 @@
 // Offer a websocket connection for testing, that skips the DHT entirely, and accepts publishing by pushing to subscribers over the websocket.
 import { WebSocketServer } from 'ws';
-import * as operator from '../public/javascripts/pubsub.js';
+import { operators } from '../public/javascripts/pubsub.js';
 
 const sockets = {};
-operator.setReceiver((nodeId, id, envelope) => {
+operators.setSender((nodeId, eventHandlerId, envelope) => new Promise((resolve, reject) => {
+  // Setup pubsub to receive events, by supplying a function that promises to send the event.
+  //
+  // When a client goes to the background, it will stay connected for at least a few seconds. An alert during that time will be transmitted in the usual way.
+  // If the client politely closes, our close handler will catch this, and call pubsub's deleteSubscriber(), which activates any sticky subs.
+  //    An alert after that be transmitted by the sticky push sub, if any.
+  // We have a 20 second heartbeat to all clients: when someone has gone dark by being in the background, that will supply the cose.
+  //    An alert after heartbeat expiration wil be transmitted by the sticky push sub, if any.
+  // But... Sending on a websocket that isn't listening will silently appear to succeed.
+  // (The protocol is designed that way so that operating systems can buffer the output, so any tcp ack failure could occur
+  // long after socket.send() returned.)
+  // Oy.
+  // If the OS suspends the client, say, 5 seconds after going into the background, an alert between 5 and 20 seconds would not be delivered!
+  // In order to prevent this, outgoing events send an ackTag string (in addition to the event envelope), which the client must send back.
+  // Here we set the event publisher to answer a Promise. If the sender acknowledges the event within ACK_TIME_MS, it resolves to undefined.
+  // But if there is no acknowledgement (or if the updated readyState after sending is not OPEN), then the promise is rejected,
+  // and pubsub can catch that and transmit by the sticky push sub, if any.
   const socket = sockets[nodeId];
-  socket.send(JSON.stringify([id, envelope])); // We want an error if socket is gone, closed, etc.
-});
+  if (!socket) return;
+  const ACK_TIME_MS = 20e3;
+  const ackTag = nodeId + '-' + socket.sendCounter++;
+  const fail = reason => {
+    delete sockets[nodeId]; // Keep close() from removing any sticky sub.
+    delete operators[ackTag];
+    socket.terminate(); // close will be asynchronous.
+    reject(reason); // Reject now (before close), so that caller can catch this and push message to sticky sub, if any.
+  };
+  console.log(new Date(), 'socket send', socket.readyState, ackTag, eventHandlerId);
+  const timer = setTimeout(() => fail(`No acknowledgement for ${ackTag} in state ${socket.readyState} for handler ${eventHandlerId}.`), ACK_TIME_MS);
+  operators[ackTag] = () => {
+    console.log('ack', ackTag, 'from eventHandlerId', eventHandlerId);
+    clearTimeout(timer);
+    delete operators[ackTag];
+    resolve();
+  };
+  socket.send(JSON.stringify([eventHandlerId, ackTag, envelope])); // We want an error if socket is gone, closed, etc.
+  // State might not update until we attempt to actually send.
+  if (socket.readyState !== WebSocket.OPEN) fail(`Bad state send to ${ackTag}, state ${socket.readyState} for handler ${eventHandlerId}.`);
+}));
 
 function heartbeat() {
   this.isAlive = true;
@@ -17,13 +52,15 @@ export function configureWebsocket(server) {
   wss.on('connection', (ws, req) => {
     const nodeTag = req.url.slice(1);
     console.log('Connected', nodeTag);
+    ws.sendCounter = 0;
     sockets[nodeTag] = ws;
 
     ws.on('message', async message => {
       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]));
+	const parsed = JSON.parse(message);
+	const [id, methodName, ...rest] = parsed;
+	const result = await operators[methodName](...rest);
+	if (id && (ws.readyState === WebSocket.OPEN)) ws.send(JSON.stringify([id, result]));
       } catch (error) {
 	console.error(`Incomming ${error.message}: ${message}\n${error.stack}`);
       }
@@ -34,9 +71,10 @@ export function configureWebsocket(server) {
 
     ws.on('error', console.error);
     ws.on('close', () => {
-      console.log('Disconnected', nodeTag);
+      console.log(new Date(), 'Disconnected', nodeTag);
+      // Guarded, so that we don't double delete, and remove an active sticky sub.
+      if (sockets[nodeTag]) operators.deleteSubscriber(nodeTag);
       delete sockets[nodeTag];
-      operator.deleteSubscriber(nodeTag);
     });
   });