I am trying to get the Cache Manifest to fallback to an offline.aspx page when offline.
So when the current page that contains the following cache manifest is loaded online it displays as normal, but when there is no internet connection offline.aspx is shown instead of the current page.
CACHE MANIFEST
# v1.39
NETWORK:
*
FALLBACK:
/ /offline.aspx
Is this possible? Am I understanding that you can replace the current page offline with a fallback page? Is my manifest file correct?
I replaced the /s with /*s and it still didn't work. Chrome Developer Tools shows the offline.aspx as in the cache as type 'Fallback' and the default.aspx as 'Master'. When offline the offline.aspx never gets shown - it still shows default.aspx. I'm going offline by disabling the Local Area Connection in the Network Adapters in Windows 7.
Check these examples:
static.html will be served if main.html is inaccessible
offline.jpg will be served in place of all images in images/large/
offline.html will be served in place of all other .html files (for your case try /* or *)
FALLBACK:
/main.html /static.html
images/large/ images/offline.jpg
*.html /offline.html
p.s.:
Your
NETWORK:
*
should be like:
NETWORK:
/ or /*
these question can help too: HTML5 Cache Manifest: Fallback section & Network *
Related
My appcache is given below and it works perfectly. It works great when i am offline and visit nocache.html page where it shows me offline.html page. Below is the working example -
CACHE MANIFEST
cache.html
NETWORK:
nocache.html
FALLBACK:
/ offline.html
Now i want to ask that when i change the fallback to -
FALLBACK:
nocache.html offline.html
then it does not work. Can somebody tell me what is the problem here?
If you change your network section entry to the more typical *, it works the way you expect.
CACHE MANIFEST
cache.html
NETWORK:
*
FALLBACK:
nocache.html offline.html
It's possible that by explicitly identifying nocache.html in the NETWORK section, the browser will not permit a FALLBACK for it.
I do not know if that is spec-compliant or not and I'm merely guessing, so comments or edits from more knowledgable people are welcome.
I am playing with HTML5 app cache and right from the beginning I ran into issues:/
I am trying to have simple offline fallback for my page so that there would be nice styled page instead of classic offline error. According to few resources I have red I created this manifest file.
CACHE MANIFEST
# 0.01
CACHE:
NETWORK:
*
FALLBACK:
/ /offline.html
The problem is, that the browser loads into the cache not only the offline.html file, but also the root page, which leads into that page is displayed with lot of errors (no js loaded, no imaged loaded, no CSS, ...) while offline and offline.html is completely bypassed by the browser.
The screenshot below shows logged information about caching progress. You can see there, that the browser downloads both files, instead of only the offline.html as I am trying to do.
All this has been done in latest dev Chrome (23.0.1262.0 dev)
The page which references the manifest file is always included in the offline cache. If you don't want the root page to be cached then you need to create a separate static page to reference the manifest and load it in an iframe.
I've been playing around with the cache manifest file and trying to get it to stop caching the page that it's declared on.
From HTML5 Rocks
any page the user navigates to that include a manifest will be implicitly added to the application cache
Ace. I want the manifest file to cache specific artifacts, one of which is an offline version of my online single page app HTML, but NOT to cache the online version.
This is how I solved the problem. My manifest file
CACHE MANIFEST
# Version 0.1
CACHE:
# Minimised Styles
/css/style.0.1.min.css
# Minimised JavaScript
/js/script.0.1.min.js
FALLBACK:
/ /offline.html
NETWORK:
*
Note everything that goes to mydomain.com/ when offline will now go to /offline.html (from cache)
Now, how to cache only what's in the manifest file, without including the online page at mydomain.com/.
Put the following iframe at the bottom of your page at mydomain.com/
<iframe src="/offline.html" style="display: none;"></iframe>
And put manifest="myapp.appcache" in offline.html.
This means when mydomain.com/ is loaded it won't ever get cached (as there is no manifest attribute on the page). Then the browser goes gets the offline.html via the iframe and everything else you want caching is added using the instructions in the manifest file, including the offline.html page because of the presence of the HTML attribute.
The only overhead I can see is on first page load, the iframe will make an extra HTTP request, but once its cached it'll take it from cache, so not a massive problem.
Hey guys my Manifest is as follows:
CACHE MANIFEST
CACHE:
images/trunk/text/text-images.png
css/site.css
FALLBACK:
/ offline.html
NETWORK:
*
I've since fixed a random random problem whereby safari couldn't load google maps without NETWORK *. What I now want to do is ensure that if someone is offline they only ever hit that offline.html page, I've noticed its possible to sometimes hit a regular page, which looks relaly broken and then you only get transferred to the fallback page after requesting another page. Is tehre anything I need to add here?
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.