I have been using appcache with an unchanged index.html for quite some time. It was not explicitly listed in the manifest, but cached anyway as a master entry.
Now index.html changes and I'm running into this problem:
All resources are fetched and cached properly, however the master entry remains old and the website breaks. I tried listing index.html explicitly in the manifest. Chrome devtools shows the dilemma very well:
The old index.html remains as master. The new one gets cached explicitly but doesn't swap.
This error happens as described in Chrome. FF and Safari work fine. IE 11 displays "Resource doesn’t exist on the server" and "Appcache Fatal Error".
The manifest looks like this:
CACHE MANIFEST
# vX.X.X
NETWORK:
*
CACHE:
index.html
app.js
app.json
favicon.ico
... (+100 more files)
Found it:
To fix a framework bug, I had a server-side redirect to add a query string param. Swapping the appcache from https://example.com to https://example.com?myparam broke the appcache in Chrome and IE.
Faced with the same problem and solved it without server side manipulations.
So all you need is to add script to your <head> tag:
<script type="text/javascript">
window.applicationCache.addEventListener("updateready",
(event) => { window.location.reload(true) });
</script>
Some explanations you can find in my post here, if you interested:
AppCache doesn't swap index.html file
Related
I'm using a .manifest file to tell browsers what resources to cache. Basically contains the following:
CACHE MANIFEST
# This manifest was generated by grunt-manifest HTML5 Cache Manifest Generator
# Time: Fri Jul 24 2015 09:57:13 GMT+0100 (BST)
CACHE:
app.min.js
app.min.css
js/libs/require-min.js
img/leaf.png
NETWORK:
*
This file is linked in the HTML as follows:
<!DOCTYPE html>
<html manifest="/app.manifest">
<head>
<style type="text/css" media="all">
....
Following reports from Safari users that their UI wasn't respecting the cache file, I changed the filename from manifest.appcache to app.manifest after reading that Safari requires manifest files to have the .manifest extension.
I'm now seeing (in Chrome especially) that the browser hasn't re-fetched the HTML source, so isn't seeing that the manifest file has changed, so isn't loading the new app.manifest file, and is failing to download any of the source. The cache headers (Expires, ETag and Last-Modified) for the /index HTML file have all changed, as has the content of the file, yet Chrome refuses to re-fetch the HTML unless the cache is disabled via devtools.
Does anyone know why Chrome is being so aggressive in holding onto this cached HTML? Any ideas as to how I can get it to re-fetch?
Make sure that /manifest.appcache returns a 404, that's what makes browsers understand that it's obsolete now, they will remove all local cache and reload the page next time, so they'll get it at the new location.
You need to make a change to the the old manifest file (manifest.appcache). Your /index file is a part of the appcache and it's still being used by Chrome.
From the HTML5 recommendation:
Note: Authors are encouraged to include the main page in the manifest also,
but in practice the page that referenced the manifest is automatically
cached even if it isn't explicitly mentioned.
Chrome gets the old manifest and there are no changes so it carries on. Try to add a random comment to manifest.appcache and try again.
HTML5 appcache is not working in chrome as expected?
For example
http://html5demos.com/offlineapp
when you load the above URL is will save locally,but when you refresh the page again it will not render properly.
MANIFEST file:
http://html5demos.com/html5demo.appcache
will cache the following files :-
images/shade.jpg
images/bin.jpg
/js/h5utils-offline.js
/css/html5demos.css
expect these files every other resources are not rendering when we refresh the page.
expected behavior:
All other resources(which are not in MANIFEST file) should load properly when user comes online.
but in Firefox this is working almost fine.
Why chrome is not working as expected ?
It will be great if there is some perfectly working demo.
html5 appcache is at risk and may be removed:
http://www.w3.org/TR/html5/
http://w3-video.com/Web_Technologies/HTML5/html5_attributes/html/html5_html_manifest_attribute.php
Non-cached resources will not load on a cached page. See Gotcha #5 from this article:
http://alistapart.com/article/application-cache-is-a-douchebag
Using the network wildcard:
NETWORK:
*
...would fix this.
I tried to execute the following set of coding which is already in w3schools
index.html has the following codings
<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>
<script src="demo_time.js"></script>
<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
<p><img src="logo.jpeg" width="336" height="69"></p>
<p>Try opening this page, then go offline, and reload the page. The script and the image should still work.</p>
</body>
</html>
demo_time.js contains the following
function getDateTime()
{
var d=new Date();
document.getElementById('timePara').innerHTML=d;
}
demo_html.appcache contains the following
CACHE MANIFEST
CACHE:
/index.html
/demo_time.js
/logo.jpeg
".htaccess" file contains the following
AddType text/cache-manifest .appcache
Please point out the mistake in this code. When i executed the code in my browser, firefox prompted me to This website is asking to store data on your computer for offline use. Allow, never for this site or not now. I choose Allow, but the prompt did not disappear even then.
When i tried the same in w3schools.com, the prompt disappeared after i clicked Allow. Please point out the mistake in the above code
Offline cache only works for remote files. When you run the page locally, it won't actually offline the files.
If you access your page via a server, you should see the offline cache working.
I changed the demo_html.appcache to the simpler
CACHE MANIFEST
index.html
demo_time.js
logo.jpeg
and that works for me in both firefox and chrome
Chromes "Resources" tab is really helpful for debugging the appcache:
I've been using HTML5 Offline caching on my website for a while and for some reasons I am considering turning it off. To my surprise it doesn't work.
This is how I've implemented HTML5 Offline caching.
In my index.html I give path to the manifest file
<html manifest="app.manifest">
In the app.manifest file I list all the js/css/png file that I would like to be cached by the browser for offline usage. Every time I deploy updates, I update the app.manifest file, which causes the browser to fetch latest version of all the files listed in the manifest file.
In order to turn off the offline caching, I changed my index.html's opening tag to
<html>
I made a dummy change to app.manifest file, so that browser (which has already cached my website), will detect the change and download latest version of all the files (including index.html).
What I noticed is, the browser indeed gets the latest version of all the files. I see the new <html> tag in the updated version without the manifest declaration, however the behavior of the browser for future changes does not change. i.e. I now expect the browser to immediately fetch the new version of the index.html file, when it's changed on server. However that doesn't happen. The browser doesn't download updated index.html until I make any changes to the manifest file.
Thus it appears to me that the browser has permanently associated app.manifest file with my website URL and it won't get rid of it even when I don't mention it in <html> tag.
I have tested this on both Google Chrome and Firefox, same results. I also tried restarting Chrome, but it won't forget that my site ever had app.manifest defined for it. I haven't found any discussion on this aspect of offline caching on the web.
Update: I managed to get rid of the behavior in Chrome by clearing all the browsing data (by going to settings). But that's not something I can tell the users to do.
Make the manifest URL return a 404 to indicate you don't want offline web applications anymore. According to Step 5 of HTML5 §5.6.4, this marks the cache as obsolete, and will remove it.
You can also manually delete the offline web application in Chrome by going to about:appcache-internals.
I'm trying to get a simple html5 webcache to work.
This is my one and only html page, index.html:
<!DOCTYPE HTML>
<html manifest="./main.manifest">
<body>
<p>Hi.</p>
</body>
</html>
This is my only cache file, main.manifest:
CACHE MANIFEST
# 2011-05-02-03
index.html
I'm running on apache shared hosting, I put a .htaccess file in my web directory where these other two files are, because I thought maybe I have to define the mime type:
AddType text/cache-manifest .manifest
So in the end I just have these three files in that directory:
index.html
main.manifest
.htaccess
When I visit the page on chrome from my mac, safari from my iphone, or chrome from my android 2.3 device, nothing happens, the page just loads as usual. If I turn airplane mode on (killing all connections) the page can't be loaded (so I guess caching failed).
What am I missing here?
Thanks
------------ Update ------------------
I think the mime type was not being recognized correctly. I updated .htaccess to:
AddType text/cache-manifest manifest
Now if I run in google chrome with console on, I see:
Document was loaded from Application Cache with manifest
http://example.com/foo/main.manifest
Application Cache Checking event
Application Cache NoUpdate event
Firefox prompts me when I load the page about the website wanting to let me store it to disk, so that's good. Looks like it's also working on android 2.3.4. The browser still says "This page cannot be loaded because you are not connected to the internet", but then it loads anyway.
Thanks!
First, you were right the first time on your mime type declaration. It should be like this:
AddType text/cache-manifest .manifest
Next, read this paragraph from Dive Into HTML5:
Q: Do I need to list my HTML pages in my cache manifest?
A: Yes and no. If your entire web application is contained in a single
page, just make sure that page points to the cache manifest using the
manifest attribute. When you navigate to an HTML page with a manifest
attribute, the page itself is assumed to be part of the web
application, so you don’t need to list it in the manifest file itself.
However, if your web application spans multiple pages, you should list
all of the HTML pages in the manifest file, otherwise the browser
would not know that there are other HTML pages that need to be
downloaded and cached.
So, in this case, you don't need a cache manifest. The browser will automatically cache your page (as long as it's the only resource, such as a CSS file or Javascript file, for example).
For more information, visit the link above.
I have had some trouble using "explicitly cached" items in my manifests, so I usually set it up like this:
CACHE MANIFEST
# 2011-05-02-03
CACHE:
index.html
But the other answer is correct, the browser will automatically cache any URLs that include an application cache manifest.
I recommend using Chrome's JavaScript Console -- it outputs application cache events as they are happening, including errors.