virtual:pwa-register/vue - needRefresh returning true on new browser session

[palmer-rm]

Have set up a reload prompt for a vue3 application using: https://vite-plugin-pwa.netlify.app/frameworks/vue.html#prompt-for-update

Having an issue whereby the prompt is showing even on first visit, or after clearing all site data from cache and re-visiting the site.

After updateServiceWorker fn is called after clicking the refresh button, the prompt will then disappear as expected, and does not return until the service worker is next updated.

But I wouldn't expect needRefresh to return true after the initial visit, or after clearing all site data (i.e. including the service worker) and re-visiting the site with a brand new session, as nothing is cached and needs to be updated.

[Joaquín Sánchez]

@palmer-rm check your logic, it seems you're using the ready to work offline callback instead the need refresh callback, once you call updateServiceWorker your app should be reloaded on the browser, since it will force a page reload

[palmer-rm]

@userquin - are you suggesting to just use the needRefresh boolean to determine whether to render the refresh prompt, as opposed to doing v-if"offlineReady || needRefresh" as per the docs?

Calling updateServiceWorker works fine; the app is reloaded on the browser as expected. The problem is the reload prompt is rendered even in a completely new browser session with nothing cached.

[Joaquín Sánchez]

@palmer-rm can you provide a repro or the code for you reload prompt component?

[palmer-rm]

This is the reload prompt component:

<script setup lang="ts">
import { useRegisterSW } from 'virtual:pwa-register/vue';
import { ButtonField } from 'rm-design';

const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW();
const refresh = () => {
  updateServiceWorker(true);
};
</script>

<template>
  <ButtonField
    v-if="offlineReady || needRefresh"
    text="New content available. Click to refresh"
    @click="refresh"
  />
</template>

[Joaquín Sánchez]

@palmer-rm offlineReady is true only once, when the sw is installed first time, while needRefresh is true when there is a sw installed and a new version available and awaiting to be installed. Both flags cannot be true at the same time (the first time the sw is installed offlineReady will be true and needRefresh will be false).

You have an example on examples/vue-router/src/ReloadPrompt.vue.

[palmer-rm]

@userquin - Thanks for the clarification. I am curious, though, as to why in the example ReloadPrompt.vue, the prompt is conditionally rendered if needRefresh and offlineReady are both true.

Why would one want to render the reload prompt on initial SW registration, when nothing is cached and content is up to date?

[Joaquín Sánchez]

@palmer-rm this is just an example: you can prompt the user for initial installation or not, in the example we show the message for it. If you don't want to show the prompt in that case just omit it, use only the needRefresh ref.

The behavior is similar when using the pwa on mobile, the browser will show a popup to install the app first time the sw is ready (installed).

[Joaquín Sánchez]

@userquin - Thanks for the clarification. I am curious, though, as to why in the example ReloadPrompt.vue, the prompt is conditionally rendered if needRefresh and offlineReady are both true.

this is not true, please review the code: the prompt is conditionally rendered if needRefresh or offlineReady are true.

[palmer-rm]

@userquin - sorry, my typo. I meant or, not and.