Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML 5 offline storage cache manifest not working

I'm trying to get HTML5 offline storage working in a basic way. I read the information on DiveIntoHTML5 and it seems to make sense, but it just doesn't seem to be working for me. I wondered if someone could help me to debug this.

Basically I've set up a home page for the application, index.htm. So my application is on the web at http://www.mydomain.com/online/index.htm. Users will visit this page, where they'll ordinaraily do all of their stuff day-to-day. Visiting this URL will create a bunch of cached files so they can then visit http://www.mydomain.com/offline and view a working version of the application when they're offline.

The top few lines of code in the online homepage are:

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
   ...etc

I've generated a plain text file called 'cache.txt' and added the following content to it in Notepad:

CACHE MANIFEST
http://www.mydomain.com/offline/scripts/jquery-1.6.3.min.js
http://www.mydomain.com/offline/scripts/jquery-ui-1.8.16.custom.min.js
http://www.mydomain.com/offline/scripts/modernizr.min.js
http://www.mydomain.com/offline/scripts/json2.min.js
http://www.mydomain.com/offline/scripts/jquery.deserialize.js
http://www.mydomain.com/offline/scripts/jquery.cookie.js
http://www.mydomain.com/offline/scripts/main.js
http://www.mydomain.com/offline/css/main.css
http://www.mydomain.com/offline/css/structure-details.css
http://www.mydomain.com/offline/css/ui-lightness/jquery-ui-1.8.16.custom.css
http://www.mydomain.com/img/header.gif
http://www.mydomain.com/offline/img/bg.png
http://www.mydomain.com/offline/img/header_riser.gif
http://www.mydomain.com/offline/img/logo.png
http://www.mydomain.com/offline/img/offline.png
http://www.mydomain.com/offline/index.htm

I've then renamed this file to 'cache.manifest' and uploaded it to the root of the online application (at the same level as my home-page) so that it's accessible at http://www.mydomain.com/online/cache.manifest.

The hosting company have supposedly added the content type of 'text/cache-manifest' to all files with the extension of .manifest in IIS. I think this is working because when I view the file in Firefox at http://www.mydomain.com/online/cache.manifest Firebug tells me the content type is:

Content-Type    cache-manifest

Or should this be returning 'text/cache-manifest'? Perhaps this is the problem?

When I view the offline storage folder on my system (C:\Users\Me\AppData\Local\Mozilla\Firefox\Profiles\b12u6xza.default there's nothing in there related to this domain at all.

Can anyone suggest what might be going wrong - as I'm a little stumped?

like image 305
Dan Avatar asked Oct 04 '11 10:10

Dan


People also ask

Does HTML manifest file have fall back support?

The Manifest File NETWORK - Files listed under this header require a connection to the server, and will never be cached. FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible.

What is manifest HTML?

The manifest attribute of the <html> element specifies a URL of an application cache manifest that is downloaded in the early stages of page load. Note: manifest-based caching mechanism has been deprecated. Use service workers instead.

What does the Appcache manifest file contain?

The CACHE section contains files you want to load and store on the user's machine. The first time the user loads your app, the browser will store all the files in the CACHE section of your app cache manifest. The NETWORK section contains all the resources that require a network connection to be loaded.


2 Answers

First of all, the specification have changed, you should now use .appcache as manifest extension.

Second, the mime type should be defined as you say text/cache-manifest. I'm not really related to IIS but seems like there's two ways to add this MIME type , either trough IIS administration UI or via web.config file

Also, I would recommend you testing this with Google Chrome, since its console show all the manifest parsing data and errors, including when the manifest MIME type is not being correctly recognized.

like image 130
Edward B Avatar answered Oct 25 '22 00:10

Edward B


There are some issues you have to be care about:

  1. Chrome (And I guess that all the browsers at last) only handles the cache file over secure requests. If your request is not secure, your cache won't be executed.
  2. Mobile browsers (At least, the devices I could test), doesn't care about secure or unsecure requests. But I'd prefer to be ready for the politics change.
  3. I was breaking my head trying to understand why in Android my file worked fine and in iOS it was failing, and the reason was that I was running my browser in incognito mode. iOS in incognito mode can't cache the page, and you get error.

If I find more issues, I'll write it down.

Regards.

like image 43
Anibal Itriago Avatar answered Oct 25 '22 00:10

Anibal Itriago