onRegistered callback is called promt again after reload in safary

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

[userquin]

It is always being called since we are registering it on page load, try removing the await and the window reload below it.

Also increase the time, check all warnings about workbox window and heuristic algorithm on docs.

[mysilkworld]

It is always being called since we are registering it on page load, try removing the await and the window reload below it.

Also increase the time, check all warnings about workbox window and heuristic algorithm on docs.

It did't help. Every time the page is loaded, a promt is displayed. Even if there were no updates, but it works well in chrome.

[userquin]

@mysilkworld can you just try it removing the interval? try on private window, removing previous sw, you've how to do it here: https://vite-plugin-pwa.netlify.app/examples/#how-to-run-example-projects

[mysilkworld]

https://user-images.githubusercontent.com/25644045/168272532-a976d729-70cf-404e-a0fd-6e422f49c2e5.mp4

I tried different settings and different times for the interval and always the same result.

[userquin]

are you awaiting 1 minute between changes?

[userquin]

check this entry on docs: https://vite-plugin-pwa.netlify.app/guide/periodic-sw-updates.html

[mysilkworld]

are you awaiting 1 minute between changes?

in this example 5 minutes

[mysilkworld]

check this entry on docs: https://vite-plugin-pwa.netlify.app/guide/periodic-sw-updates.html

Checked, but I don't register new service workers. Every 5 minutes I have to reload the page twice.

[mysilkworld]

My code now

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

import { AppButton } from '@gydeapp/components'

const intervalMS = 5 * 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 = () => {
  updateServiceWorker()
}
</script>

[userquin]

maybe it is a problem on Safari with the update impl. (your code looks good)

is it working without the update logic? I mean, making a change on the codebase and refreshing the page...

[userquin]

about the time is about changing the codebase not the interval, read the docs again, the gray box warning: you must await at least 1 minute between changes on your codebase (and build your app)

[mysilkworld]

maybe it is a problem on Safari with the update impl. (your code looks good)

is it working without the update logic? I mean, making a change on the codebase and refreshing the page...

Yes, it is working without the update logic.

[mysilkworld]

about the time is about changing the codebase not the interval, read the docs again, the gray box warning: you must await at least 1 minute between changes on your codebase (and build your app)

Yes, it is, I definitely wait longer than one minute

[userquin]

unfortunately I don't have my mac at hand, so I can't test what's going on (a nephew has it), maybe you can debug the workbox-window library to check if it is a problem with the update impl or something wrong with workbox-window

[mysilkworld]

unfortunately I don't have my mac at hand, so I can't test what's going on (a nephew has it), maybe you can debug the workbox-window library to check if it is a problem with the update impl or something wrong with workbox-window

I don't have mac too, now. But will try to take it from a friend. I'll keep you informed

[kbkmn]

I have a colleague with the same problem, but this is ok for me. I think the problem is with older Safari versions

[Ggwppino]

I have the same problem on IOS 16. On android or windows works fine, but on IOS 16 install the same service worker infinite times with infinite reload popup.

[userquin]

Maybe you can check if the sw is activated: https://github.com/elk-zone/elk/blob/main/modules/pwa/runtime/pwa-plugin.client.ts#L43