Vue 3 refresh from server instead cached version even when hashes change (also when PWA configured)

Get Help
#1

Hello,

preamble: Vue 3 adds a hash string to created distributable files (at least when having configured a Vue 3 porject with vue ui) and changes that hash every time a change is detected inside a contributing source file.

Problem: the index.html file which references the “hashed files” does not change and is still served from browser cache still containing former “hashed files” which themselves are still served from cache rendering Vue 3’s “hashes files” useless, AT LEAST when the Vue 3 project is also configures as a PWA.

Questions: 1. How can we achieve changed soruce files (js, css) get refreshed from the server when a new version of our “app” ist distributed (when the project is configured as a PWA).
2. How can we disable PWA functionality in a Vue 3 project and make sure the newly distributed app from us without PWA enabled is also updated in such a way for every client accessing this new app that the PWA (service worker) functionality gets deleted on their side?

Kind regards, and happy holidays!

#2

ping :blush:

#3

we still need to solve this issue.

#4

Hi via-lars,

I think I had a similar issue with a Vue 2 Single Page Application. I was aware about the SPA requirements (no index caching, and hashed js/css filenames), but I couldn’t exclude index.html from cache (thanks to webpack, hashed filenames was ok).

I tried various headers in public\index.html, none had any effect:

<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="Cache-Control" content="no-cache,no-store,must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

Today I had a revelation: what about HTTP headers??

I am using an IIS server. I tried this in my web.config (note that it requires URL Rewrite Module):

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
	...
	<system.webServer>
		...
		<rewrite>
			...
			<outboundRules>
				...
				<rule name="No Cache For HTML Files" preCondition="IsHTML">
					<match serverVariable="RESPONSE_CACHE_CONTROL" pattern=".*" />
					<action type="Rewrite" value="no-store" />
				</rule>
				<preConditions>
					<preCondition name="IsHTML" logicalGrouping="MatchAny">
						<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
					</preCondition>
				</preConditions>
			</outboundRules>
		</rewrite>
	</system.webServer>
</configuration>

Response headers for index.html now includes Cache-Control: no-store, and index.html seems correctly excluded from the cache (according to Firefox about:cache).

Hope this helps.

Adrien

#5

oh :slight_smile: very interesting! Thank you very much for detailing this!