DOCSLIB.ORG

515 Offline Storage 2011 V7.0 DD F

515 Offline Storage 2011 V7.0 DD F

Using HTML5 Offline Storage Net deprived Session 515 Alexey Proskuryakov Safari and WebKit Engineer These are confidential sessions—please refrain from streaming, blogging, or taking pictures 1 Introduction • Work on cellular networks • Or offline 2 Introduction 3 The Goals • Make sites load faster • Cope with loss of network • Implement it quickly 4 5 6 Agenda • Offline technologies • Debugging • What's new 7 Storing Resources Offline HTML5 offline application cache 8 What a Web Application Needs 9 Application Resources 10 Application Cache • index.html <!DOCTYPE html> <html> <head> ... 11 Application Cache • index.html <!DOCTYPE html> <html manifest="application.manifest">> <head> ... 12 Application Cache • index.html <!DOCTYPE html> <html manifest="application.manifest"> <head> <html... manifest="application.manifest"> 13 Application Cache • index.html <!DOCTYPE html> <html manifest="application.manifest"> <head> ... • application.manifest CACHE MANIFEST # The document and its manifest are always cached implicitly. stylesheet.css image.jpg http://example.org/3rd_party_image.jpg 14 Cached Resources 15 Cached Resources 16 Application Resources and Data Resources Offline Data The Cloud 17 Application Resources and Data Resources • Application Cache Offline Data The Cloud • Local Storage • XMLHttpRequest • SQL Database 18 Network Access • Blocked by default • Makes development easier • Can be allowed for some URLs 19 Network Access Cache manifest file CACHE MANIFEST # The document and its manifest are always cached implicitly. stylesheet.css image.jpg http://example.org/3rd_party_image.jpg NETWORK: # Matches all URLs with this prefix. http://api.flickr.com 20 Network Access Cache manifest file CACHE MANIFEST # The document and its manifest are always cached implicitly. stylesheet.css image.jpg http://example.org/3rd_party_image.jpg NETWORK: # Matches all URLs with this prefix. http://api.flickr.com/services/replace 21 Network Access Cache manifest file CACHE MANIFEST # The document and its manifest are always cached implicitly. stylesheet.css image.jpg http://example.org/3rd_party_image.jpg NETWORK: # Matches all URLs with this prefix. http://api.flickr.com/services/upload 22 Network Access Cache manifest file CACHE MANIFEST # The document and its manifest are always cached implicitly. stylesheet.css image.jpg http://example.org/3rd_party_image.jpg NETWORK: # Matches all URLs with this prefix. http://api.flickr.com/rest/?method=flickr.test.echo&name=value 23 Network Access Cache manifest file CACHE MANIFEST # The document and its manifest are always cached implicitly. stylesheet.css image.jpg http://example.org/3rd_party_image.jpg NETWORK: # Matches all URLs with this prefix. http://api.flickr.com 24 Network Access Cache manifest file CACHE MANIFEST # The document and its manifest are always cached implicitly. stylesheet.css image.jpg http://example.org/3rd_party_image.jpg NETWORK: # Any resources that are not in the cache may be fetched from the network. * 25 Network Access Cache manifest file CACHE MANIFEST # The document and its manifest are always cached implicitly. stylesheet.css image.jpg http://example.org/3rd_party_image.jpg NETWORK: # Any resources that are not in the cache may be fetched from the network. * FALLBACK: # Fallback resources are implicitly cached. savedGamePreview.php? genericPreview.png 26 Network Access Cache manifest file CACHE MANIFEST # The document and its manifest are always cached implicitly. stylesheet.css image.jpg http://example.org/3rd_party_image.jpg NETWORK: # Any resources that are not in the cache may be fetched from the network. * FALLBACK: # Fallback resources are implicitly cached. savedGamePreview.php? genericPreview.png 27 Network Access Cache manifest file CACHE MANIFEST # The document and its manifest are always cached implicitly. stylesheet.css image.jpg http://example.org/3rd_party_image.jpg NETWORK: # Any resources that are not in the cache may be fetched from the network. * FALLBACK: # Fallback resources are implicitly cached. savedGamePreview.php? genericPreview.png 28 Offline Applications for iOS <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon" href="/custom_icon.png"> <link rel="apple-touch-startup-image" href="/startup.png"> 29 Application Cache Update Deploying new versions of the application • Old and new resources are never mixed • Cache manifest content is checked ■ So, change the manifest when changing resources • A new version of the application is not used on existing pages 30 Providing Feedback • Downloading is transparent in Safari • DOM events for custom UI checking noupdate downloading progress cached updateready obsolete error 31 Demo Andy Estes Safari and WebKit Engineer 32 What Users Will See 33 User’s Point of View • Privacy implications • Safari shows what sites have left traces • A user can empty application cache and data storage 34 iOS Website Data Settings View sites that have stored data locally 35 iOS Website Data Settings View sites that have stored data locally 36 iOS Website Data Settings View sites that have stored data locally 37 Desktop Privacy Settings View sites that have stored data locally 38 Reset Safari and Empty Cache General maintenance 39 Storing and Synchronizing Data 40 Synchronizing User Data • Users expect transparent saving • Cannot save to the server when offline • Constantly saving affects performance and battery life 41 Synchronizing User Data How often should I sync? • How much work can the user afford to lose? • Save locally when offline ■ …or for better performance • Handle beforeunload and pagehide events to synchronize immediately 42 Cookies • Size limit • Sent to server • Unusual security model 43 Local Storage • Items are key/value pairs • Origin-based security <script> localStorage.playerName = "Mega Destroyer"; localStorage.currentLevel = "1"; </script> 44 Local Storage • Items are key/value pairs • Origin-based security <script> localStorage.playerName = "Mega Destroyer"; localStorage.currentLevel = "1"; </script> 45 Local Storage • Items are key/value pairs • Origin-based security <script> localStorage.playerName = "Mega Destroyer"; localStorage.currentLevel = "1"; </script> 46 SQL Database • Real-world SQL • Asynchronous and callback-based • Origin-based security 47 SQL Database db.transaction(function(tx) { tx.executeSql( "SELECT name, company FROM WWDCAttendees", [], function(tx, result) { for (var i = 0; i < result.rows.length; ++i) { var row = result.rows.item(i); process(row.name, row.company); } }, function(tx, error) { alert('Failed to retrieve data: ' + error.message); return; }); }); 48 SQL Database db.transaction(function(tx) { tx.executeSql( "SELECT name, company FROM WWDCAttendees", [], function(tx, result) { for (var i = 0; i < result.rows.length; ++i) { var row = result.rows.item(i); process(row.name, row.company); } }, function(tx, error) { alert('Failed to retrieve data: ' + error.message); return; }); }); 49 SQL Database db.transaction(function(tx) { tx.executeSql( "SELECT name, company FROM WWDCAttendees", [], function(tx, result) { for (var i = 0; i < result.rows.length; ++i) { var row = result.rows.item(i); process(row.name, row.company); } }, function(tx, error) { alert('Failed to retrieve data: ' + error.message); return; }); }); 50 Demo Andy Estes Safari and WebKit Engineer 51 Debugging Offline Applications 52 If Nothing Works • Web Inspector console • Web Inspector Resources pane • Log progress events 53 SQL Database 54 SQL Database Execute arbitrary SQL 55 Local Storage 56 Local Storage Editable view 57 Cookies View and delete cookies 58 Application Cache 59 Summary • Offline technologies are essential on mobile • The platform has gotten more powerful • Safari offers great development tools 60 More Information Vicki Murley Safari Technologies Evangelist [email protected] HTML5 Application Cache Specification http://www.whatwg.org/html HTML5 Web Storage Specification http://dev.w3.org/html5/webstorage HTML5 Web SQL Database Specification http://dev.w3.org/html5/webdatabase 61 More Information WebKit Open Source Project http://www.webkit.org/ #webkit on irc.freenode.net Safari Dev Center http://developer.apple.com/safari Apple Developer Forums http://devforums.apple.com 62 Sessions Marina Hidden Gems for Web Apps Tuesday 3:15PM 63 Labs Internet and Web Lab A Safari Extensions Lab Thursday 4:30PM Internet and Web Lab B HTML5 Offline Storage Lab Friday 9:00AM 64 65.

View Full Text

Details

  • File Type
    pdf
  • Upload Time
    -
  • Content Languages
    English
  • Upload User
    Anonymous/Not logged-in
  • File Pages
    65 Page
  • File Size
    -

Download

Channel Download Status
Express Download Enable

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

  • Not to be reproduced or distributed without explicit permission.
  • Not used for commercial purposes outside of approved use cases.
  • Not used to infringe on the rights of the original creators.
  • If you believe any content infringes your copyright, please contact us immediately.

Support

For help with questions, suggestions, or problems, please contact us