Javascript clear browser cache for end user - javascript

Is there a way to clear browser cache using Javascript? When publishing a new release to an application, I sometimes have to tell my users to clear their browser cache to see the new changes.
The application is built using Vue.

I developed a PWA in Vue which had a lot of caching to be able to work offline as well, so distributing a new release was kind of tricky, solution that I settled on was deploying a version.txt file along my release and then periodically fetching that file from my app and when versions from .env files and version.txt don't match then I call:
caches.keys().then((keyList) => Promise.all(keyList.map((key) => caches.delete(key))));
to delete all cache, additionally I display a dialog that says new version is available and force a refresh so new content is served.
I hope this answer gives you an idea what you need to do to be able to publish a new version properly.

Related

Instantly update DOM when service worker detects a change

Is there any way to have service workers fetch the cached version, then attempt to do a network fetch, and if it's different than the cached version, put that new thing in the cache and replace the old asset in the DOM with the new one instantly (without having to refresh the page)?
Hey yeah this is a very tricky situation but what I did was save a version number to my .env file on production release.
I then built this NPM package which will surface the Version number of the .env at build time. I could then use this number in my VueJS - PWA to check against the old currently cached version number, and then do a network request if they dont match.
https://www.npmjs.com/package/vue-enverywhere

need to publish to server to reflect javascript changes

I am working on a dynamic web project in eclipse. Until yesterday, we were using CVS for our version control system. When I made any change on a javascript file, I would just save the file and refresh the browser and the change would be there.
However, since I started using Git, I need to publish to the weblogic server in order to see the changes in my browser.
I am not sure what is causing this problem.
The problem was solved.
I changed a setting in eclipse publishing mode from:
Publish as an exploded archive
to
Publish as a virtual application
It isn't related in anyway to Git vs CVS, it's just that I downloaded a new eclipse and the default setting was different from what I previously had.

Do scripts loaded with ocLazyLoad get cached by the browser?

Sorry if this is a newbish question.
I'm using the ocLazyLoad plugin with AngularJS and UI Router. I am using ocLazyLoad with Ui router to dynamically load/lazy-load in my controllers based on the route that is hit in my webapp.
My question is will these lazy-loaded scripts get cached by the browser? And if they are is there a way to force the browser to download a fresh copy (without turning off caching on my webserver).
The problem I am trying to solve is this, I wish to serve up a new version of my index.html with an MD5 hash to force browsers to reload code every time a new version of the webapp is deployed. So if I load up a new index-1ab34c.html my concern is that the lazy loaded JS files will be the same old cached ones and not the fresh code that is deployed.
This question asked more than 100 times actually by different type of question, angular router has a cache problem, the basic solution for this problem is version.
Desktop or laptop has a option to hard refresh ctrl + F5 this helps to reload all files from beginning, but devices like mobile or tablet doesn't have this option so you have to use version to handle this problem.
Try to version all of your requests and files, this helps
application to get new files and request by last version.
example:
var version = "0.0.1"; //0.0.2 // 0.0.9 // 0.1.0
//requests
$http.get("users?v=" + version).then(...);
//files
//loading with oclazyload or what you want no deference
"application/controller.js?v=" + version
Version is global variable because you will change it from one place every publish.

When using ServiceWorker to cache a web page, will caching sw.js break it forever?

I was trying to make an offline web app using ServiceWorker to cache the web requests. But I included sw.js in the cached file list.
Have I just broken my web app for all time for those who loaded my app already, or is there any way to recover? If I release a fixed sw.js file, I'm worried that my my users aren't getting the updated version, because they are using the cached sw.js...
Yes and no. You have broken it for some time but not forever.
Both Chrome and Firefox have implemented an automatic refresh interval of ~24 hours. You may read more about it from here.
This is still tricky, though, since some users might be using an older browser that doesn't automatically check for SW.js updates from the network. What could be done in that situation is not completely clear to me. If someone knows, please comment and I'll update this answer to include all the information.

Force live users to expire assets for JS Web Apps

Our web application is built on AngularJS and Ruby on Rails. Sometimes we find a bug in the JS and need to patch it immediately. We push up an update to Heroku and the new JS files are then live. However, users on the site (who are currently on the site) and do not refresh their page, are still using the old JS file.
Is there a way to force refresh of the assets on deployment with Heroku? Or, is there a better way to handle this type of problem?
I am thinking of using web sockets to possibly handle the scenario.

Categories

Resources