This commit is contained in:
parent
ba2a25f088
commit
4a98e88639
2 changed files with 79 additions and 0 deletions
75
frontend/src/lib/ReloadPrompt.svelte
Normal file
75
frontend/src/lib/ReloadPrompt.svelte
Normal 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>
|
|
@ -26,6 +26,10 @@
|
|||
<BottomAppBar />
|
||||
</footer>
|
||||
|
||||
{#await import('$lib/ReloadPrompt.svelte') then { default: ReloadPrompt}}
|
||||
<ReloadPrompt />
|
||||
{/await}
|
||||
|
||||
<svelte:head>
|
||||
{@html webManifestLink}
|
||||
</svelte:head>
|
||||
|
|
Loading…
Reference in a new issue