Access Uncached Files with HTML5's AppCache?

Question

I have been trying to figure out HTML5's new AppCache, but I feel extremely limited here.

Let's assume that I have a website with four pages:

index.html
about.html
portfolio.html
contact.html

I have the above resources outlined in the manifiest, along with all of the website's resources. The manifest looks like the below:

CACHE MANIFEST
# 2013-05-23 2:33 PM

# Master Manifest
index.html
about.html
portfolio.html
contact.html
styles/reset.css
styles/styles.css

NETWORK:
*

I have added the appcache file type to the server configuration and have used the correct HTML tag attribute on each page listed above. Just for the record, the element looks like so:

<html lang="en" manifest="example.appcache">

I have tested this setup out on my mobile device, and everything works perfectly fine... Unless I don't load every page. It seems that I have to go to each page and cache it via my mobile browser, after which I may turn off DATA and go offline for my device to be able to browse the APPCACHE'd website.

But, here's my question - How do I setup AppCache to allow me to go to index.html, cache that page, and cache the rest of the resources in the manifest? Without having to visit and manually cache each resource?

If you cannot, then I would have to ask; doesn't that sort of defeat the idea behind AppCache and Offline Accessibility?

Thank you so much for the help all! :)

adnrw adnrw · Accepted Answer · 2013-05-31T05:44:32

You shouldn't need to visit every page. I know you mentioned you've set the MIME type in Apache, but are you 100% certain it's working correctly?

You can check it by opening your manifest in a browser and checking the Response Headers in Chrome Web Inspectors's Network tab:

cache-manifest MIME type

Content-Type should be text/cache-manifest

It's a bit hard to debug without having access to your site, but here's some instructions for how to interpret what happens in Chrome's Web Inspector with AppCache to help you debug the problem yourself:

The Resources tab will show you the contents and status of the Application Cache. It looks like this whilst it's downloading files:

enter image description here

The console will also log events when it's downloading:

Application Cache Progress event (0 of 48) http://cachedfile.url

Once it's done downloading it'll look like this and show you the list of cached files:

enter image description here

When you go back it'll log three events (assuming there aren't any changes):

Document was loaded from Application Cache with manifest http://manifest.url

Application Cache Checking event

Application Cache NoUpdate event

And then when you're offline it looks like this:

enter image description here

Hopefully between the console and the appcache table you'll be able to figure out what's happening.

Access Uncached Files with HTML5's AppCache?

4 Answers