diff --git a/CHANGELOG.md b/CHANGELOG.md index 645794b33..3d24837e9 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/components/app-updated.jsx b/src/components/app-updated.jsx index 85bb9e8ac..974b916ef 100644 --- a/src/components/app-updated.jsx +++ b/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,7 +19,9 @@ 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); } @@ -26,7 +29,7 @@ export function AppUpdated() { }); const reloadPage = useEvent(() => { - if (workerUpdated) { + if (workerUpdated && !isIos) { updateServiceWorker(); // Sometimes the updateServiceWorker doesn't refresh the page, so reload // it manually after some time diff --git a/src/startup.js b/src/startup.js index 7e1375405..6f284fc46 100644 --- a/src/startup.js +++ b/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'); } diff --git a/src/utils/platform-detection.js b/src/utils/platform-detection.js new file mode 100644 index 000000000..687506341 --- /dev/null +++ b/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, + );