@yz-social/civildefense.io 4.5.28 → 5.0.0

package/public/javascripts/main.js

@@ -4,10 +4,13 @@ import { Int } from './translations.js';
 import { openDisplay } from './display.js';
 import { Agent} from './agent.js';
 import { P2PWebNetwork } from './p2pWebNetwork.js';
-import { getPointInCell } from './s2.js';
+import { getPointInCell, getSmallestCellSurrounding } from './s2.js';
 import { Alert, getShareableURL, share } from './alert.js';
+import { Hashtags } from './hashtags.js';
 import { map, showMessage, updateLocation, recenterMap } from './map.js';
-import './service-manager.js'; // Comment this out and kill service-workers for reload-to-get-latest behavior during development.
+import {postServiceMessage} from './service-manager.js'; // Comment this out and kill service-workers for reload-to-get-latest behavior during development.
+//const postServiceMessage = null;
+export {postServiceMessage};
 window.P2PWebNetwork = P2PWebNetwork;
 
 document.getElementById('appVersion').textContent = appVersion;
@@ -24,8 +27,6 @@ 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
   //console.log('resetInactivityTimer, networkPromise:', networkPromise);
-  document.body.classList.toggle('firstConversation', false);
-  document.body.classList.toggle('firstPublish', false);
   if (clearMessage) showMessage('');
   clearTimeout(inactivityTimer);
   clearInterval(reconnectCountdown);
@@ -58,7 +59,7 @@ function isWebView() { return /CriOS|(WebView|wv|(iPhone|iPod|iPad)(?!.*Safari))
 function isApple() { return navigator.platform.startsWith('Mac') || ['iPhone', 'iPad'].includes(navigator.platform); }
 function isMobile() { return navigator.userAgentData?.mobile || /iPhone|iPad|iPod|Mobile/.test(navigator.userAgent); }
 function isStandalone() { return window.matchMedia('(display-mode: standalone)').matches; }
-export function osName() { return navigator.userAgentData?.platform || navigator.userAgent.match(/Android/)?.[0] || navigator.platform; }
+export function osName() { return isApple() ? (isMobile() ? 'iOS' : 'OSX') : navigator.userAgentData?.platform || navigator.userAgent.match(/Android/)?.[0] || navigator.platform; }
 function mobilePlatformName() { return isMobile() && (isApple() ? 'iOS' : 'Android'); }
 function mobileVendorName() { return isMobile() && (isApple() ? 'Apple' : 'Android'); }
 function mobileBrowserName() { return isApple() ? 'Safari' : 'Chrome'; }
@@ -73,44 +74,54 @@ function browserName() {
 
 var showNotifications = document.getElementById('showNotifications');
 var showNotificationsLabel = document.getElementById('showNotificationsLabel');
-function disabledNotifications() { return localStorage.getItem('disabledNotifications'); }
-export function disableNotifications(force) { localStorage.setItem('disabledNotifications', force ? '1' : ''); }
-export function notificationsAllowed() { return (Notification?.permission === 'granted') && !disabledNotifications(); }
-function noteNotificationPermission(permission) {
+function notificationsRequested() { // Explicit choice by user in app, but might be currently denied by OS.
+  return !!localStorage.getItem('notificationsRequested');
+}
+export function notificationsAllowed() { // Combined result.
+  return postServiceMessage && (Notification?.permission === 'granted') && notificationsRequested();
+}
+let notificationsPreviouslyAllowed = notificationsAllowed();
+function noteNotificationPermission(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;
     showNotifications.indeterminate = true;
     showNotifications.toggleAttribute('disabled', true);
     showNotificationsLabel.innerHTML = `${mobileVendorName()} ${Int`does not support notifications on WebViews embedded in other programs. Please use CivilDefense.io in native`} ${mobileBrowserName()}.`;
-    return;
-  }
-  if (isMobile() && isApple() && !isStandalone()) {
+  } else if (isMobile() && isApple() && !isStandalone()) {
+    showNotifications.checked = false;
     showNotifications.indeterminate = true;
     showNotifications.toggleAttribute('disabled', true);
     showNotificationsLabel.innerHTML = `${Int`Apple only supports mobile notifications for web pages that have been`} <a href="https://www.google.com/search?q=iphone+install+web+page+to+home+screen" target="yz.sidebar">${Int`installed to the home screen`}</a>.`;
-    return;
-  }
-  switch (permission) {
-  case 'default':
-    showNotifications.indeterminate = true;
-    showNotifications.toggleAttribute('disabled', false);
-    showNotificationsLabel.innerHTML = Int`Enable notifications`;
-    break;
-  case 'granted':
-    showNotifications.checked = !disabledNotifications();
-    showNotifications.toggleAttribute('disabled', false);
-    showNotificationsLabel.innerHTML = Int`Allow notifications`;
-    break;
-  default:
-    showNotifications.checked = false;
-    showNotifications.toggleAttribute('disabled', true);
-    const isApp = isStandalone();
-    const search = isApp ?
-	  `https://www.google.com/search?q=${osName()}+open+app+settings` :
-	  `https://www.google.com/search?q=open+site+settings+${browserName() || `"${navigator.userAgent}"`}`;
-    const label = isApp ? `CivilDefense.io ${Int`app`}` : Int`browser site settings`;
-    showNotificationsLabel.innerHTML = `${Int`Permissions can be re-enabled through the`} <a href="${search}" target="yz.sidebar">${label}</a>.`;
-    break;
+  } else {
+    switch (permission) {
+    case 'default':
+      showNotifications.indeterminate = true;
+      showNotifications.toggleAttribute('disabled', false);
+      showNotificationsLabel.innerHTML = Int`Enable notifications`;
+      break;
+    case 'granted':
+      showNotifications.checked = notificationsRequested();
+      showNotifications.indeterminate = false;
+      showNotifications.toggleAttribute('disabled', false);
+      showNotificationsLabel.innerHTML = Int`Allow notifications`;
+      break;
+    default: // Permission is explicitly not granted.
+      showNotifications.checked = false;
+      showNotifications.indeterminate = false;
+      showNotifications.toggleAttribute('disabled', true);
+      const isApp = isStandalone();
+      const search = isApp ?
+	    `https://www.google.com/search?q=${osName()}+open+app+settings` :
+	    `https://www.google.com/search?q=open+site+settings+${browserName() || `"${navigator.userAgent}"`}`;
+      const label = isApp ? `CivilDefense.io ${Int`app`}` : Int`browser site settings`;
+      showNotificationsLabel.innerHTML = `${Int`Permissions can be re-enabled through the`} <a href="${search}" target="yz.sidebar">${label}</a>.`;
+      break;
+    }
   }
+  if (showNotifications.checked === notificationsPreviouslyAllowed) return;
+  notificationsPreviouslyAllowed = showNotifications.checked;
+  Alert.refreshPushSubscriptions();
 }
 clickTip(showNotifications.parentElement, Int`Enable local ${osName()} notifcations for map alerts, without going through any servers. Requires that the app be running.`, event => {
   resetInactivityTimer();
@@ -118,15 +129,23 @@ clickTip(showNotifications.parentElement, Int`Enable local ${osName()} notifcati
 });
 showNotifications.onchange = () => {
   if (window.Notification?.permission === 'granted') {
-    disableNotifications(!showNotifications.checked);
+    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();
+  Alert.closePopup();
+  Hashtags.closeSelector();
+  ['aboutContainer', 'updateContainer', 'correspondentContainer', 'qrContainer']
+    .forEach(tag => document.getElementById(tag).classList.toggle('hidden', true));
+}
 export function openAbout(event) {
   openDisplay('aboutContainer', event);
   noteNotificationPermission(window.Notification?.permission);
@@ -134,17 +153,6 @@ export function openAbout(event) {
 export function closeAbout() {
   document.getElementById('aboutContainer').classList.toggle('hidden', true);
 }
-clickTip('#aboutButton', Int`Information about this app, and options to change notifications or how you appear to others.`, event => { // open about
-  Alert.closePopup();
-  openAbout(event);
-});
-clickTip('#wipe', Int`Wipe from ${osName()} all personal data and source files for this app.`, async event => {
-  await networkPromise?.then(contact => contact.disconnect());
-  localStorage.clear();
-  await caches.keys().then(keys => Promise.all(keys.map(key => caches.delete(key))));
-  await navigator.serviceWorker.getRegistrations().then(registrations => Promise.all(registrations.map(r => r.unregister())));
-  window.location.replace('about/index.html');
-});
 document.getElementById('scriptChooser').onchange = event => { // Run a script module chosen by the user. e.g., for testing.
   const file = event.currentTarget.files[0];
   if (!file) return;
@@ -218,6 +226,7 @@ export let positionWatch;
 let subscribeOneShot;
 const goodPositionLabel = Int`Your Location`;
 
+export let lastCells = null;
 function initializeGeolocation(subscribe = false) { // Arrange to constantly updateLocation, but:
   // Arrange to constantly updateLocation when geolocation updates (or a default init if that's not possible).
   // Once updateLocation has been called, updateSubscriptions() if the subscribe arg is true.
@@ -248,6 +257,8 @@ function initializeGeolocation(subscribe = false) { // Arrange to constantly upd
 	zoom = 13;
 	[lat, lng] = [37.7749, -122.4194]; // San Fransisco
       }
+    } else {
+      lastCells = getSmallestCellSurrounding(lat, lng);
     }
     //console.log('initializeGeolocation updateLocation');
     updateLocation(lat, lng, zoom, positionLabel);
@@ -276,7 +287,7 @@ function initializeGeolocation(subscribe = false) { // Arrange to constantly upd
 	  delay(2e3).then(() => initMap());
 	} else {
 	  showMessage(Int`Unable to get location.`, 'error', error);
-	  delay(4e3).then(() => initializeGeolocation(subscribe));
+	  delay(2e3).then(() => initMap());
 	}
       } else {
 	showMessage(Int`No network connection.`, 'error');
@@ -320,7 +331,8 @@ async function initialize(event) { // Ensure there is a network promise and map,
       const {promise, resolve} = Promise.withResolvers();
       networkPromise = promise;
       console.log('Creating node.');
-      resolve(P2PWebNetwork.create({}));
+      Alert.clearPushData();
+      resolve(await P2PWebNetwork.create({pushPersistor: postServiceMessage && localStorage}));
       networkPromise.then(contact => {
 	globalThis.contact = contact; // For debugging.
 	// On leaving, we would like to copy stored data and politely say 'bye' (so others can clean up their connections). Alas:
@@ -366,11 +378,18 @@ async function initialize(event) { // Ensure there is a network promise and map,
 }
 document.addEventListener('visibilitychange', initialize);
 window.addEventListener('online', initialize);
+window.addEventListener("appinstalled", async () => {
+  // It turns out that the same browser that support this push the EXISTING browsing context into their own frame,
+  // rather than starting fresh. (Which makes some sense for having this event fire.)
+  // In such cases, we need to re-initialize stuff. We could go point by point, but for now, just hit everything.
+  location.reload();
+});
 
-const titleElement = document.querySelector('#aboutContainer h1');
-titleElement.textContent = Int([titleElement.textContent]);
-titleElement.textContent += ` @${location.hostname}`;
-document.querySelector('head > title').innerHTML = titleElement.textContent;
+const titleLabel = document.querySelector('#titleLabel');
+titleLabel.textContent = Int([titleLabel.textContent]);
+const titleHostname = document.querySelector('#titleHostname');
+titleHostname.textContent = ` @${location.hostname}`;
+document.querySelector('head > title').innerHTML = titleLabel.textContent + titleHostname.textContent;
 // Set up text for the browser language.
 function initText(selector, content = selector) {
   const element = document.querySelector(selector);
@@ -380,10 +399,6 @@ function initText(selector, content = selector) {
 initText('#aboutReport');
 initText('#aboutShared');
 initText('#aboutFade');
-initText('#aboutAnyone1');
-initText('#aboutAnyone2');
-initText('#aboutAnyone3');
-initText('#learnMore');
 initText('#version');
 initText('#checkForUpdates');
 initText('#downloadUpdates');
@@ -398,14 +413,33 @@ initText('#describePrivate2');
 initText('#describePublic');
 initText('#describeSystem');
 initText('#pickLabels');
-initText('#wipe');
 initText('.firstConversation .teach.correspondent');
 initText('.firstPublish .teach.correspondent');
 initText('.teach.share');
 initText('.teach.attach');
 initText('.teach.changeHashtag');
 
+clickTip('#aboutButton', Int`Information about this app, and options to change notifications or how you appear to others.`, event => { // open about
+  closeAll();
+  openAbout(event);
+});
+
+if (isStandalone()) {
+  document.querySelector('#wipe').textContent = Int`Installed`;
+} else {
+  initText('#wipe');
+  clickTip('#wipe', Int`Wipe from ${osName()} all personal data and source files for this app.`, async event => {
+    await networkPromise?.then(contact => contact.disconnect());
+    localStorage.clear();
+    await caches.keys().then(keys => Promise.all(keys.map(key => caches.delete(key))));
+    await navigator.serviceWorker.getRegistrations().then(registrations => Promise.all(registrations.map(r => r.unregister())));
+    window.location.replace('about/index.html');
+  });
+}
+
 tooltip('#learnMore', Int`Click to see more information in another tab about what you can do with this app and how it is resistant to tracking, censorship, and takedown.`);
-tooltip('#aboutAnyone2', Int`Click to see the source code and documentation for serving copies of this app in another tab.`);
+tooltip('#learnNotification', Int`Click to learn about receiving operating system notifications.`);
+tooltip('#learnIdentity', Int`Click to learn about how you can choose to label yourself and how to recognize other users.`);
+tooltip('#learnPWA', Int`Click to learn about installation, updates, and removal.`);
 
 initialize(false);

package/public/javascripts/map.js

@@ -3,6 +3,7 @@ import * as L from 'leaflet';
 import { Int } from './translations.js';
 import { consume } from './display.js';
 import { Agent } from './agent.js';
+import { networkPromise, closeAll } from './main.js';
 import { P2PWebNetwork } from './p2pWebNetwork.js';
 import { Alert, go } from './alert.js';
 import { resetInactivityTimer, tooltip } from './main.js';
@@ -73,7 +74,7 @@ export function updateLocation(lat, lng, zoom, positionLabel) { // initMap if ne
 
 export function recenterMap(event) {
   consume(event);
-  Alert.closePopup();
+  closeAll();
   const latLng = [lastLatitude, lastLongitude];
   map.flyTo(latLng);
 }
@@ -142,9 +143,10 @@ export function initMap(lat, lng, zoom, positionLabel) { // Set up appropriate z
     resetInactivityTimer();
     map.closePopup(yourLocation.getPopup());
   });
-  map.on('moveend', () => {
-    Alert.updateSubscriptions();
+  map.on('moveend', async () => {
+    await networkPromise;
     updateLocation(lastLatitude, lastLongitude); // Might now be within map.
+    Alert.updateSubscriptions();
   });
 
   // Add click event to note position

package/public/javascripts/p2pWebNetwork.js

@@ -25,6 +25,8 @@ export class P2PWebNetwork {
   static setSessionLocation = resolveSessionLocation;
   static sessionLocation = sessionLocationPromise;
   static async create({infoLogger = console.log, debugLogger,
+		       // Pass a Storage object to clear peristed push subscriptions, and persist current ones for next session.
+		       pushPersistor = null,
 		       location = this.sessionLocation,
 		       bridgeUrl = (globalThis.location && new URL(globalThis.location).searchParams.get('bridge')) ||
 		       globalThis.process?.env.BRIDGE_URL ||
@@ -47,7 +49,7 @@ export class P2PWebNetwork {
     });
     infoLogger ||= null;
     debugLogger ||= null;
-    Object.assign(network, {infoLogger, debugLogger, disconnector: disconnect, transport, nodeIdentity, peer});
+    Object.assign(network, {infoLogger, debugLogger, disconnector: disconnect, transport, nodeIdentity, peer, pushPersistor});
 
     network.info(`Created network node for kernel ${this.kernelVersion} region 0x${this.regionCode(location.lat, location.lng).toString(16)}.`);
     peer.onError(error => {
@@ -60,9 +62,30 @@ export class P2PWebNetwork {
     peer.onLog('error', (...rest) => network.info('ERROR', ...rest));
     const { peers, ms } = status;
     network.info(`Connected ${peers} connections through ${bridgeUrl} in ${ms.toLocaleString()} ms.`);
+    await network.resetPersisted();
     network.attached(network);
     return network;
   }
+  static pushPersistKey = 'lastPushed';
+  currentTopics = new Set();
+  pushPersist() { // Add/remove topics
+    if (!this.pushPersistor) return;
+    this.pushPersistor.setItem(this.constructor.pushPersistKey, JSON.stringify([this.nodeIdentity.id, ...this.currentTopics]));
+  }
+  async resetPersisted() { // Clears any sticky subscriptions in network and for browser's pushManager.
+    const {pushPersistor, peer} = this;
+    const lastPushed = pushPersistor && pushPersistor.getItem(this.constructor.pushPersistKey);
+    if (lastPushed) {
+      const [pushId, ...topics] = JSON.parse(lastPushed);
+      await Promise.all([
+	navigator.serviceWorker.ready
+	  .then(registration => registration.pushManager.getSubscription())
+	  .then(subscription => subscription?.unsubscribe()),
+	...topics.map(topic => peer.unsub(topic, {pushId}))
+      ]);
+      this.pushPersist();
+    }
+  }
   
   async disconnect(debugLogger = this.debugLogger) { // Politely close network connection.
     const health = this.peer.health();
@@ -179,7 +202,11 @@ export class P2PWebNetwork {
   // 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.
+  async subscribe({eventName, region, owner, since = 'all',
+		   handler,  // If truthy, associates the handler with topic. If falsy, removes all such handlers from topic.
+		   pushData, // If handler and truthy (a browser subscription object extended with keys), create a sticky subscription with that.
+		   pushId,   // If no handler and truthy (a previous session nodeId), then cancel that session's sticky subscription.
+		   pushPersist = this.pushPersistor}) {  // If non-null, call this.pushPersist to save sticky data for undoing next session. (See lastPushed in create().)
     await this.attachment;
     const topic = {region, name: eventName};
     if (owner) topic.owner = owner;
@@ -194,9 +221,15 @@ export class P2PWebNetwork {
 	}
 	handler({...message, agent: signerPubkey, tag: msgId, topic, ts});
       };
-      await this.peer.sub(topic, callback, {since});
+      const result = await this.peer.sub(topic, callback, {since, pushData});
+      this.currentTopics.add(topic); // topic rather than result.topicId. See https://github.com/axona-net/axona-protocol/issues/64
+      if (pushPersist) this?.pushPersist();
+      return result;
     } else {
-      await this.peer.unsub(topic, {});
+      const result = this.peer.unsub(topic, {pushId}); // See ticket ref'd above, altough topicId will have to be derived in this case.
+      this.currentTopics.delete(topic);
+      if (pushPersist) this?.pushPersist();
+      return result;
     }
   }
   static currentPublishIdentity = null;

package/public/javascripts/protocol.js

@@ -139,9 +139,9 @@ if (dht < 1) {
 	disconnect();
       },
       async sub(topic, handler, options) {
-	const result = await send('subscribe', topic, nodeTag, options);
-	handlers[result.id] = handler;
-	return result;
+	const { topicName, topicId, id, pushPubkey } = await send('subscribe', topic, nodeTag, options);
+	handlers[id] = handler;
+	return {topicName, topicId, id, pushPubkey, addPushData: data => send('track', topicName, nodeTag, data)};
       },
       async unsub(topic, options) {
 	const result = await send('unsubscribe', topic, nodeTag, options);