Add prompt to update
All checks were successful
ci/woodpecker/push/build Pipeline was successful

This commit is contained in:
Alessio Davoli 2023-07-19 17:03:44 +02:00
parent ba2a25f088
commit 4a98e88639
2 changed files with 79 additions and 0 deletions

View file

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

View file

@ -26,6 +26,10 @@
<BottomAppBar />
</footer>
{#await import('$lib/ReloadPrompt.svelte') then { default: ReloadPrompt}}
<ReloadPrompt />
{/await}
<svelte:head>
{@html webManifestLink}
</svelte:head>