1 / 39

Building offline access in Metro style apps and websites using HTML5

PLAT-376T. Building offline access in Metro style apps and websites using HTML5. Israel Hilerio, Ph.D. Principal Program Manager, Internet Explorer Microsoft Corporation. Here is what you will learn …. Benefits of caching, client storage, and offline awareness

carlton
Download Presentation

Building offline access in Metro style apps and websites using HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PLAT-376T Building offline access in Metro style apps and websites using HTML5 Israel Hilerio, Ph.D. Principal Program Manager, Internet Explorer Microsoft Corporation

  2. Here is what you will learn … • Benefits of caching, client storage, and offline awareness • Types of applications that benefit from offline support • What technologies make this possible? • Putting it all together

  3. Windows 8 Metro style apps Desktop apps HTML JavaScript HTML / CSS XAML View JavaScript (Chakra) C C++ C# VB Model Controller C C++ C# VB WinRT APIs Devices & Printing Communication & Data Graphics & Media System Services .NET / SL Internet Explorer Win32 Application Model Windows Core OS Services Core

  4. You can make your Metro style apps and websites better by caching information locally and making them aware of network connectivity.

  5. Benefits of caching, client storage, and offline awareness

  6. demo Food Network demo Offline access, resource pre-fetches, and local object stores

  7. Website benefits • Handle connectivity failures • Websites behave more like apps • Offline content access • Offline content creation • Can be used while offline • Performance improvement

  8. Metro style app benefits • Handle connectivity failures • Access network resources and data locally • Enable content creation while offline • Use web resources in your application while supporting full offline functionality

  9. Types of apps that benefit from offline support

  10. Offline Scenarios Kids Book Games w/ Scores Image Viewer Recipe Book Email Client File resource upload to sever Upload data resource Client access of cached resources Connectivity Awareness Download of data resources Locally cached file resource Locally cached data resources, small data set, no querying or indexing Locally cached large data resources into fully capable database

  11. What technologies make this possible?

  12. Offline supporting technologies • AppCache • DOM Storage • Offline/Online Events • File & Blob APIs • IndexedDB • Resource synchronization via XMLHttpRequest (XHR) and WebSockets

  13. demo AppCache – Kid’s Book Offline URI resolution, resource caching, and prefetching

  14. HTML 5 AppCache - Offline First Run Later Runs Cache Info Locally No Network Available Fetch Info From Network Fetch Info From Cache AppCache Internet Internet

  15. Usage of AppCache via Manifest file Cache Manifest #7/20/2011 v3 Cache: logo.png Network: fish.mp4 Fallback: kid.png noImg.png • <html manifest=“test.appcache"> • <head>…</head> <body> • <imgsrc=“logo.png” …> • </img> • … • <video … src=“fish.mp4” …> • </video> • … • <imgsrc=“kid.png” … /> • </body> • </html> 1 Fish.png 2 3 MIME Type: text/cache-manifest HTML File Manifest File

  16. HTML 5 AppCache – Update Flow First Run Later Runs If diff Create New Cache Fetch Manifest From Network Fetch Info From Cache No Network Available AppCache Internet Internet

  17. Access web resources offline • Use AppCacheto access web resources on the client • Update your cached resources by simply updating a manifest file. • Pre-fetch data before you needed to improve performance.

  18. demo DOM Storage Offline forms completion

  19. Slide for Showing Code • <script> • varlStorage=window.localStorage; • function init() { • if(!lStorage.score) • lStorage.score= 0; • document.getElementById('c1').innerText=lStorage.score; } • function save() { • lStorage.score=getGameScore();} • </script> • <bodyonload=“init();”> • <p> Your last score was: • <spanid="c1">some number</span> • </p> • </body>

  20. Store small content locally • Use DOM Storage to store small textual website content • Use the Windows Runtime API ApplicationData to store small structured and unstructured • Both technologies allows the storing of name/value pairs on the client with more disk space than cookies

  21. Offline/Online Event Handlers • functionreportConnectionEvent(e){ • if(!e) e =window.event; • if('online'==e.type){ • alert('The browser is ONLINE.');} • elseif('offline'==e.type){ • alert('The browser is OFFLINE.'); } • } • window.onload=function(){ • status = navigator.onLine; //retrieve connectivity status • document.body.ononline=reportConnectionEvent; • document.body.onoffline=reportConnectionEvent; • }

  22. Handling connectivity changes • Use offline/online events to verify connectivity • Every time you can are connecting to your server, consider the possibility that it can fail • Consider caching information locally before sending it to the server

  23. demo File APIs Preview local files inside your page without plugins

  24. File Objects Blob URL Canvas or Other HTML Element Scenario #1 File Object (Blob) XMLHttpRequest.send Web File System <input type=“file” …> Scenario #2 XMLHttpRequest.send Indexed DB File Object (Blob) objectStore.add File System Drag & Drop objectStore.get

  25. Previewing Local Resources using File APIs • oFReader.onload=function(oFREvent){ • document.getElementById("uploadPreview").src=oFREvent.target.result; • }; • functionloadImageFile(){ • if(document.getElementById("uploadImage").files.length=== 0) • {return;} • varoFile=document.getElementById("uploadImage").files[0]; • if(!rFilter.test(oFile.type)) • {alert("You must select a valid image file!");return;} • oFReader.readAsDataURL(oFile); • }

  26. Read and write local resources • Use File APIs to read and write local resources without requiring plugins • Snapshot file information by saving generated Blob into client database • Map local resources to URIs and load them into any HTML element that supports the mime-type.

  27. demo IndexedDB Client Object Store, Indexes, and Filters

  28. Mapping concepts from Relational DB IndexedDB provides the primitives necessary to build relational query libraries

  29. ObjectStore access and data loading using IndexedDB • varoRequestDB=window.indexedDB.open(“Library”); • oRequestDB.onsuccess=function(event){ • db1 =oRequestDB.result; • if(db1.version == 1){ • txn= db1.transaction([“Books”],IDBTransaction.READ_ONLY); • varobjStoreReq=txn.objectStore(“Books”); • var request =objStoreReq.get("Book0"); • request.onsuccess=processGet; • } • };

  30. Store, index, and query local data • Use IndexedDB to store, index, and retrieve data on the client • Cache large amounts of data from the server into the client using objectStores • Retrieve groups of data using cursors and indexes • Filter data groups using KeyRanges

  31. Synchronizing content • Use XHR and WebSockets to upload and download content to and from your server • Once the content is on the client, the files can be evaluated or parsed to created JS objects that can be stored on the client

  32. Putting it all together

  33. Offline Scenarios Kids Book Games w/ Scores Image Viewer Recipe Book Email Client Application Cache Online/Offline Events File APIs XHR or WebSockets to download Structured Data XHR or WebSockets to upload Structured Data DOM Storage XHR to upload Blob data IndexedDB – cache server data IndexedDB – new offline data

  34. Summary • There are different scenarios where your apps can be made even better if you leverage these offline technologies. • Anticipate that your users will want to access information when there is no network connectivity. • Cache as much information as possible in the client.

  35. Related sessions • [APP-162T] Building high performance Metro style apps using HTML5 • [PLAT-381T] Building beautiful and interactive apps with HTML5 & CSS3 • [PLAT-386T] 50 performance tricks to make your Metro style apps and sites using HTML5 faster • [PLAT-891T] Using files: accessing, searching, and acting on files • [PLAT-373C] Building real-time web apps with HTML5 WebSockets

  36. Further reading and documentation • Internet Explorer Test Drive site http://ietestdrive.com/ • Internet Explorer Engineering Team Blog http://blogs.msdn.com/b/ie/ • W3C CSS Specifications and Drafts http://www.w3.org/Style/CSS/ • What’s new in IE9 http://www.ietestdrive.com/Links/DevGuide9.html • What’s new in IE10 http://www.ietestdrive.com/Links/DevGuide10.html

  37. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

  38. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

More Related