frontend/src/lib/components/Toast.svelte

@@ -1,44 +0,0 @@
-<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,30 +1,25 @@
 <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');
 			});
 
-			const channel = new BroadcastChannel('sw-messages');
+			navigator.serviceWorker.addEventListener('message', (event) => {
-			channel.addEventListener('message', (event) => {
+				console.log(`The service worker sent me a message: ${event.data}`);
-				new Toast({ target: node });
+				alert('You can use the app offline');
 			});
 
 			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,9 +24,6 @@ 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() {
@@ -36,7 +33,7 @@ self.addEventListener('activate', (event) => {
     }
 
     event.waitUntil(deleteOldCaches());
-    channel.postMessage({title: 'Cache downloaded!'});
+    postMessage("completed");
 });
 
 self.addEventListener('fetch', (event) => {

frontend/static/icons/checkmark.svg

@@ -1 +0,0 @@
-<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>