chore: convert update available component to ts and script setup

This commit is contained in:
kolaente 2022-05-08 22:06:48 +02:00
parent 315da424ec
commit b2c2118c58
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 30 additions and 39 deletions

View file

@ -92,7 +92,7 @@
</header> </header>
</template> </template>
<script setup langs="ts"> <script setup lang="ts">
import {ref, computed, onMounted, nextTick} from 'vue' import {ref, computed, onMounted, nextTick} from 'vue'
import {useStore} from 'vuex' import {useStore} from 'vuex'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'

View file

@ -7,47 +7,38 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import {defineComponent} from 'vue' import {ref} from 'vue'
export default defineComponent({ const updateAvailable = ref(false)
name: 'update', const registration = ref(null)
data() { const refreshing = ref(false)
return {
updateAvailable: false,
registration: null,
refreshing: false,
}
},
created() {
document.addEventListener('swUpdated', this.showRefreshUI, {once: true})
if (navigator && navigator.serviceWorker) { document.addEventListener('swUpdated', showRefreshUI, {once: true})
if (navigator && navigator.serviceWorker) {
navigator.serviceWorker.addEventListener( navigator.serviceWorker.addEventListener(
'controllerchange', () => { 'controllerchange', () => {
if (this.refreshing) return if (refreshing.value) return
this.refreshing = true refreshing.value = true
window.location.reload() window.location.reload()
}, },
) )
} }
},
methods: { function showRefreshUI(e) {
showRefreshUI(e) {
console.log('recieved refresh event', e) console.log('recieved refresh event', e)
this.registration = e.detail registration.value = e.detail
this.updateAvailable = true updateAvailable.value = true
}, }
refreshApp() {
this.updateExists = false function refreshApp() {
if (!this.registration || !this.registration.waiting) { if (!registration.value || !registration.value.waiting) {
return return
} }
// Notify the service worker to actually do the update // Notify the service worker to actually do the update
this.registration.waiting.postMessage('skipWaiting') registration.value.waiting.postMessage('skipWaiting')
}, }
},
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>