@yz-social/civildefense.io 4.4.1

package/public/javascripts/p2pWebNetwork.js

@@ -0,0 +1,245 @@
+import { v4 as uuidv4 } from 'uuid';
+import { AxonaPeer, AxonaDomain, NeuronNode, createNodeIdentity, createAuthorIdentity, geoCellId, geoCellCenter, WIRE_VERSION, KERNEL_VERSION } from '@axona/protocol';
+import { stringToBytes, bytesToString, publishChunkedBytes, receiveChunkedBytes } from '@axona/protocol/std';
+import { webTransport } from '@axona/protocol/transport/web/index.js';
+globalThis.RTCPeerConnection ||= await import('node-datachannel/polyfill').then(ndc => ndc.RTCPeerConnection);
+const { BigInt, URL, File, pica } = globalThis;
+
+/* Example:
+   const network = await P2PWebNetwork.create({lat: 37.468467587148844, lng: -122.25860595703126});
+   ....
+   await network.disconnect();
+ */
+
+const {promise:sessionRegionPromise, resolve:resolveSessionRegion} = Promise.withResolvers();
+
+export class P2PWebNetwork {
+  static wireVersion = WIRE_VERSION;
+  static kernelVersion = KERNEL_VERSION;
+  static createAuthorIdentity = createAuthorIdentity;
+  static setSessionRegion = resolveSessionRegion;
+  static sessionRegion = sessionRegionPromise;
+  static async create({infoLogger = console.log, debugLogger,
+		       region, identity, bridgeUrl = 'wss://bridge.axona.net',
+		       synapseCount = 4, timeoutMs = 10e3} = {}) {
+    // Promise a ready-to-use network peer.
+    // Complex region/identity behavior: Must pass either identity or region (either can be a promise), or will wait for setSessionRegion() to be called.
+    if (!identity) region ||= this.canonicalizeRegion(await (region || this.sessionRegion));
+    identity ||= createNodeIdentity(region);
+    identity = await identity;
+    region ||= identity.region;
+
+    const transport = webTransport({bridgeUrl, identity});
+    const node = new NeuronNode({lat: region.lat, lng: region.lng, id: BigInt('0x' + identity.id)});
+    node.transport = transport; // FIXME: pass in to constructor?
+    const domain   = new AxonaDomain({ k: 20 }); // FIXME: can't this be defaulted in AxonaPeer?
+    const peer = new  AxonaPeer({domain, node, identity, transport});
+
+    const network = new this();
+    Object.assign(network, {infoLogger, debugLogger, identity, transport, node, peer});
+    network.resetStatePromises();
+    network.info('Created network node for kernel', this.kernelVersion);
+    await network.connect({synapseCount, timeoutMs});
+    return network;
+  }
+  
+  async connect({synapseCount = 4, timeoutMs = 10e3} = {}) {
+    // Returned promise resolves when ready for use. Can be cycled through disconnect()/connect().
+    await this.transport.start(this.identity.id);
+    await this.join();
+    this.debug('Joined', this.health().synaptomeSize, 'connections.');
+    if (parseInt(this.constructor.kernelVersion) < 4) {
+      const t0 = Date.now();
+      while (Date.now() - t0 < timeoutMs) {
+	const size = this.synaptomeSize;
+	if (size >= synapseCount) break;
+	await this.constructor.delay(200);
+      }
+    } else {
+      await this.peer.ready({ minPeers: synapseCount, timeoutMs });
+    }
+    this.info('Connected', this.health().synaptomeSize, 'connections.');
+    this.attached(this);
+    return this;
+  }
+  async disconnect() { // Politely close network connection.
+    const health = this.health();
+    await this.leave();
+    this.info(`disconnected with ${health.peers.length} connections and ${health.axonRoles.length} axons.`);
+    await this.stop();
+    this.resetStatePromises();
+  }
+  async replicateStorage() { // Let the network know that we might go away without further notice.
+    // FIXME. It would be great if we could remove ourselves from any non-leaf positions in the Axon, but stay subscribed.
+  }
+  fastDisconnect() { // Synchronous attempt to be polite to those connected.
+    this.leave(); // Execution is asynchronous. Will not finish -- or perhaps even really start -- within the call.
+  }
+
+  async chunkifyString({string, region, signWith = this.constructor.currentPublishIdentity, owner = signWith.authorId}) {
+    // Publish string and answer an identifier that can be used to re-assemble.
+    if (!string.length) throw new Error(`Cannot chunkify empty string '${string}.`);
+    const topic = {name: uuidv4(), region, owner};
+    const data = await publishChunkedBytes(this.peer, stringToBytes(string), {topic, signWith});
+    return data.topic;
+  }
+  async assembleChunkedString(topic) { // Promise the string that was chunkified to topic.
+    const data = await receiveChunkedBytes(this.peer, topic, {/*, onProgress: console.log*/});
+    return bytesToString(data.bytes);
+  }
+
+  static getCanvas(file) { // Promise a Canvas from a File of type image/*.
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      img.onload = () => {
+	canvas.width = img.width;
+	canvas.height = img.height;
+	ctx.drawImage(img, 0, 0);
+	URL.revokeObjectURL(img.src);
+	resolve(canvas);
+      };
+      img.onerror = reject;
+      img.src = URL.createObjectURL(file);
+    });
+  }
+  static  async downsampledBlob({blob, outputType = 'image/jpeg', maxDimension = 1024}) {
+    // Promise a reasonably sized Blob (or File) for a given Blob of type image/*, else blob unchanged.
+    if (!blob.type.startsWith('image/')) return blob;
+
+    let sizedWidth, sizedHeight;  // Largest will be 1024, preserving aspect ratio.
+    const from = await this.getCanvas(blob);
+    const {width, height} = from;
+    if (width > height) {
+      sizedWidth = maxDimension;
+      sizedHeight = Math.round(maxDimension * height/width);
+    } else {
+      sizedHeight = maxDimension;
+      sizedWidth = Math.round(maxDimension * width/height);
+    }
+    if ((blob.type === outputType) && (sizedWidth >= width)) return blob;
+
+    const resizer = pica();
+    const to = document.createElement('canvas');
+    to.width = sizedWidth;
+    to.height = sizedHeight;
+    const buffer = await resizer.resize(from, to);
+    outputType ||= blob.type;
+    let result = await resizer.toBlob(buffer, outputType, 0.90);
+    if (blob.name) { // Answer a File with original name, but with extension matching result type.
+      let {name} = blob;
+      const parts = name.split('.');
+      const type = result.type;
+      parts[parts.length - 1] = type.slice('image/'.length);
+      name = parts.join('.');
+      result = new File([result], name, {type});
+    }
+    return result;
+  }
+  static u82dataURL(u8, mime) { // Answer a dataURL from the Uint8Array and mime type string.
+    return `data:${mime};base64,${u8.toBase64()}`;
+  }
+  static async blob2dataURL(blob) { // Promise a dataURL preserving mime type (but not File name, if any).
+    const buffer = await blob.arrayBuffer();
+    const u8 = new Uint8Array(buffer);
+    return this.u82dataURL(u8, blob.type);
+  }
+  static async dataURL2blob(dataURL, filename='') { // Promise a Blob.
+    const res = await fetch(dataURL);
+    const blob = await res.blob();
+    if (!filename) return blob;
+    return new File([blob], filename, {type: blob.type});
+  }
+  async chunkifyBlob({blob, region, signWith = this.constructor.currentPublishIdentity, owner = signWith.authorId, maxDimension = 1024, ...rest}) {
+    // Publish Blob (or File) and answer an identifier that can be used to re-assemble.
+    if (!blob.size) throw new Error(`Cannot chunkify empty Blob.`);
+    if (maxDimension) blob = await this.constructor.downsampledBlob({blob, maxDimension});
+    const {type:mime, name} = blob;
+    const topic = {name: uuidv4(), region, owner};
+    const buffer = await blob.arrayBuffer();
+    const u8 = new Uint8Array(buffer);
+    console.log('blob', blob.size, u8.length);
+    const data = await publishChunkedBytes(this.peer, u8, {topic, signWith, mime, name, ...rest});
+    return data.topic;
+  }
+  async assembleChunkedDataURL(topic) { // Promise {bytes, mime, name, dataURL} that was chunkified to topic.
+    const data = await receiveChunkedBytes(this.peer, topic, {/*, onProgress: console.log*/});
+    // Using dataURL is not terribly efficient, but it is convenient, because formatReplies can return HTML strings with all the data in them,
+    // instead of, e.g., needing javascript to later set properties of elements to createObjectURL of a Blob.
+    data.dataURL = this.constructor.u82dataURL(data.bytes, data.mime);
+    return data;
+  }
+
+  // The methods publish/subscribe map from the original civildefense-over-kdht API to Axona, and could be rewritten in the apps.
+  // But since we needed this class anyway, it was easiest to retain them.
+  // Besides, I don't like to see abbreviations in API names.
+  async subscribe({eventName, region, owner, since = 'all', handler}) { // Assign handler for eventName, or remove any handler if falsy.
+    await this.attachment;
+    const topic = {region, name: eventName};
+    if (owner) topic.owner = owner;
+    if (handler) {
+      const callback = async envelope => {
+	const {message, deleted, msgId, signerPubkey, topic, ts} = envelope;
+	//console.log('fired', {msgId, topic, ts, signerPubkey, deleted, message});
+	if (deleted) {
+	  handler({subject: msgId, payload: null, agent: signerPubkey, topic, ts}); // fixme remove topic, ts here and below.
+	  return;
+	}
+	handler({...message, agent: signerPubkey, subject: msgId, topic, ts});
+      };
+      await this.peer.sub(topic, callback, {since});
+    } else {
+      this.peer.unsub(topic, {});
+    }
+  }
+  static currentPublishIdentity = null;
+  async publish({eventName, region, owner, signWith = this.constructor.currentPublishIdentity, issuedTime = Date.now(), subject, payload, ...rest}) {
+    // Publish data to subscribers of eventName.
+    await this.attachment; // Get connected.
+    const topic = {region, name: eventName};
+    if (owner) topic.owner = owner;
+    const options = {signWith};
+    //console.log({topic, subject, payload, issuedTime, rest, signWith});
+    if (payload) return await this.peer.pub(topic, {issuedTime, payload, ...rest}, options);
+    // The next would not normally happen, but until since:'latest' works, we need a way to send a null payload and have the handler delete the entry.
+    if (!subject) return await this.peer.pub(topic, {issuedTime, payload, ...rest}, options);
+    return await this.peer.kill(topic, subject, options);
+  }
+
+  // Mostly internal stuff.
+  static regionCode(lat, lng) { // Answer containing region code.
+    return geoCellId(lat, lng);
+  }
+  static delay(ms, result) { // Promise result after ms milliseconds.
+    return new Promise(resolve => setTimeout(resolve, ms, result));
+  }
+  resetStatePromises() { // Fire any existing detach(), and assign new promises and resolvers for attachment and detachment.
+    const existingDetachedResolver = this.detached;
+    const {promise:attachment, resolve:attached} = Promise.withResolvers();
+    const {promise:detachment, resolve:detached} = Promise.withResolvers();
+    Object.assign(this, {attachment, detachment, attached, detached});
+    existingDetachedResolver?.();
+  }
+  static canonicalizeRegion(lat, lng) {
+    // Answer a {lat, lng} that is the center of a top-level Axona region containing the given {lat, lng}.
+    // E.g., a precise location gets anonymized to containing top-level cell center.
+    return geoCellCenter(geoCellId(lat, lng));
+  }
+  get synaptomeSize() { // Safely answer the number of connections.
+    return this.node.synaptome?.size ?? 0;
+  }
+  // TODO: Integrate with AxonaPeer's complex logging.
+  debug(...rest) { // Add debug logspam.
+    this.debugLogger?.(this.identity.id, ...rest);
+  }
+  info(...rest) { // Add debug logspam.
+    (this.infoLogger || this.debugLogger)?.(this.identity.id, ...rest);
+  }
+}
+export default P2PWebNetwork;
+
+// For now, we want to override publish and subscribe, but that conflicts with internal messages on AxonaPeer.
+// Thus P2PWebNetwork has an AxonaPeer, instead of inheriting from it. And thus we need forwarding messages.
+['join', 'leave', 'stop', 'health', 'host', 'unhost']
+  .forEach(methodName => P2PWebNetwork.prototype[methodName] = function (...rest) {return this.peer[methodName](...rest);});

package/public/javascripts/s2.js

@@ -0,0 +1,77 @@
+import { s2 } from 's2js';
+const { cellid, LatLng, Point, Cell, Cap, RegionCoverer } = s2;
+
+// s2 defines non-overlapping cells that completely cover the globe, at several different levels of cell-size.
+// Each cell, at each level, has its own unique id, which we use a pub/sub key.
+// Here we work with only the 0 to MAX_LEVEL largest levels, where MAX_LEVEL is the smallest size.
+//
+// When publishing, we publish to each s2 key that identifies a cell within our levels that contains the user-selected point.
+
+// Meanwhile as the user changes the area being shown, we subscribe to whatever cells we need in order to cover the display
+// area without overlapping cells.
+
+export const MIN_LEVEL = 2; // Corresponds to the top level Axona regions.
+const MAX_S2_LEVEL = 30; // The leaf level that Cell.fromPoint operates at.
+const MAX_MAP_LEVEL = 17; // The max level that findCoverCellsByCenterAndRadius will use on our maps.
+
+const EARTH_RADIUS_METERS = 6371e3;
+
+export function getPointInCell(cellId) { // answer [lat, lng] in degrees.
+  let {lat, lng} = s2.cellid.latLng(cellId);
+  const degrees = 180 / Math.PI;
+  lat *= degrees;
+  lng *= degrees;
+  return [lat, lng];
+}
+
+// Return a list of the cell ids that contain the point.
+export function getContainingCells(lat, lng) {
+  const userLatLng = LatLng.fromDegrees(lat, lng);
+  const userPt = Point.fromLatLng(userLatLng);
+  // Get leaf-level CellId (level 30)
+  const userLocCellId = Cell.fromPoint(userPt).id; // This is at level 30.
+  let cells = Array(MAX_S2_LEVEL);
+  for (let level = 0; level <= MAX_S2_LEVEL; level++) { // This would be more efficient going backwards using immediateParent, but who cares.
+    cells[level] = cellid.parent(userLocCellId, level);
+  }
+  return cells.slice(MIN_LEVEL, MAX_MAP_LEVEL + 1); // We can only make use between Axona region size and the smallest region our maps subscribe to.
+}
+
+// Return a list of cell ids that covers a circle specified by a center and a point on that circle, without overlapped cells.
+export function findCoverCellsByCenterAndPoint(centerLat, centerLng, pointLat, pointLng) {
+  // TODO: Does it make sense to do this by the actual borders shown, rather than by the length of the half-diagonal?
+  const center = Point.fromLatLng(LatLng.fromDegrees(centerLat, centerLng));
+  const point = Point.fromLatLng(LatLng.fromDegrees(pointLat, pointLng));
+  const distanceAngle = center.distance(point);
+  const interestRadiusMeters = distanceAngle * EARTH_RADIUS_METERS;
+  return findCoverCellsByCenterAndRadius(centerLat, centerLng, interestRadiusMeters);
+}
+
+// Return a list of cell ids that covers interestRadiusMeters around latitude/longitude, without overlapped cells.
+export function findCoverCellsByCenterAndRadius(lat, lng, interestRadiusMeters) {
+  const point = Point.fromLatLng(LatLng.fromDegrees(lat, lng));
+
+  // replicating key parts of Cap.cellUnionBound():
+  // Find the maximum (i.e., finest-grained) level such that the cap contains at
+  // most [ael: at least??] one cell vertex and such that CellID.AppendVertexNeighbors() can be called.
+  const findLevel = radius => {
+    let levelForRadius = MAX_S2_LEVEL;
+    const radiusAngle = radius / EARTH_RADIUS_METERS;
+    if (radiusAngle > 0) {
+      const deriv = 2 * Math.SQRT2 / 3;
+      levelForRadius = Math.floor(Math.log2(deriv / radiusAngle));
+      if (levelForRadius > MAX_S2_LEVEL) levelForRadius = MAX_S2_LEVEL;
+      if (levelForRadius < 0) levelForRadius = 0;
+    }
+    return levelForRadius;
+  };
+  const levelForRadius = findLevel(interestRadiusMeters); // - 1; // as seen in cellUnionBound: go one level bigger
+
+  const minLevel = Math.max(MIN_LEVEL, levelForRadius - 1);
+  const maxLevel = Math.max(MIN_LEVEL, levelForRadius + 2);
+  const rc = new RegionCoverer({ minLevel, maxLevel, maxCells: 9 }); // Will exceed maxCells as needed to obey minLevel.
+  const r = Cap.fromCenterAngle(point, interestRadiusMeters / EARTH_RADIUS_METERS);
+  return rc.covering(r);
+}
+
+

package/public/javascripts/scripting.js

@@ -0,0 +1,112 @@
+// A module with utilities for scripting.
+
+const { SpeechSynthesisUtterance, speechSynthesis} = window;
+import { v4 as uuidv4 } from 'uuid';
+import { Node } from '@yz-social/kdht';
+import { getContainingCells } from './s2.js';
+import { delay, positionWatch, networkPromise, disableNotifications } from './main.js';
+import { Marker, map, updateLocation, updateSubscriptions, makeEventName, showMessage } from './map.js';
+import { Hashtags } from './hashtags.js';
+import { Agent } from './agent.js';
+
+function toggle(canonicalTag, kill = false) { // Toggle subscription of specified hashtag (without emoji). Return a promise that resolves after a beat.
+  const label = Hashtags.canonical2extended[canonicalTag];
+  const chip = Hashtags.getChip(label);
+  if (kill) return Hashtags.remove(chip, true);
+  chip.selected = !chip.selected;
+  Hashtags.toggleChip(chip);  
+  Hashtags.onchange();
+  return delay();
+}
+async function flyTo(center, zoom) { // Fly map to specified position/zoom, and return a promise that resolves when complete, with time to resubscribe.
+  const {promise:promiseMove, resolve:resolveMove} = Promise.withResolvers();
+  const {promise:promiseZoom, resolve:resolveZoom} = Promise.withResolvers();
+  map.on('moveend', resolveMove);
+  map.on('zoomend', resolveZoom);
+  map.flyTo(center, zoom);
+  await Promise.all([promiseMove, promiseZoom]);
+  map.off('moveend', resolveMove);
+  map.off('zoomend', resolveZoom);
+  await delay();
+}
+async function pubSome({payload, act, hashtag, subject, issuedTime, lat = payload.lat, lng = payload.lng}) { // promise to publish to cells containing lat/lng.
+  const contact = await networkPromise; 
+  const cells = getContainingCells(lat, lng);
+  for (const cell of cells) {
+    const eventName = makeEventName(cell, hashtag);
+    const key = await Node.key(eventName);
+    await contact.publish({eventName, key, subject, payload, issuedTime, hashtag, act, immediate: true});
+  }
+}
+async function killSome(tag) { // Kill all existing pub in-scope by tag.
+  tag = Hashtags.canonical2extended[tag] || tag;
+  const markers = Object.values(Marker.markers);
+  const contact = await networkPromise;
+  for (const wrapper of markers) {
+    if (wrapper.hashtag !== tag) continue;
+    const {act, hashtag, subject, replies, lat, lng} = wrapper;
+    for (const {act:replier, subject:reply} of replies)
+      await contact.publish({eventName: subject, payload: null, act:replier, hashtag, subject: reply});
+    await pubSome({payload: null, lat, lng, act, hashtag, subject});
+  };
+}
+
+async function drop({lat, lng,
+		     tag = Hashtags.getPublish(),
+		     user = Agent.tag,
+		     open = false,
+		     issuedTime = Date.now()
+		    }) { // Drop a pin labeled by tag (which can be canonical) at position, and return a promise that resolves to subject after a beat.
+  const act = user;
+  const hashtag = Hashtags.canonical2extended[tag] || tag;
+  const subject  = uuidv4();
+  const payload = {lat, lng};
+  await pubSome({payload, act, hashtag, subject, issuedTime});
+  if (open) Marker.openPopup(subject);
+  return delay(800, subject);
+}
+async function gotFile() { // Return a promise that resolves one tick after the file chooser is changed on the current popup (which must be already open).
+  // Opening the file chooser must be done manually by the user.
+  // The intended usage for scripting is that the recording will capture the user clicking the attachment button to open the chooser.
+  const popupElement = map._popup.getElement();
+  const fileChooser = popupElement.querySelector('input[type="file"]');
+  const {promise, resolve} = Promise.withResolvers();
+  fileChooser.addEventListener('change', resolve);
+  await promise;
+  fileChooser.removeEventListener('change', resolve);
+}
+async function type(text, input) { // Select input text box in the currently already open popup, enter text, click send, and promise a beat.
+  let popupElement;
+  if (!input) {
+    popupElement = map._popup.getElement();
+    input = popupElement.querySelector('.reply-input');
+  }
+  input.focus();
+  await delay(3200);
+  const interval = 100;
+  for (let index = 0; index < text.length; index++) {
+    input.value += text[index];
+    input.dispatchEvent(new Event('input', { bubbles: true, cancelable: true })); // Trigger input handler to resize and enable reply button.
+    await delay(interval);
+  }
+  if (popupElement) popupElement.querySelector('md-filled-icon-button').click();
+  else input.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+  await delay();
+}
+function addShim() { // Drop a shim over the scene, and return it.
+  const shim = document.createElement('div');
+  shim.style = "position: absolute; top: 0; width: 100vw; height: 100vh; z-index: 1200; background: black;";
+  document.body.append(shim);
+  return shim;
+}
+
+function announce(text) { // Speak text and return a promise that resolves when done.
+  console.log(text);
+  let utterance = new SpeechSynthesisUtterance(text);
+  const {promise, resolve} = Promise.withResolvers();
+  utterance.onend = resolve;
+  speechSynthesis.speak(utterance);
+  return promise;
+}
+
+export { uuidv4, Node, getContainingCells,  delay, positionWatch, networkPromise, disableNotifications, Marker, map, updateLocation, updateSubscriptions, makeEventName, showMessage, Hashtags, Agent, toggle, flyTo, pubSome, killSome, drop, gotFile, type, addShim, announce };

package/public/javascripts/service-manager.js

@@ -0,0 +1,149 @@
+const { Request, Response, URL, localStorage, BroadcastChannel } = globalThis;
+import { appVersion } from './versions.js';
+import { resetInactivityTimer, clickTip } from './main.js';
+import { openDisplay } from './display.js';
+import { go } from './map.js';
+import { Int } from './translations.js';
+
+/*
+  Registers and interacts with the service worker, to provide:
+
+  cached sources with an upgrade path
+  -----------------------------------
+  key behaviors:
+  1. New code won't be used (even on refresh) until the user agrees.
+  2. Even a refreshed page does not require the web server. (Access to the DHT must still be provded. That's not handled here.)
+  3. Any and all tabs are updated to new version.
+
+  We use the browser's service worker update mechanism to allow the user to control caching and reload with the right version.
+
+  The service WORKER does NOT fill any cache on installation, nor delete old on activation (as many service worker examples do).
+  Instead, if the service MANAGER sees that the appVersion cache does not exist yet, it explicitly fills it with the host's current source.
+
+  The service WORKER handles requests from ANY cache version, rather than just serviceVersion, but STORES missing items in serviceVersion.
+  Thus the explicitly filled source is from the one-time filling by the service MANAGER.
+  Other requests on the web (such as map tiles) are cached to serviceVersion, responded from there, and do not get updated until cache is cleared or new app version installed.
+
+  New service workers on host are picked up and installed, either by the user pressing a button that asks the browser to try to
+  update the service worker registration (by looking for a new version on host), or by the browser doing this automatically every 24 hours.
+  Either way, it still responds with any resources that have already been cached, including all old source and external resources that have already been cached.
+  New external resources that have not yet been cached (e.g. map tiles for areas not yet visited) are fetched and cached under new serviceVersion going forward.
+  The user is informed (in About and in a popup), and we persist a marker in storage in case the user reloads (which would not otherwise see a new serviceVersion
+  because it already has it).
+
+  When user says to update, the service MANAGER deletes the appVersion cache (so that next step doesn't use old data), explicitly fills the new serviceVersion cache,
+  and then we reload with new v=version parameter.
+  This busts the browser's caching so that it reloads index.html from the new cache.
+  (The v parameter is stripped on load so that it doesn't hang around. Other parameters are not affected.)
+  The service WORKER responds with the new cached source, and external resources have been pulled no earlier than the host's service worker release.
+  We also broadcast to any other open tabs at the same host, so that they reload to the new v as well.
+
+  When caching an explicit list of files for use going forward, that list is defined in the new/current service worker, not the stale/cached service manager.
+  
+  If the user clears cache and reloads (even if there is no source/worker update, or a stale worker), they get the currently hosted versions.
+*/
+
+let resolveCached;
+async function cacheSource(version) {
+  console.log(`service-manager ${appVersion} requesting service-worker to cache source in ${version}.`);
+  const {promise, resolve} = Promise.withResolvers();
+  resolveCached = resolve;
+  const registration = await navigator.serviceWorker.ready;
+  registration.active.postMessage({method: 'cacheSource', params: version});
+  await promise;
+  console.log(`source ${version} is cached.`);
+}
+
+const checkButton = document.getElementById('checkForUpdates');
+const updateText = document.getElementById('updateStatus');
+const downloadButton = document.getElementById('downloadUpdates');
+const downloadButton2 = document.getElementById('downloadUpdates2');
+
+function getServiceVersion(registration) { // Ask the service worker to send back it's version, which will trigger a compare.
+  console.log('requesting service-worker version');
+  registration.active.postMessage({method: 'version', params: appVersion});
+}
+function newVersionAvailable(newVersion) {
+  // Set up all the buttons and displays in case the user declines the popup,
+  // and then open the popup.
+  checkButton.classList.toggle('hidden', true);
+  downloadButton.classList.toggle('hidden', false);
+  updateText.textContent = `${Int`Version`} ${newVersion} ${Int`available`}.`;
+  openDisplay('updateContainer');
+}
+async function installUpdate(newVersion) {
+  await caches.delete(appVersion); // Must be before cacheSource, or we'll just recache the same files!
+  await cacheSource(newVersion);
+  // Reload, but convince all browsers to re-"fetch" (through the new service worker that is now running).
+  const url = new URL(location.href);
+  url.searchParams.set('v', newVersion); // Preserving any other searchParams.
+  // For any other tabs in THIS browser:
+  new BroadcastChannel('site_control').postMessage({method: 'reload', params: url.href});
+  window.location.assign(url.href);
+}
+
+// First time or after clearing cache, cache latest version of app.
+if (!(await caches.has(appVersion))) cacheSource(appVersion);
+
+await navigator.serviceWorker
+  .register("/service-worker.js", {updateViaCache: 'none', type: 'module'})
+  .then(registration => {
+    let serviceVersion;
+    // No need to reset button/status on click, because we will be reloading.
+    const installText = Int`Update to a new version of this app.`;
+    clickTip(downloadButton, installText, () => installUpdate(serviceVersion));
+    clickTip(downloadButton2, installText, () => event => {
+      event.stopPropagation();
+      installUpdate(serviceVersion);
+    });
+    clickTip(checkButton, Int`Check to see if a new version of the app is available.`, async event => {
+      resetInactivityTimer();
+      event.stopPropagation();
+      await registration.update();
+      updateText.textContent = `${Int`No update at`} ${new Date().toLocaleString()}.`;
+    });
+    registration.onupdatefound = () => { // A new service worker has been installed because of a service worker script change.
+      const newWorker = registration.installing;
+      console.log('updatefound', newWorker.state, navigator.serviceWorker, navigator.serviceWorker.controller);
+      newWorker.onstatechange = () => {
+	console.log('statechange', newWorker.state, navigator.serviceWorker, navigator.serviceWorker.controller);
+	// We don't want to nag/confuse the user when installing fresh/first-time. There will not be a controller that time.
+	// if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+	//   getServiceVersion(registration);
+	// }
+      };
+    };
+    navigator.serviceWorker.addEventListener('controllerchange', () => {
+      console.log('controllerchange',  navigator.serviceWorker, navigator.serviceWorker.controller);
+      if (!navigator.serviceWorker.controller) return;
+      getServiceVersion(registration);
+    });
+    // addEventListener, allowing other code to listen for other messages.
+    navigator.serviceWorker.addEventListener('message', async event => {
+      const {method, params} = event.data;
+      switch (method) {
+      case 'version':
+	console.log('Comparing service worker version', params, 'to app version', appVersion);
+	if (params === appVersion) {
+	  //console.log('Checked version', appVersion);
+	} else {
+	  serviceVersion = params;
+	  newVersionAvailable(params);
+	}
+	break;
+      case 'cached':
+	resolveCached?.(params);
+	break;
+      case 'go':
+	go(params);
+	break;
+      default:
+	console.error('Unrecognized message from service worker', event.data);
+      }
+    });
+    navigator.serviceWorker.ready.then(getServiceVersion);
+  });
+new BroadcastChannel('site_control').onmessage = event => {
+  const {method, params} = event.data;
+  if (method === 'reload') window.location.assign(params);
+};