HTML5 Offline caching
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


HTML5 Offline caching






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

HTML5 Offline caching Presentation Transcript

  • 1. Offline Caching Making your web site available when the user can't connect to the Internet
  • 2. The web isn't just for shopping —  The new paradigm is for thin-client apps —  Real, business solutions running online
  • 3. The major weakness is having to be constantly connected —  What if they want to run our app when they don't have wi-fi?
  • 4. We write a disconnected app —  They cache the entire app and run it locally
  • 5. But how do they run it when they can't get to it? 1.  Connect to the Internet 2.  Download and cache our web app 3.  Go offline 4.  Run their local version, saving data locally 5.  Go back online when possible 6.  Synchronize any data with the home base 7.  Do steps 1 and 2 only once. Steps 3-6 over and over
  • 6. To go offline, you have to have a manifest <!DOCTYPE HTML>! <html manifest="/cache.manifest">! <body>! ...! </body>! </html>! —  This stores the list of things needed.
  • 7. A manifest lists what is needed locally CACHE MANIFEST! /favicon.ico! index.html! site.css! images/logo.png! scripts/main.js!
  • 8. Is the HTML page itself listed? —  Yes and no. No harm in listing it, but with the manifest attribute, it is assumed to be cached.
  • 9. The manifest must be served as text/ cache-manifest —  A MIME type —  You may need to register this with the web server (IIS,Apache, etc.)
  • 10. We can get a finer-grained control in the manifest —  CACHE ◦  Things to explicitly cache —  NETWORK ◦  Things that can't be cached locally —  FALLBACK ◦  Alternatives for any resources that were either not addressed or couldn't be cached successfully
  • 11. CACHE MANIFEST! # version 3.36 (2013-10-02)! ! CACHE:! /favicon.ico! index.html! site.css! images/logo.png! scripts/main.js! ! NETWORK:! login.php! /myapi!! ! FALLBACK:! /product/* /GenericProducInfo.html! images/productImages/ images/NoImage.jpg! *.html /offline.html!
  • 12. Events you should be aware of Event When it fires checking When the browser checks for a new manifest cached First time the manifest is cached updateready As soon as the download is completed obsolete On any 404 on the manifest file itself downloading During the download of the new assets progress Another asset has been downloaded.
  • 13. Methods you should be aware of Method What it does update() Go get a new manifest and assets swapCache() Use the new cache we just downloaded
  • 14. For example ... applicationCache.addEventListener(! 'updateready', updateReadyHandler, ! false);! ! var updateReadyHandler = function(e) {! if (applicationCache.status == ! applicationCache.UPDATEREADY) {! applicationCache.swapCache();! }! }!
  • 15. Conclusion —  We can create web apps that continue to work – even when not connected to the server! —  All we have to do is create the manifest file and link to it from the main page. —  ... and sure, there are some JavaScript events and methods on the applicationCache object which can help you tune the app.