Html5 offline

1,184 views

Published on

HTML5 Offline application

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,184
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5 offline

  1. 1. HTML5Offline Web Applications<br />Wilson Chen<br />
  2. 2. Agenda<br />Introduction<br />Browser Support<br />Browser - applicationCache<br />API<br />Checking for Browser Support<br />Offline/Online<br />Manifest Files<br />applicationCache<br />
  3. 3. Introduction<br />What is Offline Application?<br />offline<br />cache<br />Why is it important?<br />
  4. 4. Advantages<br />Offline browsing<br />Speed<br />Reduce loading on server<br />
  5. 5. Browser support<br />http://caniuse.com/#search=offline<br />
  6. 6. How to check?<br />Check if window.applictionCache exists or not<br />if(window.applicationCache){<br /> // the browser supports<br />}<br />else {<br /> // it doesn’t<br />}<br />
  7. 7. Offline / Online<br />Navigator.onLine is a boolean property to indicate online or not<br />online/offline events of window object<br />
  8. 8. Manifest file<br />manifest lists resoures which browsers will cache for offline use<br />Content-type is text/cache-manifest<br />
  9. 9. Manifest file<br />CACHE MANIFEST<br />CACHE<br />Serve these files from applicationCache, even if online<br />NETWORK<br />Alway fetch these files from internet<br />FALLBACK<br />Alternate paths to replace resources that can’t fetched<br />
  10. 10. applicationCache API<br />applicationCache.update()<br />Trigger cache update<br />applicationCache.status<br />
  11. 11. applicationCache API<br />applicationCache event<br />
  12. 12. applicationCache API- checking event<br />Dispatched when the user agent is checking for an updatem or attempting to donwload the manifst for the first time. This is always the first event in the sequence<br />
  13. 13. applicationCache API- downloading event<br />Dispatched when the user agent has found an update and is fetching it, or is downloading the resources listed by the manifest for the first time.<br />
  14. 14. applicationCache API- updateready event<br />Dispatched when The resources listed in the manifest have been newly redownloaded.<br />swapCache() to swith to the new cache<br />
  15. 15. applicationCache API- obsolete event<br />Dispatched when The manifest was found to have become a 404 page or 410 page, so the application cache is being deleted<br />
  16. 16. applicationCache API- cached event<br />Dispatched when the resources listed in the manifest have been downloaded, and the application is now cached.<br />
  17. 17. applicationCache API- error event<br />Dispatched when<br />The manifest was a 404 or 410 page, so the attempt to cache the appliction has been absorted<br />The manifest hadn’t changed, but the page referencing the manifest failed to download properly<br />A fatal error occurred while fetching the resources listed in the manifest<br />
  18. 18. applicationCache API- noupdate event<br />Dispatched when the manifest hadn’t changed<br />
  19. 19. applicationCache API- progress event<br />Dispatched when the user agent is downloading resources listed by the manifest<br />
  20. 20. Q&A<br />

×