Menu
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?
570
FALLBACK: An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource, the second is the fallback used if the network request fails or errors. Both URIs must from the same origin as the manifest file. You can capture specific URLs but also URL prefixes.
Which is not the section of manifest? Explanation: If the files are not in cache they come from a list of the files in the network. Cache is the default section.
In Chrome, go to Under the bonnet -> Content Settings -> Cookies -> Show cookies and other site data, application caches should show up under the site data. In Firefox go to Advanced -> Network, sites with application caches are listed in a box at the bottom.
How does Caching work? The data in a cache is generally stored in fast access hardware such as RAM (Random-access memory) and may also be used in correlation with a software component. A cache's primary purpose is to increase data retrieval performance by reducing the need to access the underlying slower storage layer.
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.
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
