In one of the online documents that talks about appcache for HTML5, it indicates that the cached files get updated once an offline user reconnects. I checked the original HTML5 appcache definition by W3, and I am not able to find anything that supports this statement.
Does anyone know if this is to be true?
Thanks in advance
MDN says the following, although if you scroll up on that page it says it's being deprecated.
If an application cache exists, the browser loads the document and its associated resources directly from the cache, without accessing the network. This speeds up the document load time.
The browser then checks to see if the cache manifest has been updated on the server.
If the cache manifest has been updated, the browser downloads a new version of the manifest and the resources listed in the manifest. This is done in the background and does not affect performance significantly.
And logic tells me that it would also depend on the app you're using, server you're trying to connect to and any special settings it might have, how long your browser keeps it's history, what it keeps, and if you saved the page to view offline - whether or not you have all the code/images saved in the right location(s).
Example:
Imagine you saved a page to view offline, and that page has a JS event handler that ran a while loop that did an ajax request every n seconds to do something, like make a number on a page change as long as you were online... As long as the loop is running, you suddenly connect to the internet, and it makes the request to the proper url with the right arguments, then it should go through, even though the url in your browser might say something like file:///C:/Users/you/Desktop/....
I've done this before, even though my url was like the one above. One time I was using braintree's drop-in javascript to a website, and using it's api on my backend. Trying to load the page when offline = Nothing. Online = Updated the spot on the page just fine when I had the required arguments, and it was pointing to the right url. If I got offline again, I could refresh the page, see the same images loaded in the <div>, but I couldn't send any data with it.
Related
I opened my website in Chrome last night, then closed that tab, but didn't close browser. Today I failed to open my site in a new tab because jQuery(not use CDN) hits a syntax error: unexpected end of input.
My site always hits this error no matter how many times I refresh. But the error didn't happen again after hard refresh.
This problem happens many times in recent months.
I checked Chrome devtool, it says my jquery.min.js is loaded from memory cache. And it is not a whole file, only contains part of jquery library. That's why I got syntax error.
I did some research from google:
The lifetime of memory cache is attach to the lifetime of render process, which roughly corresponds to a tab.
So if I create a new tab to visit my site, stands to reason, jQuery should not be loaded from memory cache.
I expect browser do not load my files from memory again if I visit site in new tab.
Is there anything I can do to locate the problem source and fix it?
EDIT (2019-05-13):
Today hit this error again, but fortunately, I found new point seems helpful to this problem.
This is that request:
See status code is 206 Partial Content (from memory cache).
And I have no idea why my request header contains 'Range' field.
You can't detect newtab in browser and load your jquery.min.js,But you can avoid loading from cache by adding timestamp into suffix of your lib like follows.
http://yoursite.com/lib/js/jquery.min.js?1557301884
You can achieve this in two ways
Case:1 If you are using server side page rendering means(PHP,JSP) just print the timestamp
Case:2 If Client side means some javascript stuff you have to do
I am attempting to make a webpage available offline.
I have added <html lang="en" manifest="cache.manifest"> to my page.
I have created cache.manifest with the following content:
CACHE MANIFEST
css/base.css
http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css
http://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.woff
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
css/affixed-sidebar.css
css/bootstrap.css
css/components.css
css/dodfont.css
css/helpers.css
http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
http://www.parsecdn.com/js/parse-1.3.0.min.js
http://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.1/toastr.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js
http://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js
http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js
http://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=js&skin=sunburst
js/components.js
js/so-cat.js
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0
fonts/glyphicons-halflings-regular.woff
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0
fonts/glyphicons-halflings-regular.ttf
http://fonts.googleapis.com/css?family=Raleway:400,200
http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css
fonts/glyphicons-halflings-regular.woff2
fonts/glyphicons-halflings-regular.woff2
fonts/glyphicons-halflings-regular.woff
fonts/glyphicons-halflings-regular.ttf
When I first visit the page in chrome, the browser will deliver the page and cache the page and all of the resources.
I expect that when I leave the page and come back, I will be served the live version of the page and I will only ever see the cached version if the server is not available.
Instead, on every visit after the first, I am served the cached version of the page. I can confirm I am seeing the cached version because, if I change the html file and refresh the webpage, I do not see the changes. If I clear or disable the cache and refresh, I see the changes as expected.
What do I need to do to ensure that, if the server is reachable, I am always served the live version of the page and all of its resources?
What do I need to do to ensure that, if the server is reachable, I am
always served the live version of the page and all of its resources?
Unfortunately, the simple answer here is: You can’t. For real. That is, at least not if you’re using a cache manifest. This a well-known serious design bug in the HTML5 appcache/offline-cache mechanism. It’s essentially broken by design.
And that's why using appcache is basically no longer recommended. It's just too broken.
And that's why the Offline Web applications section of the HTML Standard now says this:
This feature is in the process of being removed from the Web platform.
(This is a long process that takes many years.) Using any of the
offline Web application features at this time is highly discouraged.
Use service workers instead.
The only way to work around it and make clients quit using the cached contents is: completely remove your cache.manifest file from the server.
Do that and they’ll go back to fetching the current content.
The good news is that there’s a much better solution for offline Web applications in the works: Service Worker—more specifically, the Service Worker Cache and CacheStorage interfaces.
well ..
Solution 1 :
nowadays you can use ServiceWorkers but will only work over HTTPS .
Solution 2 :
you may add a hashed line and a version number to the manifest file like
# version 1.0.0
and change it every time you want to update the files in cache
Solution 3 :
you can use manifest in away that if online the browser will get the online data and if not you can write some js code to get some saved data .. maybe from indexedDB or localStorage
for more info read This Article
I've got an odd question. Say I have two HTML pages index1.html and index2.html. In both the pages is some jpg image called "Hello". When I use the browser to point to say www.testing.com/index1.html the browser will load index1.html and the image Hello.
Now my question is when I go click on some link in index1.html that takes me to index2.html, will the browser look to go to back to the server to get image Hello or will it use the Hello image used in index1.html?
It depends on the caching headers the server sends out alongside the image.
There are several ways in which caching can be done.
When a resource is served with an expiry date in the future, the browser will use its cached copy until that date is reached (or the cache is emptied or a refresh forced.
Another way is for the server to listen to the If-modified-since request header. The server can then check whether the resource has been modified since that date. If it hasn't, it will return a 304 not modified status; otherwise, the updated resource.
The Apache Caching guide is a (lengthy) introduction to the subject.
To see in your browser what caching rules apply, open its developer tools and look for the "Net" tab. It's a list of all the requests that were made in connection with the current page. It'll tell you whether a resource was loaded from the server, or a cached copy used.
For example, this result on a Stack Overflow image from Chrome's developer tools:
suggests the image was cached. When I click that row, I can switch to the "header" view, where I can see the exact caching instructions the server sends:
It means that as long as the browser has a cached copy of the image, it will keep on using that without ever checking with the server until December 17, 2014.
Different browsers handle this differently. It can also depend on user settings. Users can set the browser to cache nothing if they so desire.
I've recently added HTTP headers to my site to inform the browser to check with the server every time it comes across a given JS/CSS URL. I've tested it and it works perfectly; all browsers now make conditional GET requests.
Here's the problem though -- people still have the old headers cached; headers which more or less told the browser "cache this forever; don't bother asking for an update!". This can be busted with a hard refresh. I don't want to have to communicate to everyone to please hit F5 on any buggy pages after we push out code.
Are there any HTTP header(s)/HTML meta tag(s) I could put on the HTML document itself to say "Browser, ignore the headers you have on the JS/CSS files and download the latest version of all the included files on this page"?
Eventually this problem will work itself out as more and more people clear their cache or learn to refresh on their own. But, I'd rather fix it now. Then in a month or so, I'll remove the HTML-level headers to get caching where I want -- on a per resource basis.
EDIT: I do not want to rename the resources or add on query parameters. That's what we used to use (?v=18, ?v=19, etc.) and it was a chore to increment that number every time we updated resources. Even doing that programmatically isn't the ideal solution; especially now that our server is configured correctly. It makes more sense to do it on the HTTP level so it works regardless of how you're accessing it -- included on a page, directly from the address bar, or otherwise.
pass a parameter to on the script source which will force a reload of the script... in fact you could do it by version or similiar
<script src="/test/script/myawesomescript.js?ver=1.0&pwn=yes" ...>
that would work and be seemless to the other users... when you feel like it has been long enough go back to the old way. but this will work if you want to force a refresh from users.
This method is utilized to prevent caching of webpages by some frameworks. Let me know if you were successful
http://css-tricks.com/can-we-prevent-css-caching/ -- here is a link to the concept for css (should work in js too) -- the biggest difference is you dont want it to never cache, so dont use a time stamp, use my style like from above :) enjoy!
Basically the only way is to get the browser not to use the cached URL.
One method is to use a cache-busting dummy parameter on the end of the URL.
some-name.css?q=1
That will force the browser to reload that file (because that URL isn't in the cache), and the downloaded file won't be cached because of your new headers. However: you may need to use this new name indefinitely, because you can't guarantee that once you leave off the dummy parameter again the cached version may still be used.
The other method is to completely rename the file.
my-new-name.css
Gurus of SO
I am trying to play with CACHE MANIFEST/HTML5. My app is JS heavy and built on jquery/jquerymobile.
This is an excerpt of what my Manifest looks like
CACHE MANIFEST
FALLBACK:
/
NETWORK:
*
CACHE:
/css/style.css
/js/jquery.js
But somehow, the app doesn't load the files the first time itself and the entire app breaks down.
Is my format wrong?
Should I never load JS into the Cache?
How should I treat this differently to always check the network first if anything isn't available and only load stuff available from the Cache?
Thank you.
I tried a simple page with your cache manifest and it worked fine for me, so I'm not really sure what the problem is. But,
Yes, there is something wrong with the format. The entries in the FALLBACK section need to have two parts: a pattern, and a URL. This says "if any page matching the pattern is not available offline, display the URL instead (which will be cached)." The main example of this (as shown here) is "/ /offline.html", which means "for all pages, if we are offline and they are not cached, display /offline.html instead." However, I don't think this is the source of your problem since I tested it with your exact manifest and it still worked.
There is nothing special about JS files. It should be fine to load them into the cache.
I don't understand the third question. There are possibly two goals here: a) how do you check to see if there is a newer version of the file available online first, before going back to the cache, and b) how do you check the network to see if there is a file that is not cached, and if we are offline, fall back to an error page. The answer to (a) is that once you have turned on the cache manifest, things work very differently. It will never check for new versions of the files unless there is a new version of the manifest also. So you must always update the manifest whenever you change any files. The answer to (b) is the FALLBACK section.
See Dive Into HTML5's excellent chapter on this, particularly the section "The fine art of debugging, a.k.a. “Kill me! Kill me now!”" which explains how the manifest updates.
Also I don't think we've gotten to the meat of your question, because it's unclear what you mean by "the app doesn't load the files the first time itself". Which files don't load? Do they load properly after a refresh? Etc.
The only way I got this to work to refresh a cache was to rename the manifest file with a commit number or timestamp, and change the cache declaration to
<html manifest='mymanifest382330.manifest'>
I made this part of my build.