Vuejs in Cloudflare not updated on refresh
Hi, I recently migrated my Vue app from a self hosted with Nginx to Cloudflare.
Unfortunately, I noticed an issue is that the page kept using the cached files instead of the latest files available despite multiple refreshes.
It basically requires a clear cache + hard refresh to load the latest version.
Each Vuejs static has a unique hashcode in the name, so it gets regenerated when there's an update.
Does anyone know what configurations that I need to change to fix this issue?ðŸ˜
7 Replies
Hi 👋,
If you're using Pages, there is no need to add any caching on your custom domains - Pages has an internal cache that will be managed automatically if you deploy a new version. Do you happen to have a "cache everything" or similar rule enabled? If so, feel free to disable it, and test again
I left it to the default settings. Do I need to change the caching rules in Cloudflare?
I can't find "cache everything" type of setting in the Pages settings. Is there a doc that I can look at that explains how to disable/reduce the caches?
There shouldn't be anything you need to do - https://developers.cloudflare.com/pages/configuration/custom-domains/#custom-domains
I see, then I'm not sure what's causing the browser to load the caches instead of the new files. I have migrated over the Cloudflare Pages for the last few days so everything is now served via CF pages
Do you have caching enabled on the client side?
Could be that your cached index.html is referecing the old script
I just did a scan of my code, the only occurance of cache is this piece of code
/* eslint-env serviceworker */
/*
* This file (which will be your service worker)
* is picked up by the build system ONLY if
* quasar.config.js > pwa > workboxMode is set to "injectManifest"
*/
import { clientsClaim } from 'workbox-core'
import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from 'workbox-precaching'
import { registerRoute, NavigationRoute } from 'workbox-routing'
self.skipWaiting()
clientsClaim()
// Use with precache injection
precacheAndRoute(self.__WB_MANIFEST)
cleanupOutdatedCaches()
// Non-SSR fallback to index.html
// Production SSR fallback to offline.html (except for dev)
if (process.env.MODE !== 'ssr' || process.env.PROD) {
registerRoute(
new NavigationRoute(
createHandlerBoundToURL(process.env.PWA_FALLBACK_HTML),
{ denylist: [/sw\.js$/, /workbox-(.)*\.js$/] }
)
)
}
The client script is deployed as PWA. This is the default code generated with Quasar.
I'll probably have to dig into how this piece of code worksYep, looks like it is related to this. Most likely sw.js is cached by Cloudflare Pages
