From 2757f701d08a1045b49ad5f1c6fa59935a65dced Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Sat, 27 Dec 2025 17:52:45 +0000
Subject: [PATCH] feat: Implement in-app service worker update notification

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 webclient/src/App.js   | 22 ++++++++++++++++++++++
 webclient/src/index.js |  6 +++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/webclient/src/App.js b/webclient/src/App.js
index 170a065..f93edf9 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -19,6 +19,7 @@ function App() {
 	const [theme, setTheme] = useState(localStorage.getItem('theme') || '');
 	const cache = useRef({});
 	const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement);
+	const [waitingWorker, setWaitingWorker] = useState(null);
 
 	const updateCache = useCallback((key, value) => {
 		cache.current[key] = value;
@@ -44,6 +45,14 @@ function App() {
 		localStorage.setItem('theme', 'red');
 	};
 
+	useEffect(() => {
+		const onSWUpdate = e => {
+			setWaitingWorker(e.detail.waiting);
+		};
+		window.addEventListener('swUpdate', onSWUpdate);
+		return () => window.removeEventListener('swUpdate', onSWUpdate);
+	}, []);
+
 	useEffect(() => {
 		if (Object.keys(cache.current).length === 0) {
 			localForage.iterate((value, key) => {
@@ -90,6 +99,19 @@ function App() {
 
 	return (
 		<div className={theme}>
+			{waitingWorker &&
+				<div style={{padding: 10, backgroundColor: '#ffffcc', color: '#000'}}>
+					A new version is available.{' '}
+					<button onClick={() => {
+						waitingWorker.postMessage({ type: 'SKIP_WAITING' });
+						navigator.serviceWorker.addEventListener('controllerchange', () => {
+							window.location.reload();
+						});
+					}}>
+						Refresh
+					</button>
+				</div>
+			}
 			<Router>
 				<div className='container menu'>
 					<p>
diff --git a/webclient/src/index.js b/webclient/src/index.js
index 97ce4c8..3296366 100644
--- a/webclient/src/index.js
+++ b/webclient/src/index.js
@@ -8,4 +8,8 @@ ReactDOM.render(<App />, document.getElementById('root'));
 // If you want your app to work offline and load faster, you can change
 // // unregister() to register() below. Note this comes with some pitfalls.
 // // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.register({
+  onUpdate: registration => {
+    window.dispatchEvent(new CustomEvent('swUpdate', { detail: registration }));
+  }
+});