Table of Content
Offline access with app cache
With the help of cache manifest, mobile web app can work in offline. Just set the cache manifest.
An example is from Pie Guy.
Check the Pie Guy game in your mobile device.
- Add it to home screen
- Go to air plane mode
- Or even restart the device
- Open the game in offline mode and it works as normal.
Here is how it looks like in the HTML tag.
1<html manifest="cache-manifest.manifest">
And here is the content of the manifest file, which contain all the assets file the Pie Guy game needs.
1CACHE MANIFEST 2# Version 1.0.3 3 4index.html 5main.js 6images/about-text.gif 7images/default.png 8images/font1.gif 9images/game-over.gif 10images/guy1.gif 11images/guy2.gif 12images/guyFlip.gif 13images/chef0-1.gif 14images/chef0-2.gif 15images/chef0-flip.gif 16images/chef1-1.gif 17images/chef1-2.gif 18images/chef1-flip.gif 19images/life.gif 20images/map0.png 21images/map1.png 22images/menu-about-active.gif 23images/menu-about-small-active.png 24images/menu-about-small.png 25images/menu-about.gif 26images/menu-back.gif 27images/menu-back-active.gif 28images/menu-continue-active.gif 29images/menu-continue.gif 30images/menu-new-active.gif 31images/menu-new.gif 32images/menu-rotate.gif 33images/menuButton.gif 34images/notice-level.gif 35images/notice-time.gif 36images/notice-tokens.gif 37images/notice-total.gif 38images/pie-complete.gif 39images/bonus-score.gif 40images/scoreBar.gif 41images/splash.png 42images/token1.gif 43images/token2.gif 44images/token3.gif 45images/token4.gif
Reference:
This StackOverflow thread discussed how we can remove the cached files and force the browser to download the newer version. The HTML5 Rocks posts a detailed tutorial to get started the application cache.
What’s next? We’re going to take a look at “Chapter 10 – Create dedicated mobile website”.
