vite-pwa / vite-plugin-pwa

Zero-config PWA for Vite

Home Page:https://vite-pwa-org.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

onRegistered callback is called promt again after reload in safary

mysilkworld opened this issue · comments

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>

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

@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

imagen

video.mp4

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

are you awaiting 1 minute between changes?

are you awaiting 1 minute between changes?

in this example 5 minutes

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.

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>

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

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)

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.

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

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

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

commented

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

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.