HTML5 Offline Web Application

  • 668 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
668
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
23
Comments
0
Likes
0

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. HTML5 Offline Web Application allanhuang@eSobi.com
  • 2. Agenda  Client-side  HTTP Response Header     Expires Header Cache-Control Header ETag Header Last-Modified Header  Offline   Caching Web Application Cache Manifest Application Cache
  • 3. Client-side Caching
  • 4. HTTP Response Header  Expires   Header Gives the date/time after which the response is considered stale Example  Expires: Thu, 01 Dec 1994 16:00:00 GMT
  • 5. HTTP Response Header  Cache-Control   Header Tells all caching mechanisms from server to client whether they may cache this object. It is measured in seconds Example  Cache-Control: max-age=3600
  • 6. HTTP Response Header  Entity   Tag / ETag Header An identifier for a specific version of a resource, often a message digest Example  ETag: "737060cd8c284d8af7ad3082f209582d"
  • 7. HTTP Response Header  Last-Modified   Header The last modified date for the requested object Example  Last-Modified: Tue, 15 Nov 1994 12:45:26 GMT  Most modern Web servers will generate both ETag and Last-Modified headers to use as validators for static content automatically
  • 8. Offline Web Application
  • 9. Before HTML5…  Browser's cache based on server-side rules and client-side configuration  Regular caching can lead to undesired results while you're offline
  • 10. HTML5 Offline Feature   Create a manifest file that lists your app's assets and reference it in a manifest attribute in your web pages' html elements You add the manifest attribute to the <html> element, and point it to the file containing your application’s manifest
  • 11. Cache Manifest  Manifest will cache HTTP GET requests, while POST, PUT, and DELETE will still go to the network  If the page has an active manifest file, all GET requests will be directed to local storage  Web server is sending the text/cachemanifest file header when you request any file with the *.manifest / *.appcache extension
  • 12. Manifest Structure     The first line of the file must always be CACHE MANIFEST Comments start with # and must appear on a line of their own Case-sensitive file names must be listed exactly as they appear on disk 3 directive sections    CACHE: section NETWORK: section FALLBACK: section
  • 13. Manifest Structure  CACHE:    section The files will be cached in Application Cache Add a list of cached files under the CACHE MANIFEST directive without the CACHE: section Add a list of cached files anywhere else in the file, you need to place them under an explicit CACHE: section
  • 14. Manifest Structure  CACHE:     section rules Only one file name per line A full file name is required, no wildcards * allowed File names can contain path information or even an absolute URL File names can't include fragment identifiers, e.g. comment #
  • 15. Manifest Structure  NETWORK:   section Any URLs will bypass the application cache and load directly from the server Explicitly state that anything that isn’t cached must go via the web by using a wildcard * (note that this is the default behavior if omitted)
  • 16. Manifest Structure  FALLBACK:  section Specify a fallback resource that must be served if a specific resource is not available (either because you’re offline or it’s not in the cache)  List entire directories or URL paths in the NETWORK: and FALLBACK: sections, not full files name
  • 17. Manifest Structure
  • 18. Manifest Structure
  • 19. Update Cache  Once an application is offline it remains cached until …   User clean their browser's data storage for your site Manifest file is updated   Updating a file listed in the manifest doesn't mean the browser will re-cache that resource Application cache is programmatically updated
  • 20. Update Manifest  Application    Cache Busting Add a version number (from a version control system) or timestamp string in a comment # in the manifest file Add an final MD5 checksum into the manifest file Add each file’s MD5 checksum as a comment after the file name
  • 21. Update Manifest  Only when the web page is reloaded will the new cached assets come into play and become available  If you can’t wait for the next page reload, you can programmatically add an event listener for the updateReady event and prompt the user to reload the page
  • 22. Update Manifest via JavaScript
  • 23. Checking Status  Checking for Browser Support  Compatibility Tables  if (window.applicationCache) { // this browser supports offline web apps }  Checking   Online / Offline Check the property navigator.online whether the browser is online or not Pull in a piece of JavaScript and check online / offline status via FALLBACK rule
  • 24. Checking Online / Offline
  • 25. Checking Online / Offline
  • 26. Application Cache API
  • 27. Application Cache API
  • 28. Clean Cache  Firefox   Tools > Clear Recent History Tools > Options (Preferences on Mac OS X) > Advanced > Network > Select specific application cache > Remove  Chrome  Settings Menu > Tools > Clear Browsing Data  Safari  Settings Menu > Reset Safari
  • 29. Debug Manifest Challenge  Include missing files in the manifest  When the manifest is updated and the browser does not reflect the update until the web page is loaded  If the manifest has a cache control header set on it, the browser may not check for a new version of the manifest  Manifest is not cached by the browser, or if it is cached it is done only via an ETag.
  • 30. Conclusion  Tips       Turn off the manifest file during development and enable it only when the project is ready to go live Access Application Cache Content  Visit about:cache in Firefox Security  Private Browsing mode Disk Quota  Limit it to about 5 MB per domain Demo Q&A