9

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!

5
  • 4
    not sure but I guess you do not need the ./ before manifest
    – chaitanya
    May 2, 2011 at 23:55
  • If you're having issues on the iPhone, it might be this issue: stackoverflow.com/questions/273350/…
    – Stoive
    May 3, 2011 at 0:26
  • 1
    Furthermore, the Google Chrome JavaScript console will output the progress of the application caching process, and you can check what the value of applicationCache.status is. Pasting it with your question would be really useful.
    – Stoive
    May 3, 2011 at 0:40
  • 8
    Could you move the solution to an answer and accept it?
    – Mu Mind
    Jun 29, 2011 at 0:43
  • Anyway suggested extension for appcache manifest changed to .appcache. html5.org/tools/web-apps-tracker?from=5811&to=5812 Jul 12, 2011 at 0:23

2 Answers 2

5

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.