HTML5 Applications with ASP.NET Web Forms Stephen Walther Superexpert.com

Agenda What features matter for data-driven apps? ● WebSockets ● Web Workers ● Web Storage ● IndexedDB ● Offline Applications

HTML5 WebSockets – Overview Enables lightweight two-way communication over a TCP socket. Long Polling, Slow Talking, Server Push, Comet Stock Notifications, Chat, Games

HTML5 WebSockets – Standards Protocol – IETF April 2011 standard at: ● thewebsocketprotocol-07 thewebsocketprotocol-07 JavaScript API – W3C June 2011 standard at: ●

HTML5 WebSockets – Browser Support Chrome ● Chrome9+ Safari ● Safari5, iOS Safari Firefox ● Firefox4, Firefox6 Internet Explorer ● IE9 Web Socket support was removed from Firefox because of security issues

HTML5 WebSockets – Server Support ● IIS ● Jetty ● Node.js Microsoft HTML5 Labs WebSockets server:

HTML5 WebSockets – API Create a new socket with window.WebSocket: var websocket = new WebSocket("ws://SomeSite.com/chat");

HTML5 WebSockets – API 1 Property ● readyState 4 Events: ● onopen ● onmessage ● onclose ● onerror 3 Methods: ● send(DOMString) ● send(ArrayBuffer) ● send(Blob)

HTML5 WebSockets – Demos Creating a super simple Chat Service…

HTML5 WebSockets – Demos Creating a multiplayer online game…

HTML5 Web Workers – Overview ● Enables you to run a script in a background thread (run multi-threaded JavaScript). ● Useful when you don’t want to block the UI thread when executing a long running script. ● Standard located here: work/ work/

HTML5 Web Workers – Support Firefox Chrome Safari Opera Internet Explorer

HTML5 Web Workers – API Create a new worker with window.Worker: var worker = new window.Worker(“DoSomethingHard.js”);

HTML5 Web Workers – API Methods: ● importScripts() ● postMessage() ● close() ● myWorker.terminate() Events: ● myWorker.onmessage ● myWorker.onerror

HTML5 Client Data Overview Web Storage – key/value storage on the browser. IndexedDB – key/value storage on the browser with support for cursors and indices Web SQL - relational database support in the browser (SqlLite).

HTML5 Web Storage – Overview Web Storage (AKA DOM Storage): ● Session Storage ● Local Storage (Originally called Global Storage in Firefox) Standard at:

HTML5 Web Storage Browser Support: ● Chrome5 (5 Megs) ● Firefox2 (5 Megs) ● Opera10 (5 Megs) ● Safari4 (5 Megs) ● IE8 (10 Megs)

HTML5 Web Storage sessionStorage: ● length ● key(index) ● setItem(key, string) ● getItem(key) ● removeItem(key) ● clear() Page specific and not session specific

HTML5 Web Storage localStorage: ● length ● key(index) ● setItem(key, string) ● getItem(key) ● removeItem(key) ● clear()

HTML5 Web Storage DataJS: Using DataJS to prefetch pages

HTML5 IndexedDB – Overview Not a relational database, key value database Does not use SQL Supports indices, constraints, transactions

HTML5 IndexedDB Browser Support: ● Firefox4 (mozIndexedDB) ● Google Chrome 12 (webkitIndexedDB) ● IE9 (HTML Labs plugin)

HTML5 IndexedDB Firefox stores the IndexedDB database here: C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\shhxrq9s.d efault\indexedDB

HTML5 Offline Web Applications Use a web application even when you are not connected to the Internet Standard located at: ●

HTML5 Offline Web Applications Browser Support: ● Chrome ● Firefox ● Safari ● Opera ● IE9

HTML5 Offline Web Applications Cache Manifest # version 2 # Content Images/karlsruhe.jpg Content/Site.css NETWORK: Services/SomeService.svc

HTML5 Offline Web Applications window.applicationCache Properties: status – UNCACHED, IDLE, CHECKING, DOWNLOADING, UPDATEREADY, OBSOLETE Methods: update() swapCache() Events: onchecking, onerror, onupdate, ondownloading, onprogress, onupdateready, oncached, onobsolete

HTML5 Offline Web Applications window.navigator.online: ● true – browser might be online. ● false – browser definitely offline.

Big HTML5 Demo JavaScript Reference Application: ● Demonstrates: ● Web Storage ● Offline Web Applications ● Works with IE, Chrome, Firefox, Opera, Safari

Download the Sample Code Visit Stephen Walther’s blog to download the sample code for this talk: ●

Website: Phone:

Your Feedback is Important Please fill out a session evaluation form. Thank you!