Window.Location.Reload with Clear Cache

window.location.reload with clear cache

reload() is supposed to accept an argument which tells it to do a hard reload, ie, ignoring the cache:

location.reload(true);

I can't vouch for its reliability, you may want to investigate this further.

---

Edit (2021): the parameter was never standardised and has been deprecated and removed in more modern browsers. Adding a comment every quarter describing this fact will not help.

JavaScript hard refresh of current page

⚠️ This solution won't work on all browsers. MDN page for location.reload():

Note: Firefox supports a non-standard forceGet boolean parameter for location.reload(), to tell Firefox to bypass its cache and force-reload the current document. However, in all other browsers, any parameter you specify in a location.reload() call will be ignored and have no effect of any kind.

Try:

location.reload(true);

When this method receives a true value as argument, it will cause the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache.

More info:

• The location object

location.reload(true) is not working correctly for PWA

Your implementation of the service worker strategy is slightly flawed. But don't worry, it's an easy fix. :)

Actually, what you are doing is serving the content using cache falling back to the network strategy (with a slightly flawed* implementation), but rather what you want to use is either network falling back to the cache or cache then network (recommended) strategy. The latter will serve the content from cache immediately and then update the content as soon as the latest response is available via the n/w call. The links already have the sample code snippets, so avoiding adding them here explicitly.

*Your e.waitUntil(update(e.request)) does seem to be updating the cache but it will be reflected only in the subsequent fetch attempt since in the first pass, you are still serving the originally cached content and in parallel updating the cache (please note, this is not what is read immediately though, since you've already read the cache content via e.respondWith(caches.match(e.request).then(function(response) {return response || fetch(e.request); and then called your "update" method to refresh the cache), which is kind of defeating the purpose and making your cache fetch even slower than intended, since it now has to wait for the network call to be completed anyway and update the cache, which is not even used in this current read request.

EDIT: Also consider reading the SO thread on Can Service Workers Cache POST Request. Hence, apart from correcting the strategy as mentioned above, you might have to use some workarounds for caching the POST content.

javascript how to force hard refresh of current page

The solution was to specify
{ 'Cache-Control': 'no-cache, no-store, must-revalidate' }; in the request header as instructed in here

---

Related Topics