Warn about usage of very outdated server/desktop versions

We're no longer testing anything against these old versions, and there's
lots of major features they won't support. They will _probably_ work,
but the risk of issues is high, and it's been many years since they were
released (desktop v1.1.0 was January 2021) so it would be good to gently
nudge any people still using them to update.

Author: pimterry

package.json

@@ -1,6 +1,5 @@
 {
   "name": "httptoolkit-ui",
-  "version": "0.1.0",
   "private": true,
   "description": "Beautiful, cross-platform & open-source HTTP(S) debugging proxy, analyzer & client.",
   "main": "dist/main.js",
@@ -35,7 +34,8 @@
   "author": "Tim Perry <tim@httptoolkit.com>",
   "license": "AGPL-3.0-or-later",
   "runtimeDependencies": {
-    "httptoolkit-server": "^0.1.18 || ^1.0.0"
+    "httptoolkit-server": ">=1.0.0",
+    "httptoolkit-desktop": ">=1.1.0"
   },
   "dependencies": {
     "@ethersproject/abi": "^5.7.0",

src/index.tsx

@@ -35,6 +35,7 @@ import { SendStore } from './model/send/send-store';
 import { serverVersion, lastServerVersion, UI_VERSION } from './services/service-versions';
 import {
     attemptServerUpdate,
+    checkForOutdatedComponents,
     runBackgroundUpdates
 } from './services/update-management';
 
@@ -52,6 +53,7 @@ mobx.configure({ enforceActions: 'observed' });
 // background updates & instant offline startup. We slightly delay this to avoid
 // competing for bandwidth/CPU/etc with startup on slow connections.
 delay(5000).then(runBackgroundUpdates);
+checkForOutdatedComponents();
 
 const accountStore = new AccountStore(
     () => appHistory.navigate('/settings')

src/services/service-versions.ts

@@ -24,9 +24,6 @@ export const serverVersion = lazyObservablePromise(() =>
         })
 );
 
-// Notable desktop versions:
-export const DESKTOP_HEADER_LIMIT_CONFIGURABLE = "^0.1.20 || ^1.0.0";
-
 // The last known service version - immediately available (though still async),
 // but reports the previous startup version, not necessarily the latest one.
 // May be undefined if the app has never yet started successfully.
@@ -45,6 +42,9 @@ export function versionSatisfies(version: string | Error | undefined, range: str
         semver.satisfies(version, range, { includePrerelease: true });
 }
 
+// Notable desktop versions:
+export const DESKTOP_HEADER_LIMIT_CONFIGURABLE = "^0.1.20 || ^1.0.0";
+
 // Notable server versions:
 export const PORT_RANGE_SERVER_RANGE = '^0.1.14 || ^1.0.0';
 export const MOCK_SERVER_RANGE = '^0.1.21 || ^1.0.0';

src/services/ui-update-worker.ts

@@ -8,7 +8,7 @@ import { PrecacheController } from 'workbox-precaching'
 import { ExpirationPlugin } from 'workbox-expiration';
 import { StaleWhileRevalidate, NetworkOnly } from 'workbox-strategies';
 
-import * as packageMetadata from '../../package.json';
+import packageMetadata from '../../package.json';
 import { getServerVersion } from './server-api';
 import { lastServerVersion, versionSatisfies } from './service-versions';
 import { delay } from '../util/promise';

src/services/update-management.ts

@@ -1,9 +1,14 @@
+import dedent from 'dedent';
+
 import registerUpdateWorker, {
     ServiceWorkerNoSupportError
 } from 'service-worker-loader!./ui-update-worker';
 
 import { triggerServerUpdate } from './server-api';
 
+import packageMetadata from '../../package.json';
+import { desktopVersion, serverVersion, versionSatisfies } from './service-versions';
+
 export const attemptServerUpdate = () =>
     triggerServerUpdate().catch(console.warn);
 
@@ -31,4 +36,45 @@ export async function runBackgroundUpdates() {
         }
         throw e;
     }
+}
+
+function showPleaseUpdateMessage() {
+    alert(
+        "This HTTP Toolkit installation is now very outdated, and this version is " +
+        "no longer supported." +
+        "\n\n" +
+        "You can continue to use HTTP Toolkit, but you may experience issues & " +
+        "instability." +
+        "\n\n" +
+        "Please update to the latest version from httptoolkit.com when you can, " +
+        "to access the many new features, bug fixes & performance improvements " +
+        "available there."
+    );
+}
+
+export function checkForOutdatedComponents() {
+    const { runtimeDependencies } = packageMetadata;
+
+    let hasShownUpdateMessage = false;
+
+    serverVersion.then((serverVersion) => {
+        if (versionSatisfies(serverVersion, runtimeDependencies['httptoolkit-server'])) return;
+        if (hasShownUpdateMessage) return;
+
+        // This one should be _very_ rare, since the server always auto-updates - it'll only
+        // affect systems where that is failing for some reason, for years.
+
+        showPleaseUpdateMessage();
+        hasShownUpdateMessage = true;
+    }).catch(() => {});
+
+    desktopVersion.then((desktopVersion) => {
+        if (versionSatisfies(desktopVersion, runtimeDependencies['httptoolkit-desktop'])) return;
+        if (hasShownUpdateMessage) return;
+
+        // This will trigger for a few users, but not many - below 0.2% of weekly users right now
+
+        showPleaseUpdateMessage();
+        hasShownUpdateMessage = true;
+    }).catch(() => {});
 }