From 4a98e886393c152d107a96105e3039c3059317ca Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Wed, 19 Jul 2023 17:03:44 +0200
Subject: [PATCH] Add prompt to update

---
 frontend/src/lib/ReloadPrompt.svelte | 75 ++++++++++++++++++++++++++++
 frontend/src/routes/+layout.svelte   |  4 ++
 2 files changed, 79 insertions(+)
 create mode 100644 frontend/src/lib/ReloadPrompt.svelte

diff --git a/frontend/src/lib/ReloadPrompt.svelte b/frontend/src/lib/ReloadPrompt.svelte
new file mode 100644
index 0000000..ba08e51
--- /dev/null
+++ b/frontend/src/lib/ReloadPrompt.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { useRegisterSW } from 'virtual:pwa-register/svelte'
+	const {
+		needRefresh,
+		updateServiceWorker,
+		offlineReady
+	} = useRegisterSW({
+		onRegistered(r) {
+		// uncomment following code if you want check for updates
+		// r && setInterval(() => {
+		//    console.log('Checking for sw update')
+		//    r.update()
+		// }, 20000 /* 20s for testing purposes */)
+			console.log(`SW Registered: ${r}`)
+		},
+		onRegisterError(error) {
+			console.log('SW registration error', error)
+		},
+	})
+	const close = () => {
+		offlineReady.set(false)
+		needRefresh.set(false)
+	}
+	$: toast = $offlineReady || $needRefresh
+</script>
+
+{#if toast}
+	<div class="pwa-toast" role="alert">
+		<div class="message">
+			{#if $offlineReady}
+				<span>
+					App ready to work offline
+				</span>
+			{:else}
+				<span>
+					New content available, click on reload button to update.
+				</span>
+			{/if}
+		</div>
+		{#if $needRefresh}
+			<button on:click={() => updateServiceWorker(true)}>
+				Reload
+			</button>
+		{/if}
+		<button on:click={close}>
+			Close
+		</button>
+	</div>
+{/if}
+
+<style>
+	.pwa-toast {
+		position: fixed;
+		right: 0;
+		bottom: 0;
+		margin: 16px;
+		padding: 12px;
+		border: 1px solid #8885;
+		border-radius: 4px;
+		z-index: 2;
+		text-align: left;
+		box-shadow: 3px 4px 5px 0 #8885;
+		background-color: white;
+	}
+	.pwa-toast .message {
+		margin-bottom: 8px;
+	}
+	.pwa-toast button {
+		border: 1px solid #8885;
+		outline: none;
+		margin-right: 5px;
+		border-radius: 2px;
+		padding: 3px 10px;
+	}
+</style>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index b9bb9f5..76f5ca9 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -26,6 +26,10 @@
 	<BottomAppBar />
 </footer>
 
+{#await import('$lib/ReloadPrompt.svelte') then { default: ReloadPrompt}}
+  <ReloadPrompt />
+{/await}
+
 <svelte:head> 
    {@html webManifestLink} 
 </svelte:head>