Your SlideShare is downloading. ×
Html5 offline
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 offline

942
views

Published on

HTML5 Offline application

HTML5 Offline application


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

No Downloads
Views
Total Views
942
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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