I don't know how to ask this question but, i am developing a single page application(SPA) using nodejs on the server side and whenever the data gets updated the user gets informed, however if the user has refreshed wouldn't the json data and every script file just vanish an get requested from the server again?
How can i prevent the javascript files and specifically the file that has the json data from being requested again on page refresh?
is there a way to solve this problem?
JavaScript files are not special. Just like images, style sheets, and HTML files, they get re-requested as necessary by the browser.
And so the same techniques for minimizing re-retrieval of them apply. The browser can reuse its cached copy of the file if you configure your web server to set appropriate caching headers when responding with the file data (provided the browser still has a copy).
You can see an example of this on the Google Libraries site. If you request a specific version of a library file (say, jQuery 1.10.1) when your web console open to the network tab, you'll see that Google returns it with these headers (irrelevant ones omitted):
Age: 238894
Cache-Control: public, max-age=31536000
Date: Thu, 09 Jan 2014 20:47:08 GMT
Expires: Fri, 09 Jan 2015 20:47:08 GMT
Last-Modified: Tue, 09 Jul 2013 11:31:25 GMT
Note that the file is allowed to be cached, without revalidation, for a year. So if the user refreshes the page, the browser can reuse its cached copy (if it has one). (This is not what Google does if you use one of the wildcard "any version of jQuery 1.10" URLs, because of course the tip version changes...)
Some browsers may bypass their cache with a refresh (particularly a "force" refresh like Ctrl+F5). In that case, they may at least send an If-Modified-Since request.
If you want to prevent cache and reload javascript at every request, make suer you use the correct header:
Cache-Control:max-age=0
Your browser will undertand to refresh all resources at every request.
For a better understanding about cache, please give a look at this A/Q
As for json data, you can save it in local storage (http://www.w3schools.com/html/html5_webstorage.asp)
Perhaps you can try Application Cache and Local storage.
Related
We noticed Chrome caches files locally and doesn't even send a request to our server to check if there's a newer version of the javascript file.
Example of HTTP response headers for a js file that Google cached:
Accept-Ranges:bytes
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Content-Encoding:gzip
Content-Length:5479
Content-Type:application/javascript
Date:Tue, 12 Jan 2016 22:46:07 GMT
ETag:"7d68e1ceb647d11:0"
Last-Modified:Tue, 05 Jan 2016 12:44:25 GMT
Server:Microsoft-IIS/8.5
Vary:Accept-Encoding
x-robots-tag:noindex
Is it valid that Chrome cached the file? There's no Cache-control header or something that declares that the file can be cached locally, it only has ETag and Last-Modified.
BTW
Is there a way (maybe a header) to instruct Chrome to check if the cached file has changed without appending version to the file name? Setting no-cache is not an option since I do want it to be cached, but I want to use the ETag and Last-Modified headers as it should.
Unless specifically constrained by a cache-control (section 14.9)
directive, a caching system MAY always store a successful response
(see section 13.8) as a cache entry, MAY return it without validation
if it is fresh, and MAY return it after successful validation.
You can always use the must-revalidate directive.
When the must-revalidate directive is present in a response received
by a cache, that cache MUST NOT use the entry after it becomes stale
to respond to a subsequent request without first revalidating it with
the origin server.
Source
For one of my projects I had the following paths available in a web application:
/one
/one/two
/one/two/three
Each of the different paths are variable and used cookies as part of their variability, I had created the following cookies:
one=1; Max-Age=9600; Domain=.test.test.com; Path=/one; Expires=Wed, 30 Jul 2014 20:26:09 GMT
two=2; Max-Age=9600; Domain=.test.test.com; Path=/one/two; Expires=Wed, 30 Jul 2014 20:26:09 GMT
three=3; Max-Age=9600; Domain=.test.test.com; Path=/one/two/three; Expires=Wed, 30 Jul 2014 20:26:09 GMT
When accessing the URL (I was running my test on http://test.test.com setup in my hosts file) at the following locations I received the following results:
Visit http://test.test.com/one the correct cookie (one=1) was sent to the server, but document.cookie was empty.
Visit http://test.test.com/one/ the correct cookie (one=1) was sent to the server and document.cookie also had the correct cookie (one=1).
Visit http://test.test.com/one/two the correct cookies (one=1 and two=2) were sent to the server, but document.cookie only contained the first cookie (one=1).
Visit http://test.test.com/one/two/ the correct cookies (one=1 and two=2) were sent to the server and document.cookie also had the correct cookies (one=1 and two=2).
Visit http://test.test.com/one/two/three the correct cookies (one=1, two=2, and three=3) were sent to the server, but document.cookie only contained the first two cookies (one=1, two=2).
Visit http://test.test.com/one/two/three/ the correct cookies (one=1, two=2, and three=3) were sent to the server and document.cookie also had the correct cookies (one=1, two=2, and three=3).
This utterly confounded me, and through a bunch of testing I was only able to find Internet Explorer being impacted by this issue, please see the answer for additional details.
Due to the constraints of my project I needed to have the ability to keep cookie names the same at each of these paths and also vary them by path, so I wasn't able to come up with any solution for my situation where I could use cookies without requiring a trailing slash at the end (which due to my constraints I cannot do).
If you are running into a similar issue there's a couple things that I can think of doing:
If the name of your cookies can vary, you could use different names for each of the paths and keep the path either at the root (path=/)
If the name of your cookies cannot vary but it doesn't matter if they go up a level in the path you could do that (in my case the cookie three=3 could be placed up one directory at path=/one/two if my constraints didn't prohibit me from doing that.
If your constraints don't prohibit you from requiring trailing slashes you could simply have your webserver enforce trailing slashes and redirect to a path with them when they aren't present.
If you run into the same issue with similar constraints to mine you could just move to another storage device instead of cookies. There's other modern pieces such as localStorage and sessionStorage which would allow you to store your data in a more structured way so that you can handle the logic. Note: This only works when you don't need the data from the cookie server side.
In the end what I ended up doing was moving the cookie that I didn't need server side (three=3) to use a convention instead of configuration via cookie within the project and kept the other ones as is since the other two cookies (one=1 and two=2) are only used when visiting the path http://test.test.com/one/two/three and so they are still available through document.cookie in Internet Explorer.
I have a web application that lets the browser cache AJAX requests result for a long time. I have found out how to make a request that bypasses the cache entirely, when probable modifications are detected. But I would want to let the user trigger a data refresh.
In this scenario, I'd like the browser to check with the server if the cache is stalled but use it if it is not (that is, if the server responds with a 304 code). The goal is to spare the loading time because the data is huge.
The server includes the following headers in all responses:
Cache-Control: private, max-age=604800
Last-Modified: ... # actual last modification date
I managed to burst the cached object entirely in Chrome (not tested other browsers yet) by using the following HTTP headers in the request:
Cache-Control: max-age=0
If-Last-Modified: Tue, 01 Jan 1970 01:00:00 +0100
The If-Last-Modified line is the one that really has an effect. Chrome seems to ignore the Cache-Control header in the request.
I have also found that using Cache-Control: must-revalidate in the server response forces the browser to validate its cache with the server for each request.
But is there any way to revalidate for just one precise request, decided on the client-side?
Note that I'm not specially attached to doing this with HTTP headers, so any other method that I would not be aware of is welcome!
you can add a url parameter which value base on time to clean cache for just one precise request.
$.ajax({
url:"/questions?nocache="+Date.now(),
"success":function(data){
console.log(data);
}
});
How do I send an HTTP response that any client would cache forever (or until its cache is cleared), such that when the browser needs that resource, it makes no HTTP request and instead retrieves the HTTP response from the local file system?
Usage note: this is for versioned client code in an Ajax application. Everything is accessed through the uncacheable example.com/front.htm, which merely contains a script tag linking to example.com/currentversion/bootstrap.js which is cached indefinitely. Because the uncacheable HTML file determines the current version, there is no need for the client to update scripts.
According to the RFC, "to mark a response as 'never expires,' an origin server sends an Expires date approximately one year from the time the response is sent. HTTP/1.1 servers SHOULD NOT send Expires dates more than one year in the future."
See http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.21.
I don't know what the reasoning behind the one-year limitation is, so take it for what it is.
Cache until 2038. You can't go any farther than that (reliably) because of the 32-bit Unix Epoch bug. Use this header:
Expires: Sun, 17 Jan 2038 19:14:07 GMT
I am trying to refresh a page, but WANT to use the cache and can't figure out how to do this. There are two situations:
If I click in the URL bar and hit enter (or visit the page from somewhere else) it reloads the page/images from the cache. GREAT!
If I click on the refresh button or use Javascript to refresh the page it grabs all the images again and takes forever. NOT GREAT!
I've tried: top.location.reload(false); and top.location.reload(true); (I'm sending this from in an iFrame) and neither used the cache. I'm avoiding using location so it doesn't end up in the browser history twice.
Question: How do I reload the page using the cached images? Is there a different javascript function or is this a mod_expires issue?
Thanks for any help in advance!
EDIT: (info from chrome: developer tools)
When navigating to the page I get "From Cache" for all images
When refreshing page I get "304 - Not Modified" for all images (and it takes the time to download each)
EDIT 2: (Headers from an image, safari: developer tools)
Javascript: top.location.reload(false); (No Cache!)
Status Code:304 Not Modified
Request Headers
Cache-Control:max-age=0
If-Modified-Since:Tue, 28 Jun 2011 07:13:17 GMT
If-None-Match:"104684ae-a7d-66e41d40"
Referer:http://getdirectus.com/dev/media.php
User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-us) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
Response Headers
Cache-Control:max-age=157680000
Connection:Keep-Alive
Date:Tue, 28 Jun 2011 16:56:50 GMT
Etag:"104684ae-a7d-66e41d40"
Expires:Sun, 26 Jun 2016 16:56:50 GMT
Keep-Alive:timeout=5, max=94
Server:Apache/2.0.54
Navigating to page: (Uses cache)
Status Code:200 OK
Response Headers**
Accept-Ranges:bytes
Cache-Control:max-age=157680000
Connection:Keep-Alive
Content-Length:2685
Content-Type:image/jpeg
Date:Tue, 28 Jun 2011 16:54:20 GMT
Etag:"104684ae-a7d-66e41d40"
Expires:Sun, 26 Jun 2016 16:54:20 GMT
Keep-Alive:timeout=5, max=99
Last-Modified:Tue, 28 Jun 2011 07:13:17 GMT
Server:Apache/2.0.54
The documentation for window.location.reload( false ); says it will load from cache. If that isn't happening then you may be seeing a browser bug. See if you can replicate the problem in another browser.
EDIT (for your edit): You are seeing that behaviour because you don't have an Expires header set in the future. You will need to add an Expires header in Apache.
window.location.href = window.location.href;
If the location contains a #, be sure to remove it before setting href.
If you want to enable caching in the client, mind sending Expire headers, e.g. with mod_expires
Using this site, I only got green image with location.refresh(true);. With location.refresh(); or location.refresh(false); I got the red image. Working ok, I guess.
There are two separate things to consider here:
1: the request... browser -> server
2: the response... server -> browser
When you refresh a page you cannot get around the browser doing a requests for page assets to the server.
What you can do is make sure the server sends a minimal response.
The best way to achieve this, is to use etags in your response headers. That way the browser will send a if-none-match request to the server, and get a 304 Nothing changed response back assuming nothing has been modifed.
Your second request was initiated by manually refreshing the page. When you do this, the browser sends up an additional cache-control:max-age=0 header with the request. This is where the 304 (Not Modified) is coming from.
If you navigate within the site (using links), the browser will continue to use its cache.