Windows Phone: building optimized websites and using the web browser control with IE9

1. PLAT-821T Windows Phone: building optimized websites and using the web browser control with IE9 Joe Marini (@joemarini) Principal Program Manager Microsoft Corporation

2. Agenda • Review: • The Evolution of the Mobile Web • Differences between Mobile and Desktop Web experiences • Developing Mobile HTML5 experiences • How we approach HTML5 • Key mobile technologies in IE Mango • Using the Managed Web Browser control • Main application scenarios • API usage and best practices

3. What mobile-related HTML5 features can I leverage in IE9 Mango?And can I use HTML5 in native apps?

4. The Mobile Web Evolution

5. Mobile Has Come a Long Way Remember This? How About This?

6. Browser Tops Apps in Mobile Data Traffic The Browser is – surprise! – the #1 mobile phone application in terms of total user face time, and consumes 50% of the mobile data traffic for a typical phone user

7. Web Experiences Starting to Rival Native Apps Despite conventional beliefs, by 2013 most native features will reach HTML5, enabling user experiences that rival native apps1 Files Geolocation Motion Detection Media Capture Contacts Messaging Calendar 2012 2010 2011 2013 • Ideal for rapid-iterated design and subscription-based content • Architectural advantage of cross-platform coding • Simplified distribution and updating model • Substantial savings in QA and code reuse 1Source: Global Intelligence Alliance Apr 2010

8. HTML5/CSS/JS, IE9, and Mango

9. What Developers Told Us • Interoperability and Same Markup • HTML5 Canvas, Audio, Video, XHTML, SVG, DOM L2 Core, DOM L2 & L3 Events, CSS3 Selectors, DOM Traversal, DOM Range, HTML5 Parsing, etc. • Performance • Holistic Focus on Performance, Faster JavaScript, GPU Powered Graphics • Websites more like native applications • Reducing the User Interface surface area, Unlocking the Hardware • Safe and Trusted Browsing • No ActiveX Controls, no Browser Helper Objects, no Plug-ins or Binary Behaviors

10. Understanding Today’s Sites

11. Our Approach to HTML5 Support • "HTML5" is a massive undertaking (>50 specs) • More specs will be added in the coming years • Not all specifications are site-ready • Locked into a premature specification implementation • Site-breaking changes from one release to next • Incompatible implementations across browsers • Microsoft's approach has two main components: • Provide implementations for site-ready specs • Platform previews for in-development specs • Check out our HTML5 Labs site: http://www.html5labs.com/

12. Partial Summary of IE9 Mango Support Cascading Style Sheets (CSS3) Media & Graphics 2D Transforms Colors Module HTML5 Canvas HTML5 Video Background/Borders Namespaces SVG Fonts Module Values & Units HTML5 Audio CSS Media Queries Selectors Additional Standards & Web Applications Support DOM Core Level 2/.3 Geolocation Semantic Elements Traversal & Range ECMAScript 5 XML Parse/Serial DOM Events Level 2/3 Selector APIs Level 2 DataURIs L2 HTML & Style ICC Color Profiles CSSOM View

13. Key IE9 Mango Features • Minimal browser chrome • Places the focus on the site, not the browser • Hardware-accelerated HTML5 • Video, Text Rendering, Canvas Drawing • Orders of magnitude better performance • New "Chakra" JavaScript execution engine • Interoperability through Same Markup • Support for established site-ready standards

14. Key IE9 Mango Technologies for Mobile • Support for key mobile Web media technologies • Support for Viewport <meta> tag • Support for W3C Geolocation, including GPS • Full support for CSS Media Queries • HTML5 Audio, Video (full-screen playback), Canvas • DOM Local Storage and Session Storage • Cache data locally without using cookies • Data URIs • Reduce HTTP requests and improve performance • Maximum size increased to 4GB

15. Controlling the Viewport • Pages that have been laid out specifically for mobile devices can be identified as mobile-ready • Prevents the browser from optimizing layout • Three <META> tags: <META name="HandheldFriendly" content="true" /> <META name="MobileOptimized" content="320" /> <META name="Viewport" content="width=device-width" />

16. Controlling the Viewport • The Viewport de-couples the page size from window size • Provides several options that control how the Web page is displayed on the device and what the user can do with it

17. Using Media Queries • Provide a way of applying style sheets based upon certain characteristics of the media where the content will be displayed • Window size, screen size, aspect ratio, color depth, resolution, etc. • Are a W3C candidate recommendation as of July 2010 • Specification can be found at http://www.w3.org/TR/css3-mediaqueries/ <link rel="stylesheet" media="screenand (max-width:800)" href="example.css" /> Or… @media screenand (max-width:800) { /* style definitions that apply to screens less than 800px wide */ }

18. Using Media Queries • For features that use units, you can specify any css-compliant unit, such as px, cm, in, ems, etc. • Many CSS-MQ features accept a “min” or “max” prefix • For example, you can use “min-width” or “max-device-width” • Works for all listed here except for “orientation”

19. Using Media Queries • Detect a device that has a maximum screen width <link rel=“stylesheet” media=“screenand (max-device-width:800px)”href=“styles.css”> @media screenand (max-device-width:800px) { /* style definitions that apply to screens less than 800px wide */ } • Detect a window with a minimum and maximum width <link rel=“stylesheet” media=“screenand (min-width:480px) and (max-width:800px)”href=“styles.css”> @media screenand (min-width:480px) and (max-width:800px){ /* style definitions that apply to screens less than 800px wide */ }

20. Geolocation • Geolocation allows a phone to figure out where it is • IP Address location or Wireless network location • Triangulation of cellular towers • GPS device that uses satellite signals • Can get location as a "one-shot" or continuously • Location is always opt-in • “User Agents must not send location information to Web sites without the express permission of the user.” • W3C Geolocation API • http://www.w3.org/TR/geolocation-API/

21. Geolocation Geolocation is accessed from the navigator object navigator.geolocation API: getCurrentPosition(successFn, errFn, options) watchPosition(successFn, errFn, options) clearWatch(watchID) successFn( positionObject ) errFn( positionErrorObject )

22. Client-side LocalStorage / SessionStorage • Provides easier way of storing data on client without cookies DOM Storage Cookies 5MB of storage per domain Limited to ~4K of data Stored in easy to use key/value pairs Sent to/from server with every request Associated event model informs code of changes Unless whole site is SSL, sent unencrypted

23. DOM Storage API Available from the window object: window.localStorage window.sessionStorage API: getItem(key) setItem(key, value) removeItem(key) clear() key(index) length

24. Things to remember about DOM Storage • Data is stored as strings – if you store other types, you must convert them yourself • Example: • setItem("mysite.product.price", 59.99); • var price = parseFloat("mysite.product.price"); • If you try to store more than 5MB, an exception of type QUOTA_EXCEEDED_ERR is thrown • There is currently no way to request an increase in the available storage space in any of the browsers

25. The data:// URI • Defines a way for embedding content such as images directly inline into markup or CSS content • Used to reduce the number of HTTP requests • IE9 allows data URIs up to 4GB in size • General Format: data:[mime-type][;base64],<image data as text>

26. Data URI Usage • Use data URIs in place of normal URLs: HTML Replaces: <imgsrc=“http://imagename.png” /> With: <imgsrc=“data:image/png;base64,00af037491806ed...” /> CSS Replaces: .rule { background-image:url(‘http://imagename.png’) } With: .rule { background-image: url(‘data:image/png;base64,00af037491806ed...’) }

27. The Managed WebBrowser Control

28. Embeddable WebBrowser Control • Windows Phone provides an embeddable browser control • Uses the same underlying rendering engine as IE • Does not include user interface chrome, just drawing surface • Mainly intended for displaying rich Web content • Does not include browser infrastructure, like forward/back stack • Enables two-way communication between page and app • Managed code can invoke script content in page, get at DOM • Script content can send notification events to managed code

29. WebBrowser Main Scenarios Locally Hosted Content Remote Hosted Content Dynamic Content Content from Isolated Storage Content from remote sites Generated Within the App Can execute JavaScript Either trusted or untrusted Can execute JavaScript Can execute JavaScript Can use AJAX Can use AJAX Can use AJAX Can talk to managed layer Can talk to managed layer Can talk to managed layer Can use LocalStorage

30. The WebBrowser API Navigating and Retrieving Content: Navigate(Uri uri); NavigateToString(Uri uri, Byte[] data, string headers); string SaveToString(); Controlling Behavior: string Base { get; set; } boolIsScriptEnabled { get; set; } boolIsGeolocationEnabled { get; set; } Managed Code to Script Communication InvokeScript(string script, string[] params)

31. Things to Remember / Best Practices • JavaScript and Geolocation features are off by default • Don’t try to access Web content before it’s ready • For example, don’t InvokeScript() in a Navigated event handler • Remember that content loaded locally has fewer restrictions • Be careful with what you pass to InvokeScript() • Cookies cannot be shared with Internet Explorer

32. demo Managed Browser Control

33. Further reading and documentation • WebBrowser Control http://msdn.microsoft.com/en-us/library/ff431795.aspx http://msdn.microsoft.com/en-us/library/microsoft.phone.controls.webbrowser.aspx • Windows Phone Developer Blog http://windowsteamblog.com/windows_phone/b/wpdev/

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

35. © 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.