@yz-social/civildefense.io 5.0.0 → 5.0.3

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.0",
+  "version": "5.0.3",
   "keywords": [
     "map",
     "browser",

package/public/about/en.html

@@ -16,10 +16,10 @@
 <header class="hero">
   <div class="hero-inner">
     <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
-    <h1>The Civil Defense <span>App</span></h1>
-  <!--   <div class="hero-divider"></div> -->
-  <!--   <p class="hero-tagline">Realtime crowdmapping that is resistant to tracking, censorship, and takedown</p> -->
+    <h1>The Civil Defense <a href="/" target="civildefense"><span>App</span></a></h1>
   </div>
+
+
   <div class="language-selector">
     <label for="language">Language:</label>
     <select id="language" name="language" onchange="location = this.value;">
@@ -42,7 +42,7 @@
         </div>
 
         <div class="carousel-slide">
-          <a href="/?tags=%F0%9F%A9%B7%20community%20%20DEMO,%F0%9F%91%81%EF%B8%8F%20observer%20DEMO,%F0%9F%A7%B0%20utility%20DEMO&lat=44.942473404432015&lng=-93.26251878766926&z=14" target="civildefense"><img src="streets-of-minneapolis.jpg" alt="Map view showing alert markers scattered across a neighborhood"></a>
+          <a href="/?tags=%F0%9F%A9%B7%20community%20DEMO,%F0%9F%91%81%EF%B8%8F%20observer%20DEMO,%F0%9F%A7%B0%20utility%20DEMO&lat=44.942473404432015&lng=-93.26251878766926&z=14" target="civildefense"><img src="streets-of-minneapolis.jpg" alt="Map view showing alert markers scattered across a neighborhood"></a>
           <div class="carousel-caption">Like Twitter, you create the topics.<br>But you only get alerts based on your current map.<br>Like Snapchat, alerts fade away after 24 hours.</div>
         </div>
 
@@ -54,6 +54,14 @@
 	  </div>
         </div>
 
+        <div class="carousel-slide">
+          <a href="/?tags=%F0%9F%94%A5%20fire,%F0%9F%86%98%20help&lat=48.15529671483125&lng=31.630317514459872&z=6" target="civildefense"><img src="ukraine-fires.jpeg" alt="Map of Ukraine with NASA FIRMS data"></a>
+          <div class="carousel-caption">
+	    <span>Civil Defense can integrate massive amounts of authoritative and crowd-reported data. Here people can report and discuss fires alongside the last 24 hours of NASA satellite data on wildfires, polution fires, and war.</span>
+	    <a href="/?tags=%F0%9F%94%A5%20fire,%F0%9F%86%98%20help&lat=48.15529671483125&lng=31.630317514459872&z=6" target="civildefense">Show me!</a>
+	  </div>
+        </div>
+
         <div class="carousel-slide">
           <a href="/?tags=%F0%9F%8E%BC%20classical,%F0%9F%8E%A7%20edm,%F0%9F%8E%A4%20hiphop,%F0%9F%8E%99%EF%B8%8F%20news,%F0%9F%8E%B5%20pop&lat=47.51951505778901&lng=1.6779639902073742&z=6" target="civildefense"><img src="radio-europe.jpg" alt="Map of Western Europe with playable streaming radio station markers"></a>
           <div class="carousel-caption">
@@ -109,25 +117,32 @@
   </p>
 
   <h2 id="topics">Topics</h2>
-  <p>Control what topics are shown on the map by simply touching the topic labels to toggle them on and off. Like "hashtags", you add or create new topics by simply typing them - in this case, into the "add topic" box. There is no central list of topics.
-    <ul>
-      <li>If you like, you can begin a topic name with an emoji character, and that is what will be used on the map as a marker. Otherwise, a unique shape will be automatically generated and used until you receive an alert for that topic that <i>does</i> have a leading emoji.</li>
-      <li>You can remove a topic name from your screen altogether by toggling it off, and then touching the "x" that appears. You can add topics back by typing or selecting them from the "add topic" box.</li>
-      <li>The red "radio button" next to a topic name indicates that it will be the initial topic for a new alert you create by touching the map. (You can also change the topic of an alert you create by touching the topic name in the alert-conversation popup.)</li>
-    </ul>
-  </p>
+
+  <p>Control what topics are shown on the map by simply touching the topic labels to toggle them on and off.</p>
+
+  <div class="centered">
+    <a href="/?tags=%F0%9F%9A%82%20train&highlight=%5Blabel%3D%22%F0%9F%9A%82%20train%22%5D" target="civildefense"><img src="train.png" alt="train topic button"></a>
+  </div>
+
+  <p>You can add or create your own by typing them into the "add topic" box. If your text begins with an emoji, that will be used as the marker in the map.</p>
 
   <div class="centered">
-    <img class="topics" src="topics.png" alt="topic labels">
+    <a href="/?highlight=.newtag" target="civildefense"><img src="add-topic.png" alt="add topic box with autocomplete"></a>
   </div>
 
+  <p>The red "radio button" next to a topic name indicates that it will be the initial topic for a new alert you create by touching the map. You can also change the topic of an alert you create by touching the topic name in the alert-conversation popup.</p>
+
+  <div class="centered">
+    <a href="/?tags=%F0%9F%9A%82%20train&highlight=%5Blabel%3D%22%F0%9F%9A%82%20train%22%5D%20md-icon-button" target="civildefense"><img src="train-radio-button.png" alt="train topic radio button"></a>
+  </div>
 
   <h2 id="sharing">Sharing</h2>
 
   <p>Every alert you make will be immediately visible to anyone with the app who is looking at that point on the map. Every reply you make will be immediately shared with anyone looking at the same alert.</p>
   <p>You can use the share button to pass a link and message to those that may not yet have the app. The button appears on the map, at the top of an alert-conversation display, and next to each reply, and it shares whatever the button appears with.</p>
+
   <div class="centered">
-    <img class="button-img" src="../images/share.svg" alt="share">
+    <a href="/?highlight=%23share" target="civildefense"><img class="button-img" src="../images/share.svg" alt="share"></a>
   </div>
 
   <h2 id="options">Options</h2>
@@ -135,10 +150,9 @@
   <p>The app's "<span class="cd">CD</span>" button gives you control over <a href="notification.html">notifications</a>, <a href="identity.html">how you appear to others</a>, and <a href="pwa.html">updates</a>.</p>
 
   <div class="hero-inner">
-    <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
+    <a href="/?highlight=%23aboutButton" target="civildefense"><img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo"></a>
   </div>
 
-
   <!-- <hr class="rule"> -->
 
   <h1 id="broadcast">Broadcast Safely</h1>
@@ -146,43 +160,38 @@
   <h2 id="tracking">Resist Tracking</h2>
   <ul>
     <li>You cannot be identified as a person because there is no login, sign-up, or accounts. No phone number or email is used. There is no app store logging downloads. Users can choose to let others recognize them over multiple interactions — without divulging their actual identity.</li>
-    <li>It is extremely difficult to identify your IP address or network patterns, because alerts are distributed phone-to-phone over a peer-to-peer network.</li>
-    <li>Notifications are sent directly through the foreground app on your phone, without going through Apple or Google's messaging service. (Backgrounded app notifications available this Winter.)</li>
-    <li>Each alert disappears everywhere on the network after 24 hours. There are no collected records of messages, comments, or requested topics, and this is not an archive or long-term storage system.</li>
+    <li>It is extremely difficult to identify your IP address or network patterns, because alerts are distributed phone-to-phone over a peer-to-peer network.<a href="#p2p"><sup>1</sup></a></li>
+    <li>Messages are signed by the sender, sent directly through the network, or through Apple or Google's messaging service without identifying the app, topic, sender, or contents.</li>
+    <li>Each alert disappears everywhere on the network after 24 hours. There are no collected records of messages, comments, or requested topics<a href="#p2p"><sup>1</sup></a>, and this is not an archive or long-term storage system.</li>
   </ul>
 
   <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.</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>
   </ul>
 
   <h2 id="takedown">Resist Takedown</h2>
   <ul>
     <li>No app store can block Civil Defense — the app is just a web page.</li>
     <li>Taking down web servers or domain names cannot block access for those who already have it, because the app caches everything it needs on first use. The <a href="https://github.com/yz-social/civildefense.io" target="yz.other" rel="noopener">open-source code</a> is available so anyone can host an alternative mirror.</li>
-    <li>There is no back-end server or data center to take down. All alert data is entirely peer-to-peer. All mirrors share this network: a post on <a href="https://civildefense.io" target="civildefense">civildefense.io</a> appears on the mirror at <a href="https://ki1r0y.com" target="ki1r0y" rel="noopener">ki1r0y.com</a> and vice versa.</li>
-    <li>Blocking network traffic is extremely difficult, because the low-level data is identical to video conferencing traffic.</li>
-    <li>Civil Defense is highly resistant to Denial of Service attacks. However, it does require a working Internet, and does not by itself offer any protection against a complete Internet shutdown.</li>
+    <li>There is no back-end server or data center to take down. All alert data is entirely peer-to-peer. All mirrors share this network: a post on <a href="https://civildefense.io" target="civildefense">civildefense.io</a> appears on the mirror at <a href="https://ki1r0y.com" target="ki1r0y" rel="noopener">ki1r0y.com</a> and vice versa.<a href="#p2p"><sup>1</sup></a></li>
+    <li>Blocking network traffic is extremely difficult, because the low-level data is identical to video conferencing traffic.<a href="#p2p"><sup>1</sup></a></li>
+    <li>Civil Defense is highly resistant to Denial of Service attacks.<a href="#p2p"><sup>1</sup></a> However, it does require a working Internet, and does not by itself offer any protection against a complete Internet shutdown.</li>
   </ul>
   <!-- <hr class="rule"> -->
 
   <h1 id="more">The Bigger Picture</h1>
-  <p>The Civil Defense runs on the <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">Axona network</a>. Both are free and open source.</p>
+  <p>The Civil Defense runs on the <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">Axona network</a><a href="#p2p"><sup>1</sup></a>. Both are free and open source.</p>
   <p>Axona is a modern descendant of the old <a href="https://en.wikipedia.org/wiki/Peer-to-peer" target="yz.other" rel="noopener">peer-to-peer networks</a> such as <a href="https://en.wikipedia.org/wiki/Napster">Napster</a>. It has a unique self-healing routing mechanism that uses neuron learning techniques to find the best way to distribute alerts. It is analogous to <a href="https://en.wikipedia.org/wiki/Tor_(network)" target="yz.other" rel="noopener">TOR</a> (The Onion Router), but designed from the ground up to run in mobile and desktop browsers.</p>
   <p>We are also developing a comprehensive quantum-ready cryptography system that will add private-groups for Civil Defense and any software on the network. We believe there are many applications where developers, users, and the public all benefit from open software and secure, decentralized networks — without app stores, servers, or data centers. Beyond Civil Defense, we are also developing large-scale <a href="https://en.wikipedia.org/wiki/Distributed_computing" target="yz.other" rel="noopener">multiuser collaboration</a> and <a href="https://poverty-action.org/inclusive-instant-payment-systems-evidence-based-approach-design-impact" target="yz.other" rel="noopener">Inclusive Instant Payment Systems</a>.</p>
 
+  <hr class="rule">
+  <b id="p2p">1</b>: Coming in Fall, 2026
+  <hr class="rule">
 
 <div class="centered">
-  <img src="serving-you.jpg" alt="Civil Defense Week poster - Serving you in time of emergency">
-</div>
-
-<div class="centered">
-  <img src="prevail.jpg" alt="Cold-War Civil Defense poster - Prepare, Protect, Prevail">
-</div>
-
-<div class="centered">
-  <img src="nazis.png" alt="WWII-style poster exhorting the public to use Civil Defense in case of Nazi attack.">
+  <img src="posters.jpeg" alt="Civil Defense posters from the 1950s">
 </div>
 
 </main>

package/public/about/identity.html

@@ -13,12 +13,27 @@
   <header class="hero">
     <div class="hero-inner">
       <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
-      <h1>The Civil Defense <a href="index.html"><span>App</span></a></h1>
+      <h1>The <a href="index.html"><span class="about">Civil Defense</span></a> <a href="/" target="civildefense"><span>App</span></a></h1>
     </div>
   </header>
   <main class="content-wrap">
     <h1>Identity without Accounts</h1>
-    <p>Lorem ipsum</p>
+    <p>There is no signup to use CivilDefense, and no phone number or email is asked for. Instead, each browser or <a href="pwa.html">installation</a> automatically creates a cryptographically secured random identity, and maintains it until you <a href="pwa.html#removal">remove</a> it.</p>
+
+    <h2>How Others See You</h2>
+
+    <p>When you create or reply to an <a href="index.html#do">alert</a>, the posting will be shown as "anonymous" with an automatically generated unique image.</p>
+    <p>If you like, you can change what will be shown for either of these by touching the "<span class="cd">CD</span>" button and suppling a different "handle" text or "avatar" image. The handle and avatar are how you choose to be recognized, do not have to be unique, and are shared with everyone.</p>
+
+    <div class="hero-inner">
+      <a href="/?highlight=%23aboutButton" target="civildefense"><img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo"></a>
+    </div>
+
+    <h2>How You See Others</h2>
+
+    <p>You may find that you want to reliably recognize some contributors over time, even if their chosen handle and avatar are not unique, or if they change their handle or avatar between postings. You can do this by touching <i>their</i> avatar image, and choosing a handle or avatar by which you will recognize them. This choice is never seen by anyone else, so feel free to label them however you need.</p>
+
+    <hr class="rule">
 
     <div class="centered">
       <img src="prevail.jpg" alt="Cold-War Civil Defense poster - Prepare, Protect, Prevail">

package/public/about/notification.html

@@ -13,12 +13,50 @@
   <header class="hero">
     <div class="hero-inner">
       <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
-      <h1>The Civil Defense <a href="index.html"><span>App</span></a></h1>
+      <h1>The <a href="index.html"><span class="about">Civil Defense</span></a> <a href="/" target="civildefense"><span>App</span></a></h1>
     </div>
   </header>
+
   <main class="content-wrap">
+
     <h1>Notifications without a Feed</h1>
-    <p>Lorem ipsum</p>
+
+    <p>When someone else drops an Alert onto the portion of the map you are watching, for a <a href="index.html#topic">topic</a> you are currently displaying, you will see it right away. You can also ask the app to send you a system notification. Touching the notification will open the alert in the app, so that you can see the conversation about it.</p>
+
+    <p>You must specifically turn this feature on, using the app's "<span class="cd">CD</span>" button. The system will then ask you if you want to enable notifications.
+      <ul>
+	<li>If you say "yes", you can then turn notifications on and off from the same place in the app.</li>
+	<li>If you say "no", or if you later turn off notifications in the browser or system settings, you will have to re-enable it from the browser or system settings. Notifcations on <i>Apple mobile devices</i> are only available when Civil Defense is <a href="pwa.html">installed</a>.</li>
+    </ul></p>
+
+    <div class="hero-inner">
+      <a href="/?highlight=%23aboutButton" target="civildefense"><img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo"></a>
+    </div>
+
+    <p>If you enable notifications, you will also see them:
+      <ul>
+	<li>If someone else drops an alert near your current position for a topic you are watching, even if you are looking someplace else on the map.</li>
+	<li>If someone replies to an alert that you have opened within the current map.</li>
+      </ul>
+    </p>
+
+    <h2>Privacy</h2>
+
+    <p>If the CivilDefense app is running, the notification is made entirely on the same device, without going through any other service.</p>
+    <p>However, mobile platforms can be quite aggressive about shutting down apps that you have opened, but which are not currently being displayed on the screen. In this case, the alert must be "pushed" (like a text message) in two steps.:
+      <ol>
+	<li>First, the CivilDefense network needs to send the message, just as it would if the app were running, but now through a "push service".
+	  <ul>
+	    <li>Currently, this is from civildefense.io.</li>
+	    <li>In the <a href="index.html#broadcast">next major version</a>, this will be from the peer-to-peer network itself.
+	  </ul>
+	  Either way, the network encrypts the message and sends it to the push service. It is not identified to the push service as being civildefense.io, but rather with a unique key created just of your most recent Civil Defense app session.
+	</li>
+	<li>Second, the push server - either Apple or Google - pushes the message to your device. They know that you got a push message, but not the application, topic, sender, or contents.</li>
+      </ol>
+    </p>
+
+    <hr class="rule">
 
     <div class="centered">
       <img src="serving-you.jpg" alt="Civil Defense Week poster - Serving you in time of emergency">

package/public/about/pwa.html

@@ -13,12 +13,13 @@
   <header class="hero">
     <div class="hero-inner">
       <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
-      <h1>The Civil Defense <a href="index.html"><span>App</span></a></h1>
+      <h1>The <a href="index.html"><span class="about">Civil Defense</span></a> <a href="/" target="civildefense"><span>App</span></a></h1>
     </div>
   </header>
-  <main class="content-wrap">
+
+    <main class="content-wrap">
     <h1>A Real App Without an App Store</h1>
-    <p><a href="/" target="civildefense">CivilDefense</a> is a full-featured <a href="https://en.wikipedia.org/wiki/Progressive_web_app">app in a web page</a>. However, it does not depend on any app store that can block or remove it, or track who downloaded it. You can run it directly from the <a href="/" target="civildefense">link</a>, without any installation or signup. You can also choose to install it.</p>
+    <p><a href="index.html">CivilDefense</a> is a full-featured <a href="https://en.wikipedia.org/wiki/Progressive_web_app">app in a web page</a>. However, it does not depend on any app store that can block or remove it, or track who downloaded it. You can run it directly from the <a href="/" target="civildefense">link</a>, without any installation or signup. You can also choose to install it.</p>
 
     <h2 id="installation">Installation</h2>
     <p>Installing the app makes it easy to run or <a href="#removal">remove</a> it from the home screen or dock a hurry.</p>
@@ -33,8 +34,9 @@
 
     <h2 id="updates">Updates</h2>
     <p>Regardless of whether it is <a href="#installation">installed</a> or run from the browser, the <a href="/" target="civildefense">CivilDefense</a> app automatically keeps a local copy of itself. It periodically checks the original site for new versions, but it does not update without asking you. (You might be in the middle of something or have some other reason to stay on the old version.) The app's "<span class="cd">CD</span>" button also has a "check for updates" button to check immediately.</p>
+
     <div class="hero-inner">
-      <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
+      <a href="/?highlight=%23aboutButton" target="civildefense"><img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo"></a>
     </div>
 
     <h2 id="removal">Removal</h2>
@@ -42,7 +44,9 @@
       Instead, the list of your current active topics and other data are kept only on your own device.
       No one can see (or steal, or sell) this information without physical access to your device.</p>
     <p>To remove this local data on an <i><a href="#installation">installed app</a></i>, simply delete or uninstall the app. The operating system will delete all the local data</p>
-    <p>To remove it from the <i>browser</i>, use the "Wipe all CivilDefense data" link under the app's "<span class="cd">CD</span>" button. On mobile Safari, Apple keeps the browser data separate from the app data, and each must be removed separately. Other platforms share the data between app and browser.</p>
+    <p>To remove it from the <i>browser</i>, use the "Wipe all CivilDefense data" link under the app's "<span class="cd">CD</span>" button. On mobile Safari, Apple keeps the browser data separate from the installed-app data, and each must be removed separately. Other platforms share the data between app and browser.</p>
+
+    <hr class="rule">
 
     <div class="centered">
       <img src="nazis.png" alt="WWII-style poster exhorting the public to use Civil Defense in case of Nazi attack.">

package/public/about/style.css

@@ -71,7 +71,11 @@ a:hover { color: var(--red); }
     margin: 0 auto;
 }
 .button-img { width: 80px; }
-.topics { max-width: 350px; }
+a > img {
+    box-shadow: 0 4px 28px rgba(255, 90, 0, 0.45);
+    border-radius: 18px;
+    border: solid thick var(--red);
+}
 .hero-logo {
     width: 80px;
     height: 80px;
@@ -90,6 +94,7 @@ a:hover { color: var(--red); }
     margin-bottom: 0.75rem;
 }
 .hero h1 span { color: var(--red-light); }
+.hero h1 span.about { color: var(--white); }
 .cd {
     color: var(--red);
     font-weight: 700;
@@ -158,13 +163,15 @@ a:hover { color: var(--red); }
     font-size: 18px;
     line-height: 1.5;
     text-align: center;
-    border-top: 2px solid var(--red);
     min-height: 3.4rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
+video + .carousel-caption {
+    border-top: 2px solid var(--red);
+}
 /* Prev / Next buttons */
 .carousel-btn {
     position: absolute;
@@ -251,7 +258,7 @@ a:hover { color: var(--red); }
     margin-bottom: 0.9rem;
     color: var(--body-text);
 }
-.content-wrap ul {
+.content-wrap ul, .content-wrap ol {
     margin: 0.4rem 0 1rem 1.2rem;
 }
 .content-wrap li {

package/public/javascripts/alert.js

@@ -232,52 +232,86 @@ export class Alert extends Conversation { // A wrapper around L.marker
     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 () => {
-      if (oldKeys && !Object.keys(oldKeys).length) { // This was a reset for a new node.
-	// Update replies subscriptions for alert that have already been opened.
-	for (const alert of this.items) {
-	  if (alert.subscribed) await alert.ensureRepliesSubscribed(true);
-	}
-      }
-      oldKeys ||= this.subscriptions;
-      newKeys ||= this.subscriptionFromMap();
-
-      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);
-	const pushData = handler && await this.pushData;
-	if (handler) Agent.current?.trackPublicChanges(region); // Background. No need to await.
-	return await contact.subscribe({eventName, region, handler, pushData, pushPersist: null})
-	  .then(sub => {
-	    throttleMS && P2PWebNetwork.delay(throttleMS);
-	    return sub;
-	  });
-      };
-      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);
-	});
+  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; }
+
+    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();
+    }
 
-      for (const key of added) await subscribe(key, data => Alert.ensure(data));
-      for (const key of dropped) await subscribe(key, null);
-      contact.pushPersist();
-    });
+    // Now complete this subscription update in full, before considering any others.
+    oldKeys ||= this.subscriptions;
+    newKeys ||= this.subscriptionFromMap();
+
+    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.
@@ -294,11 +328,6 @@ export class Alert extends Conversation { // A wrapper around L.marker
       resolve({...json, applicationId, applicationServerKey});
     });
   }
-  static async refreshPushSubscriptions() { // Make sticky subscriptions match a new state.
-    const contact = await networkPromise;
-    await contact.resetPersisted();
-    await this.updateSubscriptions({newKeys: this.subscriptions, oldKeys: {}});
-  }
 
   // Instance Management Internals
   // In general here, a key is an eventName - i.e., a string <mumble>:<cellID>:<hashtag>.
@@ -475,7 +504,7 @@ 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));
@@ -570,7 +599,7 @@ 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 async openPopup(alertTag) { // Open the marker specified by tag.
@@ -794,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';
 	}
       }
     }
@@ -858,8 +886,8 @@ export class Alert extends Conversation { // A wrapper around L.marker
     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/hashtags.js

@@ -23,6 +23,7 @@ let allKnownHashtags = JSON.parse(localStorage.getItem('allKnownHashtags') || `[
   "🎙️ news",
   "👁️ observer corps",
   "🎵 pop",
+  "🚂 train",
   "🧰 utility repairs"
 ]`);
 

package/public/javascripts/main.js

@@ -121,7 +121,7 @@ function noteNotificationPermission(permission) { // Update permission controls/
   }
   if (showNotifications.checked === notificationsPreviouslyAllowed) return;
   notificationsPreviouslyAllowed = showNotifications.checked;
-  Alert.refreshPushSubscriptions();
+  Alert.updateSubscriptions('stickyChange');
 }
 clickTip(showNotifications.parentElement, Int`Enable local ${osName()} notifcations for map alerts, without going through any servers. Requires that the app be running.`, event => {
   resetInactivityTimer();
@@ -192,10 +192,11 @@ document.querySelector('#correspondentContainer md-outlined-text-field').onclick
   event.stopPropagation();
 };
 
-clickTip('#share', Int`${osName()} share a link to this map and topics, with picture of map.`, event => {
-  event.stopPropagation();
+export function shareMap(event) {
+  event?.stopPropagation();
   share({text: "CivilDefense.io", url: getShareableURL().href });
-});
+}
+clickTip('#share', Int`${osName()} share a link to this map and topics, with picture of map.`, shareMap);
 
 clickTip('#recenterButton', Int`Recenter the map to where you are in the world.`, recenterMap);
 
@@ -265,7 +266,7 @@ function initializeGeolocation(subscribe = false) { // Arrange to constantly upd
     if (!subscribeOneShot) return;
     subscribeOneShot = false;
     resetInactivityTimer(false);
-    Alert.updateSubscriptions({oldKeys: {}}); // This was for a new node, so supply an empty oldSubscriptions.
+    Alert.updateSubscriptions('newNode');
   };
   if (!geolocation) {
     showMessage(Int`Geolocation not supported. Using default location.`, 'error', 'fail');
@@ -384,6 +385,9 @@ window.addEventListener("appinstalled", async () => {
   // In such cases, we need to re-initialize stuff. We could go point by point, but for now, just hit everything.
   location.reload();
 });
+document.body.addEventListener('animationend', event => {
+  event.target.style.animation = '';
+});
 
 const titleLabel = document.querySelector('#titleLabel');
 titleLabel.textContent = Int([titleLabel.textContent]);

package/public/javascripts/map.js

@@ -32,9 +32,13 @@ export function showMessage(message, type = 'loading', errorObject) { // Show lo
   }
 }
 
+function  flashElement(selector) {
+  const element = document.querySelector(selector);
+  setTimeout(() => element.style.animation = 'pulse20border ease 2s 1', 100);
+}
+
 let yourLocation; // marker
 let lastLatitude, lastLongitude;
-
 export function updateLocation(lat, lng, zoom, positionLabel) { // initMap if necessary, and set our position.
   //console.log('updateLocation', lat, lng, map, yourLocation);
   // Can't call getCurrentPosition while watching. So set it here for use in recenterMap.
@@ -48,15 +52,16 @@ export function updateLocation(lat, lng, zoom, positionLabel) { // initMap if ne
     const params = url.searchParams;
     const tags = params.get('tags');
     const tagsArray = tags?.split(',') || [];
+    const highlight = params.get('highlight');
     tagsArray.forEach(tag => Hashtags.add(decodeURIComponent(tag)));
     Hashtags.onchange({resetSubscriptions: false}); // Too early to subscribe, but will be done during initialization.
     go({lat: params.get('lat'), lng: params.get('lng'), zoom: params.get('z'), alert: params.get('alert')});
     // We don't need the query parameters now. Get rid of them. They're annoying.
     if (params.size > 0) {
-      ['tags', 'lat', 'lng', 'z', 'alert'].forEach(key => params.delete(key));
+      ['tags', 'lat', 'lng', 'z', 'alert', 'highlight'].forEach(key => params.delete(key));
       history.replaceState(null, '', url);
     }
-
+    if (highlight) flashElement(highlight);
     return;
   }
   // Otherwise just update the yourLocation marker if appropriate (and not update zoom).

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.0';
+const serviceVersion = '5.0.3';
 
 const cacheList = [ // The files we need.
   "/",

package/public/stylesheets/style.css

@@ -253,7 +253,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;
+    animation: pulse08 ease 0.8s 1;
     transition: opacity 0.4s;
 }
 .alert-commented {
@@ -288,7 +288,7 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
     left: -5px;
     background-image: radial-gradient(transparent 30%, var(--md-sys-color-primary), transparent 70%);
     transition: opacity 0.8s;
-    animation: pulse ease 0.8s 1;
+    animation: pulse08 ease 0.8s 1;
 }
 .aggregate.alert-pin.starting {
     font-size: 0px;
@@ -296,19 +296,43 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
 .aggregate.alert-pin.starting:after {
     opacity: 0;
 }
-@keyframes pulse {
-    0% { filter: saturate(1); }
-    25% { filter: saturate(4); }
-    50% { filter: saturate(1); }
-    75% { filter: saturate(0); }
-    100% { filter: saturate(1); }
-}
-@keyframes pulse2 { /* for restarting */
-    0% { filter: saturate(1); }
-    25% { filter: saturate(4); }
-    50% { filter: saturate(1); }
-    75% { filter: saturate(0); }
-    100% { filter: saturate(1); }
+@keyframes pulse08 {
+      0% { filter: saturate(1); background-color: rgb(189, 46, 47, 0%); border-radius: 8px; }
+     25% { filter: saturate(4); background-color: rgb(189, 46, 47, 25%); }
+     50% { filter: saturate(1); background-color: rgb(189, 46, 47, 40%); }
+     75% { filter: saturate(0); background-color: rgb(189, 46, 47, 25%); }
+    100% { filter: saturate(1);  background-color: rgb(189, 46, 47, 0%); border-radius: 8px;}
+}
+/* 0.2s               0.2s  */
+/*   <-0.8s-> <-0.8s->      */
+/*   4       4       4      */
+/* 1   1   1   1   1   1    */
+/*       0       0          */
+@keyframes pulse20 {
+      0% { filter: saturate(1); background-color: rgb(189, 46, 47, 0%); border-radius: 8px; }
+     10% { filter: saturate(4); background-color: rgb(189, 46, 47, 25%); }
+     20% { filter: saturate(1); background-color: rgb(189, 46, 47, 50%); }
+     30% { filter: saturate(0); }
+     40% { filter: saturate(1); }
+     50% { filter: saturate(4); }
+     60% { filter: saturate(1); }
+     70% { filter: saturate(0); }
+     80% { filter: saturate(1);  background-color: rgb(189, 46, 47, 50%); }
+     90% { filter: saturate(4); background-color: rgb(189, 46, 47, 25%); }
+    100% { filter: saturate(1); background-color: rgb(189, 46, 47, 0%); border-radius: 8px; }
+}
+@keyframes pulse20border {
+      0% { filter: saturate(1); background-color: rgb(189, 46, 47, 0%); border-radius: 8px; border: solid thin rgb(189, 46, 47, 0);}
+     10% { filter: saturate(4); background-color: rgb(189, 46, 47, 25%); border: solid thick rgb(189, 46, 47, 100%); }
+     20% { filter: saturate(1); background-color: rgb(189, 46, 47, 50%); }
+     30% { filter: saturate(0); }
+     40% { filter: saturate(1); }
+     50% { filter: saturate(4); }
+     60% { filter: saturate(1); }
+     70% { filter: saturate(0); }
+     80% { filter: saturate(1);  background-color: rgb(189, 46, 47, 50%); }
+     90% { filter: saturate(4); background-color: rgb(189, 46, 47, 25%); border: solid thick rgb(189, 46, 47, 100%); }
+    100% { filter: saturate(1); background-color: rgb(189, 46, 47, 0%); border-radius: 8px; border: solid thin rgb(189, 46, 47, 0); }
 }
 
 #checkForUpdates, #downloadUpdates, #updateContainer md-elevated-button {
@@ -320,7 +344,7 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
     gap: 10px;
 }
 .pub {
-    animation: pulse ease 0.8s 1;
+    animation: pulse08 ease 0.8s 1;
     --_label-text-weight: 800;
     --_selected-label-text-color: var(--md-sys-color-secondary);
     --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-secondary);

package/server/websocket.js

@@ -42,7 +42,10 @@ export function configureWebsocket(server) {
 
   const interval = setInterval(function ping() { // Keep-alive ping/pong on interval
     wss.clients.forEach(function each(ws) {
-      if (!ws.isAlive) return ws.terminate();
+      if (!ws.isAlive) {
+	console.log('heartbeat failure');
+	return ws.terminate();
+      }
       if (ws.readyState == WebSocket.OPEN) {
 	ws.isAlive = false;
 	ws.ping();