CODEWITHSUNDEEP
web-applicationshtml
digital
digital

Reputation: 2139

cache.manifest works first time then fails

I'm trying to add html 5 caching to a web app, nothing too complex just images/css/js.

When I load the page after editing the cache.manifest file I get the following debug in Chrome 8:

Creating Application Cache with manifest http://example.com/themes/zenmobile/cache.manifest
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 26) http://example.com/themes/zenmobile/plugins/img/toolbar.png
Application Cache Progress event (1 of 26) http://example.com/themes/zenmobile/plugins/img/greenButton.png
Application Cache Progress event (2 of 26) http://example.com/themes/zenmobile/plugins/jqtouch.transitions.js
Application Cache Progress event (3 of 26) http://example.com/themes/zenmobile/plugins/img/back_button_clicked.png
Application Cache Progress event (4 of 26) http://example.com/themes/zenmobile/plugins/img/button.png
Application Cache Progress event (5 of 26) http://quizible.com/sites/all/modules/jquery_update/replace/jquery.min.js
Application Cache Progress event (6 of 26) http://example.com/themes/zenmobile/plugins/img/grayButton.png
Application Cache Progress event (7 of 26) http://example.com/themes/zenmobile/plugins/img/chevron_circle.png
Application Cache Progress event (8 of 26) http://example.com/themes/zenmobile/plugins/img/on_off.png
Application Cache Progress event (9 of 26) http://example.com/themes/zenmobile/plugins/jqtouch.js
Application Cache Progress event (10 of 26) http://example.com/themes/zenmobile/layout.css
Application Cache Progress event (11 of 26) http://example.com/themes/zenmobile/plugins/img/chevron.png
Application Cache Progress event (12 of 26) http://example.com/themes/zenmobile/plugins/img/rowhead.png
Application Cache Progress event (13 of 26) http://example.com/themes/zenmobile/zenmobile.css
Application Cache Progress event (14 of 26) http://example.com/themes/zenmobile/plugins/img/loading.gif
Application Cache Progress event (15 of 26) http://example.com/themes/zenmobile/plugins/img/redButton.png
Application Cache Progress event (16 of 26) http://example.com/themes/zenmobile/plugins/img/activeButton.png
Application Cache Progress event (17 of 26) http://example.com/themes/zenmobile/images/bg_body.png
Application Cache Progress event (18 of 26) http://example.com/themes/zenmobile/plugins/theme.css
Application Cache Progress event (19 of 26) http://example.com/themes/zenmobile/plugins/img/toggle.png
Application Cache Progress event (20 of 26) http://example.com/themes/zenmobile/plugins/img/whiteButton.png
Application Cache Progress event (21 of 26) http://example.com/themes/zenmobile/plugins/img/toggleOn.png
Application Cache Progress event (22 of 26) http://example.com/themes/zenmobile/plugins/jqtouch.css
Application Cache Progress event (23 of 26) http://example.com/themes/zenmobile/plugins/img/button_clicked.png
Application Cache Progress event (24 of 26) http://example.com/themes/zenmobile/plugins/img/back_button.png
Application Cache Progress event (25 of 26) http://example.com/themes/zenmobile/plugins/img/blueButton.png
Application Cache Progress event (26 of 26) 
Application Cache Cached event

When I refresh the page again all the css/images/js fail to load and the console log spews:

Document was loaded from Application Cache with manifest http://example.com/themes/zenmobile/cache.manifest
Application Cache Checking event
Application Cache NoUpdate event

Then a load of 'failed to load resource'

Other than this output I haven't found anything useful to try and fix this. Has anyone seen this before?

Upvotes: 12

Views: 5117

Answers (3)

Martin Kool
Martin Kool

Reputation: 4245

Had the same problem. Putting this at the bottom fixed it for me:

NETWORK:
*

And to work around the issues most people are having with manifest updates, this approach works really well for me:

Affix the manifest file and all cached resources with a version number in the url, and also set the manifest's contents to reference that version number. Like so:

<html manifest="path/to/cache.manifest?v=42">

and

CACHE MANIFEST
#rev ?v=42

/css/foo.css?v=42
/css/bar.css?v=42
/js/script.js?v=42

I have automated this for us, so with a new deploy I just raise the number by 1 (somewhere in a settings file that I read) and it is affected in all the mentioned files. Each browser request will not only detect the manifest file change, but also cause to reload (and cache) every resource mentioned, thus updating the entire application.

Upvotes: 19

James Brown
James Brown

Reputation: 658

Are you loading other resources that aren't in your manifest file? Try listing them all and see if you continue to have the problem.

Upvotes: 0

hvgotcodes
hvgotcodes

Reputation: 120188

html5 manifests are hard to deal with. If it works in one browser it might not work in another

1) Look in your resources tab to see which resource is causing the error (using firebug or webkit)
2) I have found that changing the manifest name with every deploy helps make sure that the browsers detect a change.

Upvotes: 0

Related Questions