Web: Fix incorrect "Only one copy of Joplin can be open at a time" warning in Safari and Firefox (#16405)

packages/app-mobile/web/public/info-page.css

@@ -23,6 +23,14 @@ main {
 	margin-right: auto;
 }
 
+main.-loading > #only-one-copy-message {
+	display: none;
+}
+
+main:not(.-loading) > #loading-message {
+	display: none;
+}
+
 @media screen and (prefers-color-scheme: dark) {
 	:root {
 		--bg-secondary: black;

packages/app-mobile/web/public/just-one-client.html

@@ -11,30 +11,64 @@
 		<link rel="stylesheet" href="./info-page.css"/>
 	</head>
 	<body>
-		<main>
-			<h1>⚠️ Error: Only one copy of Joplin can be open at a time ⚠️</h1>
-			<p>
-				At present, the Joplin web client only supports one open copy at a time in the same browser. This restriction is present to keep your data safe.
-			</p>
-			<p>
-				To use Joplin in this tab, please <button id="close-all-other-web-clients">close all other Joplin web client tabs</button>,
-				then <button id="refresh-this-page">refresh</button> this page.
-			</p>
+		<main class="-loading">
+			<div id="only-one-copy-message">
+				<h1>⚠️ Error: Only one copy of Joplin can be open at a time ⚠️</h1>
+				<p>
+					At present, the Joplin web client only supports one open copy at a time in the same browser. This restriction is present to keep your data safe.
+				</p>
+				<p>
+					To use Joplin in this tab, please <button id="close-all-other-web-clients">close all other Joplin web client tabs</button>,
+					then <button id="refresh-this-page">refresh</button> this page.
+				</p>
+			</div>
+			<div id="loading-message">
+				<p>Loading...</p>
+			</div>
 		</main>
 	</body>
 	<script>
-		for (const refreshLink of document.querySelectorAll('#refresh-this-page')) {
-			refreshLink.onclick = () => location.reload();
-		}
+		function setUpButtons() {
+			for (const refreshLink of document.querySelectorAll('#refresh-this-page')) {
+				refreshLink.onclick = () => location.reload();
+			}
 
-		for (const closeLink of document.querySelectorAll('#close-all-other-web-clients')) {
-			if (navigator.serviceWorker) {
-				closeLink.onclick = () => {
-					window.navigator.serviceWorker.controller.postMessage({ type: 'closeAllJoplinWebTabs' });
-				};
-			} else {
-				closeLink.replaceWith(document.createTextNode(closeLink.textContent));
+			for (const closeLink of document.querySelectorAll('#close-all-other-web-clients')) {
+				if (navigator.serviceWorker) {
+					closeLink.onclick = () => {
+						window.navigator.serviceWorker.controller.postMessage({ type: 'closeAllJoplinWebTabs' });
+					};
+				} else {
+					closeLink.replaceWith(document.createTextNode(closeLink.textContent));
+				}
 			}
 		}
+
+		function handleRetry() {
+			const main = document.querySelector('main');
+			const url = new URL(location.href);
+			if (!url.searchParams.has('no-retry')) {
+				main.classList.add('-loading');
+
+				// In some browsers (e.g. Firefox, Safari), the service worker incorrectly
+				// detects reloading the web app (or the first load) as a new browser tab accessing Joplin,
+				// where a previous tab already has access.
+				// Retry once to work around this issue: 
+				setTimeout(() => {
+					try {
+						url.searchParams.set('no-retry', '1');
+						location.replace(url);
+					} catch (error) {
+						main.classList.remove('-loading');
+						throw error;
+					}
+				}, 150);
+			} else {
+				main.classList.remove('-loading');
+			}
+		}
+
+		setUpButtons();
+		handleRetry();
 	</script>
 </html>