vite-pwa / docs

Documentation: PWA integrations for Vite and the ecosystem
https://vite-pwa-org.netlify.app/
MIT License
197 stars 45 forks source link

Prompt for update - updateSW() - assets fetched from network #25

Open juhasev opened 1 year ago

juhasev commented 1 year ago

According to the manual:

"When the user clicks the "refresh" button when onNeedRefresh is called, then calls updateSW() function; the page will reload, and the up-to-date content will be served."

Yes, this works, but all the assets are loaded from the network even though the service worker has cached them all. This makes the application feel sluggish after each update. When you first open the app, the service worker immediately goes to work, and all assets are correctly cached. But the caching breaks when updateSW() is called. Is this a bug am I missing out on something?

My JS code is identical to the example given in the documentation.


const updateSW = registerSW({

    immediate: true,

    // Shows UPDATE button in the top toolbar
    onNeedRefresh() {
        Bus.$emit('show-reload');
    },

    onRegisteredSW(swUrl, registered) {
        registered && setInterval(async () => {

            if (!(!registered.installing && navigator)) return
            if (('connection' in navigator) && !navigator.onLine) return

            const resp = await fetch(swUrl, {
                cache: 'no-store',
                headers: {
                    'cache': 'no-store',
                    'cache-control': 'no-cache',
                },
            })

            if (resp?.status === 200) {
                await registered.update();
            }

        }, intervalMS)
    },
})

// When user click on the update button we will execute updateSW() that
// activate the new SW reloads pre-cache + reloads the page
Bus.$on('update-approved', () => {
    updateSW();
});