Offline access with app cache

Beware of the deprecation of Application Cache. But iOS has not yet support the new Service Worker.

With the help of cache manifest, mobile web app can work in offline.

An example is from Pie Guy.

Pieguy screen

Check the Pie Guy game in your mobile device.

  1. Add it to home screen
  2. Go to air plane mode
  3. Or even restart the device
  4. Open the game in offline mode and it works as normal.

Here is how it looks like in the HTML tag.

<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.

CACHE MANIFEST
# Version 1.0.3

index.html
main.js
images/about-text.gif
images/default.png
images/font1.gif
images/game-over.gif
images/guy1.gif
images/guy2.gif
images/guyFlip.gif
images/chef0-1.gif
images/chef0-2.gif
images/chef0-flip.gif
images/chef1-1.gif
images/chef1-2.gif
images/chef1-flip.gif
images/life.gif
images/map0.png
images/map1.png
images/menu-about-active.gif
images/menu-about-small-active.png
images/menu-about-small.png
images/menu-about.gif
images/menu-back.gif
images/menu-back-active.gif
images/menu-continue-active.gif
images/menu-continue.gif
images/menu-new-active.gif
images/menu-new.gif
images/menu-rotate.gif
images/menuButton.gif
images/notice-level.gif
images/notice-time.gif
images/notice-tokens.gif
images/notice-total.gif
images/pie-complete.gif
images/bonus-score.gif
images/scoreBar.gif
images/splash.png
images/token1.gif
images/token2.gif
images/token3.gif
images/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.

Next Page → Provide offline access with Service Worker

← Previous Page Storing data with localstorage


Last updated at 2017-05-10. Show version history

Comments

no comments yet.

Please login to chat.