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.
Related
The files listed in the .mf file are the same files i am trying to load when the page first runs. Does having a manifest attribute defer processing of the rest of the document until the appcache loads?
No. On the very first load the cache gets built in the background, using the same files that where just downloaded, provided they have proper cache settings. E.g. If you have foo.css with long cache headers in your HTML page and the manifest, the browser will:
Load and render the page.
Look at the manifest.
Load foo.css from browser cache to appcache.
BUT: Appcache will however result in a FOUC (brief white page on reload), even if online and the page/app was made well enough so far to show smooth reloads.
With AppCache, the browser loads the document and its associated resources directly from the cache, without accessing the network, so this should load just as fast if not faster.
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 *
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.
I want to use html5 manifest file. To cache the mose important things of the website. I have make a manifest file and cache the most important things. I cache the important images that are used in all the pages. And i cached the css file. But this is going broken.
This is my manifest file:
CACHE MANIFEST
# VERSION 10
CACHE:
static/img/bg-friends-selection.jpg
static/img/bg-home.jpg
static/img/bg-selection.jpg
static/img/logo.png
static/css/style.css
But now the problem. When i open the page. The first time it's good. But when i open the page for the second time. The images and items that i not cached. Are not loaded. How can i fix that.
Here you have a live link
The live link site doesn't specify a manifest attribute in the <html> tag. You need to point your document at the manifest so it knows what to cache.
In any event, you probably want this at the bottom of your manifest file:
NETWORK:
*
See HTML5 cache manifest: whitelisting ALL remote resources? for more information.
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.