Skip to content

onRegistered callback is called promt again after reload in safary #282

@mysilkworld

Description

@mysilkworld

Hi, i have a problem. onRegistered callback is called promt again after reload, only in ios safary. Then the promt is displayed every minute.

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      workbox: {
        sourcemap: true,
        cleanupOutdatedCaches: true  
      },
      strategies: 'generateSW',
      manifest: {
        name: 'Test',
        short_name: 'Test',
        description: 'Test',
        theme_color: '#ffffff',
        background_color: '#ffffff',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any maskable'
          }
        ]
      }
    })
  ]
})

PromtRefresh.vue

<template>
  <div
    v-if="needRefresh"
    class="pointer-events-auto fixed right-0 bottom-0 z-100 w-full overflow-hidden bg-white p-5 shadow-lg sm:right-5 sm:bottom-5 sm:w-auto sm:rounded-lg"
    role="alert"
  >
    <div class="mb-3 font-medium">
      <span>
        A new version is available,<br class="hidden sm:inline" />
        reload the page to update
      </span>
    </div>

    <div class="flex">
      <app-button
        size="small"
        rounded="full"
        class="mr-2"
        block
        @click="reload"
      >
        Reload
      </app-button>

      <app-button
        size="small"
        rounded="full"
        outlined
        block
        color="black"
        @click="close"
      >
        Close
      </app-button>
    </div>
  </div>
</template>

<script setup>
import { useRegisterSW } from 'virtual:pwa-register/vue'

import { AppButton } from '@gydeapp/components'

const intervalMS = 60 * 1000

const { needRefresh, updateServiceWorker } = useRegisterSW({
  immediate: true,
  onRegistered(r) {
    r &&
      setInterval(async () => {
        await r.update()
      }, intervalMS)
  }
})

const close = async () => {
  needRefresh.value = false
}

const reload = async () => {
  await updateServiceWorker()
  window.location.reload()
}
</script>

<script>
export default {
  name: 'PromtRefresh'
}
</script>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions