refactor: use nuxt plugin to provide pwa helpers globally (#604)

zio/stable
Daniel Roe 2022-12-28 15:08:03 +01:00 committed by GitHub
parent 73cec49cf0
commit 726a581add
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 23 deletions

View File

@ -1,13 +1,9 @@
<script setup>
import { pwa } from '~/composables/pwa'
</script>
<template>
<button
v-if="pwa.needRefresh"
v-if="$pwa?.needRefresh"
bg="fade" relative rounded
flex="~ gap-1 center" px3 py1 text-primary
@click="pwa.updateServiceWorker()"
@click="$pwa.updateServiceWorker()"
>
<div i-ri-download-cloud-2-line />
<h2 flex="~ gap-2" items-center>

View File

@ -1,10 +1,6 @@
<script setup>
import { pwa } from '~/composables/pwa'
</script>
<template>
<div
v-if="pwa.needRefresh"
v-if="$pwa?.needRefresh"
m-2 p5 bg="fade" relative
rounded-lg of-hidden
flex="~ col gap-3"
@ -13,10 +9,10 @@ import { pwa } from '~/composables/pwa'
{{ $t('pwa.title') }}
</h2>
<div flex="~ gap-1">
<button type="button" btn-solid px-4 py-1 text-center text-sm @click="pwa.updateServiceWorker()">
<button type="button" btn-solid px-4 py-1 text-center text-sm @click="$pwa.updateServiceWorker()">
{{ $t('pwa.update') }}
</button>
<button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="pwa.close()">
<button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.close()">
{{ $t('pwa.dismiss') }}
</button>
</div>

View File

@ -3,7 +3,7 @@ import type { VitePWANuxtOptions } from '../modules/pwa/types'
const isPreview = process.env.PULL_REQUEST === 'true'
const pwa: VitePWANuxtOptions = {
export const pwa: VitePWANuxtOptions = {
mode: isCI ? 'production' : 'development',
// disable PWA only when in preview mode
disable: /* temporarily test in CI isPreview || */ (isDevelopment && process.env.VITE_DEV_PWA !== 'true'),
@ -49,5 +49,3 @@ const pwa: VitePWANuxtOptions = {
type: 'module',
},
}
export { pwa }

View File

@ -1,6 +1,6 @@
import { useRegisterSW } from 'virtual:pwa-register/vue'
export function usePWA() {
export default defineNuxtPlugin(() => {
const online = useOnline()
const {
@ -34,10 +34,12 @@ export function usePWA() {
}
return {
needRefresh,
updateServiceWorker,
close,
provide: {
pwa: reactive({
needRefresh,
updateServiceWorker,
close,
}),
},
}
}
export const pwa = reactive(usePWA())
})