Compare commits

..

4 commits

Author SHA1 Message Date
10fa4522ba Add toast dinamically
All checks were successful
ci/woodpecker/push/build Pipeline was successful
2023-07-22 19:58:19 +02:00
7d8f59dec7 update sw.ts and toast component 2023-07-22 19:57:47 +02:00
0a2f580f30 Add toast 2023-07-22 19:50:42 +02:00
9437316feb Add checkmark 2023-07-22 19:50:12 +02:00
4 changed files with 57 additions and 4 deletions

View file

@ -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>

View file

@ -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 />

View file

@ -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) => {

View file

@ -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>

After

Width:  |  Height:  |  Size: 694 B