index.html should be cache busted

[celandro]

Is this a bug report?

Yes

Did you try recovering your dependencies?

N/A

Which terms did you search for in User Guide?

Service worker caching. Have spent quite a bit of time looking into this. Relates to #3665

Environment

N/A

Steps to Reproduce

1. Accidentally push out code that serves the build directory with 30 day cache
2. Change cache back to 0
3. Make a new release with some minor change

Expected Behavior

New version is loaded

Actual Behavior

You will not get the new version for 30 days unless the user clears their browser storage

Reproducible Demo

N/A

Proposed fix:

Cache bust index.html in the precache manifest by adding a get parameter with the revision aka
{
"revision": "74b471cc3f1d86bbc95a5bcf5376e65e",
"url": "/index.html?r=74b471cc3f1d86bbc95a5bcf5376e65e"
}

Note: all other files are cache busted. Also chrome and firefox both no longer allow service-worker.js itself to be cached

[celandro]

Also need to update the service-worker and asset-manifest.json with the cache busted url

[celandro]

This is a simple bat file that 'fixes' the issue

echo "Building release artifact"
call npm run build
echo "fixing caching"

set /a num=%random%
set /a num2=%random%

call powershell -Command "(gc build/service-worker.js) -replace 'index.html', 'index.html?s=%num%%num2%' | Out-File build/service-worker.js
call powershell -Command "(gc build/asset-manifest.json) -replace 'index.html",$', 'index.html?s=%num%%num2%",' | Out-File build/asset-manifest.json
call powershell -Command "(gc build/precache-manifest..js) -replace 'index.html', 'index.html?s=%num%%num2%' | Out-File build/precache-manifest..js

[Timer]

/cc @jeffposnick does this make sense so users don't get bit by it as often? I'm not sure of the pitfalls here.

[jeffposnick]

Workbox already has steps in place to bypass the browser's cache when fetching a specific revision of a url in the precache manifest:

https://github.com/GoogleChrome/workbox/blob/b146d8d3c2db89fa51afc322049b9795894bb4f2/packages/workbox-precaching/models/PrecacheEntry.mjs#L45-L77

That code uses request.cache = 'reload' if supported, and uses the _workbox-cache-bust URL query parameter if not. It accomplishes the same thing that you'd accomplish by explicitly adding the query parameter into the entries in the precache manifest.

So... taking a step back, I'd say that it's not likely that what you're seeing is due to the need to cache-bust the URLs in the precache manifest. Maybe you just saw the older content after updating your site because there was an existing tab already open controlled by the older service worker? By default, the updated cache entries won't be used all existing tabs open to URLs controlled by the previous service worker are closed.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.