CODEWITHSUNDEEP
javascripthtmlbrowser-cacheoffline-caching
iamjonesy
iamjonesy

Reputation: 25132

HTML5 Caching Javascript files for online and offline use

I posted a question about why my $.getJSON had stopped but I think the question is a bit wider now.

I have a mobile HTML5 app that does Ajax requests to a php web app (on the same domain). When there is an internet connection ie. navigator.onLine == true I do a $.getJSON call to the web app and store the response locally in a websql db on the device's browser.

If navigator.onLine == false then I want to skip the json request and pull data out locally instead. My JSON works and I'm storing successfully in offline websql storage but my problem comes when adding the cache manifest file.

I'm not sure how to cache what I'll need. Here is my cache manifest:

CACHE MANIFEST

# rev 2

CACHE:
index.html
app.html
http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js
http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css
http://code.jquery.com/jquery-1.4.3.min.js
js/data.js 
js/script.js

I think I'm right in assuming I can cache external files from code.jquery.com/..? Because I will need them online and offline.

Eric posted an answer in my previous question saying I should add the JS files under the NETWORK: heading with * at the end. When I do that my JSON call is triggered like I want it to. However now the files are unavailable offline.

This seems to work as well but when I go offline not even my CSS is loaded: 

CACHE MANIFEST

# rev 2

CACHE:
index.html
app.html
js/data.js
http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js
http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css
http://code.jquery.com/jquery-1.4.3.min.js
js/script.js

NETWORK:
*

Can anyone suggest the best practice for caching javascript/css files for offline use?

Thanks a lot,

Billy

Upvotes: 2

Views: 2437

Answers (1)

PeteLe
PeteLe

Reputation: 1943

Check out http://westciv.com/tools/manifestR/, it's a great tool for creating the manifest files that your app needs.

AppCache requires that everything you want to be served locally be listed in the manifest file, so in this case, you need to list all of the JavaScript, CSS and any other files that your app needs to run in an offline experience. ManifestR will help you figure out that list and build it for you.

Your manifest file should look something like:

CACHE MANIFEST
# rev 3

CACHE:
index.html
app.html
js/data.js
http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js
http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css
http://code.jquery.com/jquery-1.4.3.min.js
js/script.js
style.css
images.png

NETWORK:
*

Upvotes: 0

Related Questions