Add toast dinamically

frontend/src/lib/components/Toast.svelte

@@ -0,0 +1,44 @@
+<script>
+	import { onDestroy, onMount } from 'svelte';
+	export let message = "L'applicazione è pronta per funzionare offline!";
+	let show = false;
+	let nodeRef;
+
+	onMount(() => {
+		setTimeout(() => {
+			show = true;
+			setTimeout(() => {
+				show = false;
+				setTimeout(() => {
+					nodeRef.parentNode.removeChild(nodeRef);
+				}, 5000);
+			}, 5000);
+		}, 0);
+	});
+</script>
+
+<div bind:this={nodeRef} id="toast" class:show>
+	<img src="/icons/checkmark.svg" alt="check" />
+	<div>{message}</div>
+</div>
+
+<style>
+	.show {
+		transform: translateY(0vh) !important;
+	}
+	#toast {
+		transform: translateY(10vh);
+		transition: transform ease 0.4s;
+		position: fixed;
+		height: 10vh;
+		display: flex;
+		bottom: 0;
+		z-index: 4;
+		left: 0;
+		width: 100%;
+		justify-content: center;
+		background-color: #f6ae04;
+		color: black;
+		place-items: center;
+	}
+</style>

frontend/src/routes/+layout.svelte

@@ -1,25 +1,30 @@
 <script>
 	import BottomAppBar from '$lib/components/BottomAppBar.svelte';
+	import Toast from '$lib/components/Toast.svelte';
 	import { onMount } from 'svelte';
 
+	let node;
+	
 	onMount(() => {
 		if ('serviceWorker' in navigator) {
 			addEventListener('load', function () {
 				navigator.serviceWorker.register('/service-worker.js');
 			});
 
-			navigator.serviceWorker.addEventListener('message', (event) => {
-				console.log(`The service worker sent me a message: ${event.data}`);
-				alert('You can use the app offline');
+			const channel = new BroadcastChannel('sw-messages');
+			channel.addEventListener('message', (event) => {
+				new Toast({ target: node });
 			});
 
 			navigator.serviceWorker.ready.then((registration) => {
+				console.log(registration);
 				console.log('registered service worker');
 			});
 		}
 	});
 </script>
 
+<div bind:this={node}></div>
 <slot />
 <footer>
 	<BottomAppBar />

frontend/src/sw.ts

@@ -24,6 +24,9 @@ self.addEventListener('install', (event) => {
     event.waitUntil(addFilesToCache());
 });
 
+const channel = new BroadcastChannel('sw-messages');
+
+
 self.addEventListener('activate', (event) => {
     // Remove previous cached data from disk
     async function deleteOldCaches() {
@@ -33,7 +36,7 @@ self.addEventListener('activate', (event) => {
     }
 
     event.waitUntil(deleteOldCaches());
-    postMessage("completed");
+    channel.postMessage({title: 'Cache downloaded!'});
 });
 
 self.addEventListener('fetch', (event) => {

frontend/static/icons/checkmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 42.875 8.625 C 42.84375 8.632813 42.8125 8.644531 42.78125 8.65625 C 42.519531 8.722656 42.292969 8.890625 42.15625 9.125 L 21.71875 40.8125 L 7.65625 28.125 C 7.410156 27.8125 7 27.675781 6.613281 27.777344 C 6.226563 27.878906 5.941406 28.203125 5.882813 28.597656 C 5.824219 28.992188 6.003906 29.382813 6.34375 29.59375 L 21.25 43.09375 C 21.46875 43.285156 21.761719 43.371094 22.050781 43.328125 C 22.339844 43.285156 22.59375 43.121094 22.75 42.875 L 43.84375 10.1875 C 44.074219 9.859375 44.085938 9.425781 43.875 9.085938 C 43.664063 8.746094 43.269531 8.566406 42.875 8.625 Z"/></svg>