How to not tell browser not to save cache - javascript

I have a laravel 5.2 app. My problem comes every time I update my website, I have all my clients calling me because something is not working, and the problem is because some .js and .css are in the cache, and I have to explain them how to erase the cache.
What's the best solution?, How is the tag to tell the browsers to not cache my .js or .css (or some of them, specified)?.
Thank you

You can version your JS and CSS when including them in your HTML by adding a version to the tag, such as <link rel="stylesheet" href="style.css?v=3.4.1">
When you make a change to the CSS or JS, change the version, and anyone visiting the page will load the new version instead of relying on the browser cache.
If you are using elixir with Laravel there are options included for versioning and cache-busting https://laravel.com/docs/5.3/elixir#versioning-and-cache-busting

The way of making the browser will not save cache is by creating a new version for the source each time any user get to the web page.
The cache-buster query string can be updated so that the
browser doesn’t recognise the file in it’s cache and downloads a new
version.
I found a great information in the cache boosting link.
If you are using apache that link may be also very helpful.

In laravel there's a versioning for stylesheets and scripts. Use laravel-elixir can be found here.
If version only css stylesheet then you can use like:
elixir(function(mix) {
mix.version('css/all.css');
});
and you will have something like this all-16d570a7.css
If you want multiple files like css and js:
elixir(function(mix) {
mix.version(['css/all.css', 'js/app.js']);
});
And finally to run this versions you can simply enter the command below in your console:
gulp or to be more specific gulp version.
Hope this could help.

Related

How does "?v=" in HTML linking work?

I have been developing a website for testing new stuff, and I need to figure out the "?v=" thing. But I have no clue how it works, so can someone explain this to me please haha? Like how to, and how it works.
So what would this look like and how would the file names on the server vary for this:
<script src="assets/js/moticulous.js"></script>
<link rel="stylesheet" href="assets/js/platforms.css"/>
as opposed to this:
<script src="assets/js/moticulous.js?v=1"></script>
<link rel="stylesheet" href="assets/js/platforms.css?v=1"/>
This can be added to prevent Caching of js/css/image files. By adding ?anything=123 You force browser/client to download the updated version of js/css/image file from the server.
Read more on: https://css-tricks.com/can-we-prevent-css-caching/
That is a technique used to control caching of script, css and image files.
The browser will download the script file with the ?v=1 parameter (example"http://example.com/path/to/script.js?v=1") and cache it to the visitors disk. The next time the browser visits the page, if the URL is still "http://example.com/path/to/script.js?v=1" then the cached version will be loaded.
If you change the ?v=1 to ?v=2 then the cached version is no longer valid as the full URL is no longer the same as what the browser has cached. This results in a new file being downloaded, and cached. This forces recent changes to every visitor regardless of cache settings set at the server config or browser.
This technique is often used with a version number (likely why its a v=) to force a new download of the js when the software version gets updated.
In your backend code, you would replace the =1 part with whatever the current software version is to make this cache control dynamic. Alternately, you could increment the version number whenever the asset changes but that's less dynamic or more work to make it so.
The dummy HTTP GET string is passed to prevent caching as some browsers cache the .js and .css files. It is usually done to prevent the older version of the file from loading by the browsers via browser cache when a change is made to the .css or .js file. Adding the timestamp value to the name (as <filename>?<timestamp>) is more popular than adding the version as it forces the browser to download the files every time the page is viewed as no two request times have the same timestamp.

Trying to use jQuery for the first time and cannot download or link it?

I went to the jQuery download page and tried to download the uncompressed version of jQuery, when I left clicked the bottom left download button it seemed to start to download.
Then a dial appeared, which asked for permission to download the file, after accepting, it comes up with the following error:
Error: 'document' is null or is not an object
Code: 800A138F
Origin: Error at the time of running Microsoft JScript
Then tried right clicking the link and using the save as option to save it to the desktop under the filename jquery.js.
However, this failed to load jQuery as well and the same error appears when I try to link it to my website.
This is the filepath I'm using:
C:\Users\Mafe Cardozo\Desktop\jquery.js
And the actual jQuery file that I'm writing the code in to the html file as well is also in the same directory, assuming both links be written in the <head /> element(?)
Just use the CDN which you link to your html file by this line of html in your head tags.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
This will give you the latest version of the minified jquery. You can choose uncompressed or versions here.
There are many choices for CDNs such as Google. CDNs are from the web and are not local.
Alternatively, download the source here and then save it in the same folder of your html file. This will save the file locally. Then link it like so:
<script src="jquery-file-name"></script>
If you will have access to the internet when you are needing to use Jquery, then just use a JQuery CDN. That way you don't have to worry about downloading the whole library to your computer and making sure it is in the right spot.
Go to a site like this, click on the "copy" tag on the right, and copy the whole script element. Then paste that into your head/end of your body. For more information, look at the following posts about accessing the Jquery library.
Microsoft CDN for jQuery or Google CDN?
Benefits vs. Pitfalls of hosting jQuery locally
Just to add to the other answers, you are trying to access the js files with the https protocol, and apparently, it doesn't work. Just remove the https from the url or change it to http (https://code.jquery.com/jquery-2.2.4.js -> http://code.jquery.com/jquery-2.2.4.js) and it should work.

Javascript files won't reload? Ubuntu 12.04

I have this problem with my web server will not reload our javascript files when we eg overwrite with a new one, if for example, we have made ​​a mistake in the previous file.
If we just throw a file on top of the same name, update the file does not, we will have to create a new file with a different name.
Anyone have a solution to it?
It has nothing to do with Ubuntu nor JavaScript, but browser (or server?) caching.
The simplest way to force the non-cached version to be used is to add a version to your file when you update it, using a query string like this:
<script src="myScript.js?v=2"></script>
If you wish to always force the non-cached version, you can use the timestamp instead and get something like:
<script src="myScript.js?t=1407845240"></script>
Browsers will see these are different files and always load them from scratch. Both t and v are custom variables, so you can use whatever you want there - it's important that their value changes with each new version of the file (or automatic, if you're using the timestamp method).
Ctrl+F5 in your browser to refresh the page will force it to get your new JS file.

Force refresh of client browser

I have added a pretty substantial change to a javascript file. However, in order for the new changes to register, I need to refresh my browser. I imagine this is how it will be for all the other people using this site as well.
Is there a way to invalidate the client's browser cache and force it to download the new js file?
You can rename the file, or just add a random parameter when loading the file:
<script src="/javascripts/application.js?version=4" type="text/javascript"></script>
You can add an argument to the file name, like
<script src="script.js?rnd=2131231"></script>
There is a very comprehensive discussion here, with several ways to do this.
The recommended solution (mod_pagespeed) might not be the best solution for you in case your project is not big enough or you don't use apache, in which case I would recommend a format such as:
<script src="/{sha_1_here}/script.js"></script>
instead of a GET parameter, because apparently some browsers do not cache scripts with parameters.
This should work everywhere, and you just need to rewrite the URL server side.
For development purposes, I disable the cache on the browser side so that it fetches always.
But for production, to reset so that all client user's browsers should download the new version you can look at apache's settings to expire cached files.

Restart Apache Tomcat to serve changed Javascript files?

I was under the impression that if I deployed my application (using Ant) then JS files, along with HTML, CSS and images, would be automatically served by Tomcat.
However, after editing Javascript files I have to restart Tomcat in order for the changes to be updated.
My JS files are in a 'js' directory off of root (not in WEB-INF).
I am using FF3.6.
Any help?
I 've never worked with Tomcat but I find it hard to imagine it wouldn't serve changed JS files straight awayafter deployment. My guess is this is a caching issue on the browser's side. Can you try to force a refresh by opening the actual CSS file and pressing F5?
The usual approach to making sure a JS file gets updated is embedding it with a GET parameter that marks the version/revision:
<script type="text/javascript" src="/js/script.js?version=51"></script>
when you update the script's revision, and change the GET parameter, the browser should forget the cached version and re-load the file.
According to http://tomcat.apache.org/tomcat-5.5-doc/config/context.html
cachingAllowed -
If the value of this flag is true, the cache for static resources will be used. If not specified, the default value of the flag is true.
I found out that Tomcat reload files from the /temp directory which was set by setting antiresourcelocking to true in the context xml's. Thanks guys.

Categories

Resources