How to clear cached versions of website on users Browsers? - javascript

I have a very simple HTML/CSS/JS website. When ever I make changes to it, to see the updated version I have to manually clear my cache on mobile or hard reload on PC.
Is there a way of clearing cache for your site on users browsers? I have had a look around but I seem to only find of instances of clearing server cache and libraries that I don't know have to use yet. Many thanks in advance for your help!

Browsers will cache:
the html files
the JS files
the CSS files
It's probably best to do this on the server side, but you can first try doing it on the client side as described below.
To make sure the latest html file is used, you could try adding this within the <head> of your html files:
<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"/>
To make sure the latest version of "mycode.js" is used, append a new value to the file (e.g. the timestamp it was last edited):
<script src="mycode.js?v=123456789"></script>
Same thing to make sure the latest "mystyle.css" file is used:
<link rel="stylesheet" type="text/css" href="mystyle.css?v=123456789">

Related

Why every production deployment has need to clear the browser cache

Every new production deployment need to clear cache in react js.
When you access a web site like
http:// mysite.com/index.html
if a cached copy of the file index.html is present on the browser cache it returns that copy. Unluckly that copy has pointers to the old javascript and css files that are already cached on the browser. So also if your javascript files changed their names you will always get the old cached copy with the old name.
You can solve this problem informing the browser that the index.html must not be cached. Otherwyse you need to manually clear the cache. This can be done adding
<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
to your index.html.

Forcing client to use un-cached resource

I have an Angular JS app that Im running a production environment and make deployments that include new features on a fairly regular basis.
My app has a sizable number of returning users and since the app is essentially just a JS file, the JS running on their device is often a cached version. Sometimes this is a problem because the new features may not be backwards compatible.
One method I'm aware of to force browsers to download a fresh version of a resource is to place random URL parameters in the src.
<link rel="stylesheet" type="text/css" href="theme.css"> <!-- cached -->
<link rel="stylesheet" type="text/css" href="theme.css?8f834giywe"> <!-- uncached -->
But for some reason, this doesnt work in my angular app.
<script src="./app/js/app.min.js"></script> <!-- cached -->
<script src="./app/js/app.min.js?43gt4gf342"></script> <!-- broken -->
The app loads (not a server-level issue) but immediately breaks.
Can anyone think of any reason why this would not work?
Any there any other options to force a client to download a fresh copy or a resource rather than using a cached version?
Try adding to the Header section of the HTML the following line:
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
This worked for me without the need to play with URLs.

How can I cache my website in the user's browser?

I've found many explanations about caching, some of them even have examples but, it is kind of foggy to understand it and how to use it. I've tried to use it many times, but I've failed (I want to improve speed, I want only the necessary to be loaded from the server). Can you help me to make this page below be saved in the browser's cache, If possible give me an explanation or a different way on how to do it (it can be JS too!)?
P.S.: It can be Appcache if you give me a suitable example for this page ;).
Thanks in advance.
My Appcache file's name: offline.appcache.
CACHE MANIFEST
/style.css
http://sistema.agrosys.com.br/sistema/labs/CSS_HTML/html1.html
<!DOCTYPE html>
<html lang="en" manifest="/offline.appcache">
<head>
<meta name="viewport" content="width=device-width" />
<title>page1</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="testing_class">Test</div>
<div class="testing_clas">Test</div>
<div class="testing_cla">Test</div>
<div class="testing_cl">Test</div>
<div class="testing_c">Test</div>
<div class="testing_">Test</div>
</body>
</html>
Reconsider using AppCache. Using it doesn't necessarily imply that your site will work offline. Basically, here are the steps that AppCache takes, regardless of the browser connection status:
Asks the server for the manifest file.
If the manifest file hasn't changed, it serves the local files.
If the manifest file has changed, it downloads the new files, saves them and then serves them.
Since you mention that
I want to improve speed, I want only the necessary to be loaded from the server
AppCache is a perfectly valid solution.
EDIT: A quick example of using AppCache:
In the beginning of your original HTML:
<!DOCTYPE html>
<!--[if lte IE 9]>
<style>.scrollingtable > div > div > table {margin-right: 17px;}</style>
<![endif]-->
<html manifest="example.appcache">
<head>
You just need the "manifest" in the tag. Then, the example.appcache file would be:
CACHE MANIFEST
CACHE:
http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css
http://code.jquery.com/jquery-1.10.2.js
http://code.jquery.com/ui/1.11.4/jquery-ui.js
NETWORK:
*
http://*
https://*
Just include in the CACHE section whatever static content your site uses.
You can also put a version number or date in the manifest file to make sure the browsers gets the new content when needed.
Caching is used to avoid redownloading files that are reused very often (across several pages or several sessions), but it targets mainly those files that fall under the category of "assets" (CSS, javascript, images, etc.), and which are expected to remain frozen. However, the content of webpage (the HTML) is NOT expected to remain frozen (eg. search results, etc.), and is usually reasonable in size, so there's no real reason to bother caching it (who still has a 56k connection really ?).
Then, there is the case of HTML "static pages", but usually those pages contain only text, and text is very light (unless you have a full book) compared to other media, so most people don't bother about it.
Now if you really want to "cache" the HTML, well it's exactly the same as keeping an offline version, so why not Appcache ?.

Force clear cache in OpenUI5

I have created an OpenUI5 app and I want to relase a new version daily.
But I found some problems:
Not always on the client browser is loaded the last version of javascript (I have a label that show the version and to see the last number is requred a manual refresh by F5)
I have a JSon file that i use to bind a menu. If I modify it, on the client browser it remains in cache and also with F5 not load the new version. The solution is clear data of browser (...)
Now I have this meta-tags on my index page:
<meta http-equiv="expires" content="0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
Is there a way to force the reload of all content always? (or when I modify the version number?)
This really depends on what server you are using to serve the content and whether you can set the headers when it serves the various JS files to the client. Unfortunately this is probably just disabling the cache all the time.
There is also a built in concept called "Cache-buster" which is documented here - OpenUI5 Cache Buster. This does something clever and puts a timestamp or version number in the url which is read from a config file. If you are hosting on an ABAP stack then this is built in for you and easy to enable, if you aren't it's still easy to manually implement.
I have solved my problem using ONLY
<meta http-equiv="cache-control" content="no-cache" />
as show in this post:
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching

retrieving cached pages

I have a simple website created using JavaScript and jQuery. The website contains 4 web pages and is hosted on a web server. The issue is I want to be able to navigate through these 4 pages when I don't have access to the server (no wifi or otherwise). The way I'm linking the pages (if that has an effect) is using
window.location.href="page1.html";
the click function for one of the buttons on the home page is as so
$("#btnOne").click(function() {
window.location.href="page1.html";
return false;
});
I thought of using post but on the jQuery website it says "Pages fetched with POST are never cached"
Is there an effective way to accomplish what I want; having the pages cached into the browser so its available to use offline?
CACHE MANIFEST
# 01-AUG-13 215
CACHE:
css/stylesheet.css
css/custom-theme/jquery.mobile-1.3.2.min.css
home.html
page1.html
page2.html
js/jquery-1.9.1.min.js
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
</head>
Sounds like what you want is the HTML5 appcache:
<html manifest="example.appcache">
...
</html>
Which lets you specify a manifest for your site and dictate what pages should be cached etc.
In the manifest file you indicate what resources you want to be cached...
CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png
# Use from network if available
NETWORK:
network.html
# Fallback content
FALLBACK:
/ fallback.html
There's some great detailed information over on HTML5 Rocks as well as some technical gotchas you might run into.
Save the four html files and any required "resource" (javascript, css, images, etc) files on your local machine. When you want to use your site off line, open the landing page on your local. Most operating systems, when you open (click on) and html file will run your default browser and render that page. Links will be followed to the additional pages. This works for sites that are static (eg. html) on the server side. They can be dynamic on the browser side.

Categories

Resources