Cache issue

[vermotr]

Hi,

Firstly, thanks @bertho-zero for this repo!

So, I have an issue when I add a new page to my router.
When a person tries to visit the new page, he is redirected to the 404 page because he doesn't have the new version of the site in his cached files.
However, for someone who visits the website for the first time, there is no problem and he can see the new page.

How can I fix this issue?

Thank you,
Romain

[therealkevinard]

New-ish to React, but this has worked forever in Angular world (it's a natural process in the cli there, but can be handled in webpack):
In your HTML, reference the static files with a cache-busting name portion that corresponds to the build. Eg: awesome-file.js builds-out as awesome-file.${gitCommitSha}.js

This way the filename changes with each build, invalidating cached copies.

https://stackoverflow.com/questions/39238163/how-can-i-make-webpack-use-a-cache-busting-suffix

[vermotr]

Thank you for your answer, but my built files already have a chunkhash (i.e. main-5d4809fd0e0a9e36dabd.js). The only file that doesn't have a hash is index.html.

So, to temporarily resolve the problem, I edited prod.config.js to remove HTML files from the cache:

new SWPrecacheWebpackPlugin({
	cacheId: 'website',
	filename: 'service-worker.js',
	maximumFileSizeToCacheInBytes: 8388608,

	// Ensure all our static, local assets are cached.
	staticFileGlobs: [path.dirname(assetsPath) + '/**/*.{js,css,png,jpg,gif,svg,eot,ttf,woff,woff2}'],
	stripPrefix: path.dirname(assetsPath),

	directoryIndex: '/',
	verbose: true,
	navigateFallback: '/dist/index.html',
	runtimeCaching: [{
		urlPattern: /\/api\/widget\/load(.*)/,
		handler: 'networkFirst',
		options: {
			debug: true
		}
	}]
})

For me, it is an issue with the service worker, so I have also created another issue: goldhand/sw-precache-webpack-plugin#147

[vermotr]

I tested with 6a6cdc8, but that doesn't completely fix the problem.

I must refresh the page two times to obtain the last version of the website.

However, I added this code:

await navigator.serviceWorker.register('/dist/service-worker.js', { scope: '/' }).then(reg => {
	reg.onupdatefound = () => {
		const installingWorker = reg.installing;
		installingWorker.onstatechange = () => {
			switch (installingWorker.state) {
				case 'installed':
					if (navigator.serviceWorker.controller) {
						console.log('New update available');
					} else {
						console.log('No update available');
					}
					break;
				default:
					break;
			}
		};
	};
});

And when I have:

• build & launch the application
• modified pwa.js and a component, to modify the main js file with its hash and the file index.html
• build & launch the application

I need to refresh the page a first time to obtain New update available in the console. It's not until I reload the page a second time that I can see modifications.

[bertho-zero]

Should the browser be refreshed as soon as the service worker is updated? or offer it to the user?

[vermotr]

To be honest, I don't know what is the best solution.

However, we can take Inbox by Gmail as an example. If a user is staying inside the application a long time and an update of the service worker is done during this period, a "toast" appears and notifies the user that a new update is available. Otherwise, when a user reloads the website, he has the last version.

[bertho-zero]

I added this commit (f02d1ce) and I would add a toast that propose to refresh the page.