Service worker takes 30 to 60 seconds after page load to detect an update?

[rabbitfufu]

Hello,

This is my first time using Vite-PWA. I am posting here as I am hopeful someone may have run into this problem before.

The service worker is able to detect an update and refresh the page automatically. However it typically takes between 30 and 60 seconds after the page loads before it does this.

I am unclear if this is something that I can configure, or if this is simply how the plugin works. Does anyone know if there is a way to speed up the refresh? Ideally I would like the service worker to pick up a change as early as possible after the page loads. (Within a few seconds.)

Please see below for how I am using the plugin. Thanks for this library & thanks (in advance) for your help!

// in main.js

import {registerSW} from 'virtual:pwa-register'

registerSW({
	immediate: true,
	onRegisteredSW(swRegistration) {
		if (swRegistration) {
			swRegistration.update()
		}
	},
	onNeedRefresh() {
		window.location.reload()
	}
})


// in vite.config.js

return {
		plugins: [
			VitePWA({
				registerType: 'autoUpdate',
				srcDir: 'src',
				filename: 'serviceWorker.js',
				strategies: 'injectManifest',
				injectManifest: {
					globPatterns: ['**/*.{js,css,html,png,svg,jpg,webp,ico}']
				},
				includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
				manifest: { ... }
			}),
			...
		]
	}


// serviceWorker.js

import {cleanupOutdatedCaches, precacheAndRoute, matchPrecache} from 'workbox-precaching'
import {clientsClaim} from 'workbox-core'
import {googleFontsCache, staticResourceCache, imageCache, pageCache} from 'workbox-recipes'

cleanupOutdatedCaches()
precacheAndRoute(self.__WB_MANIFEST)
self.addEventListener('install', () => {
	self.skipWaiting()
})
clientsClaim()

[userquin]

Workbox will download each asset sequentialy to allow user navigation while downloading the app in background.

GoogleChrome/workbox#2880

GoogleChrome/workbox#2528

You can patch workbox precaching module allowing parallel downloads, don't use more than 10 parallel downloads, check this patch:

GoogleChrome/workbox#2880 (comment)

There is an open pr to allow configure parallel downloads, I have no idea when will be reviewed.

[rabbitfufu]

Awesome, thank-you for pointing me to the right place!

[userquin]

If you dont want to pach the module you can implement it since you are using a custom service worker, just add a precaching.ts (or .js) and import it instead workbox version

I'm going to try to add a new subpackage export here and so it can be used.

Feel free to send a pr or the module impl here.

[rabbitfufu]

Monkeypatching works well enough for my purposes. I just tried it and everything is now updating instantly.

I spent more time on this than I care to admit -- I was looking in the wrong place. So thanks again for pointing me @ workbox.

I'm going to try to add a new subpackage export here and so it can be used.

That would be amazing. It doesn't look like there's much movement on merging that PR over @ google.