Use version.txt to detect updates on iOS

CHANGELOG.md

@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [1.136.0] - Not released
+### Fixed
+- iOS has strange behavior with service workers updates, so use the version file
+  method instead.
 
 ## [1.135.0] - 2024-10-08
 ### Added

src/components/app-updated.jsx

@@ -4,6 +4,7 @@ import { useRegisterSW } from 'virtual:pwa-register/react';
 
 import { useEvent } from 'react-use-event-hook';
 import { useState } from 'react';
+import { isIos } from '../utils/platform-detection';
 import styles from './app-updated.module.scss';
 import { ButtonLink } from './button-link';
 
@@ -18,15 +19,17 @@ export function AppUpdated() {
     updateServiceWorker,
   } = useRegisterSW({
     onRegistered(r) {
-      if (r) {
+      // iOS has strange behavior with service workers updates, so we will use
+      // the old-fashion way (via the version file) here
+      if (r && !isIos) {
         setSwRegistered(true);
         setInterval(() => r.update(), intervalSec * 1000);
       }
     },
   });
 
   const reloadPage = useEvent(() => {
-    if (workerUpdated) {
+    if (workerUpdated && !isIos) {
       updateServiceWorker();
       // Sometimes the updateServiceWorker doesn't refresh the page, so reload
       // it manually after some time

src/startup.js

@@ -1,6 +1,7 @@
 // This file is compiled separately. It is inserted directly into index.html.
 import base from '../config/default';
 import { merge } from '../config/lib/merge';
+import { isIos, isWindows } from './utils/platform-detection';
 window.CONFIG = base;
 window.CUSTOM_CONFIG = null;
 
@@ -50,22 +51,12 @@ try {
 }
 
 // Platform specific tuning
-{
-  const platform = navigator.userAgentData?.platform ?? navigator.platform;
-  const isWindows = platform ? platform === 'Windows' : navigator.userAgent.includes('Win');
-  const isIos =
-    !isWindows &&
-    ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(
-      platform,
-    );
-
-  // Set Windows platform class
-  document.documentElement.classList.toggle('windows-platform', isWindows);
+// Set Windows platform class
+document.documentElement.classList.toggle('windows-platform', isWindows);
 
-  // Remove 'maximum-scale=1' on non-iOS platforms to allow pinch zoom
-  if (!isIos) {
-    document
-      .querySelector('meta[name="viewport"]')
-      ?.setAttribute('content', 'width=device-width,initial-scale=1');
-  }
+// Remove 'maximum-scale=1' on non-iOS platforms to allow pinch zoom
+if (!isIos) {
+  document
+    .querySelector('meta[name="viewport"]')
+    ?.setAttribute('content', 'width=device-width,initial-scale=1');
 }

src/utils/platform-detection.js

@@ -0,0 +1,7 @@
+const platform = navigator.userAgentData?.platform ?? navigator.platform;
+export const isWindows = platform ? platform === 'Windows' : navigator.userAgent.includes('Win');
+export const isIos =
+  !isWindows &&
+  ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(
+    platform,
+  );