"HTML5 och relaterade API:er" Föreläsning 7 HTML5 och relaterade API:er Webbteknik II, 1DV449 http://coursepress.lnu.se/kurs/webbteknik-ii/ Johan Leitet johan.leitet@lnu.se twitter.com/leitet facebook.com/leitet
F07 This Land is Your Land Dagens agenda HTML5 Geolocation Web storage Web SQL IndexedDB Offline Webapplications XMLHTTPRequest level2 Websockets Server Sent Events Drag n Drop Web Workers Touch events...
HTML5 Struktur Offline Web applications Drag and drop API video audio canvas Nya och omarbetade taggar Webforms SVG Web Workers Web Sockets Web Storage Geolocation CSS3
HTML5 Drag and drop API Web Workers Web Sockets Web Storage Offline Web applications Geolocation http://www.html5rocks.com
Observera Många av dessa API:er är ännu inte fastställda och stödet kan vara bristfälligt! Se till att alltid besöka webbsidorna via en webbserver då många API kräver detta.
Geolocation Internet Explorer FireFox Chrome Safari Opera ios Safari Android 9 3.5 5 5 10.6 3.2 2.1
Geolocation
Web Storage Local Storage & Session Storage Tänk på att datan enkelt går att komma åt vid en XSS-attack 5-10 Mbyte per sajt Internet Explorer FireFox Chrome Safari Opera ios Safari Android 8 3.5 3 4 10.5 3.2 2.1
Local/session storage localstorage sessionstorage Metod setitem(namn, värde) getitem(namn) removeitem(namn) clear() key(index) Attribut length namn Spara data Hämta data Radera data Radera all data Ger namnet för ett index. Antal namn/värde-par i samlingen. Tilldela via nykelord som attribut. SessionStorage ger dig lagring enbart för sessionen. LocalStorage sparar datan tills användaren eller du tar bort den.
Inget direkt stöd, men: Jobba med JSON Storage.prototype.setJSON = function(key, value){ this.setitem(key, JSON.stringify(value)); } Storage.prototype.getJSON = function(key, value){ var value = this.getitem(key); return value && JSON.parse(value); } var users = [{"name": "Ellen"}, {"name": "Johan"}]; localstorage.setjson("users", users);
Web SQL Storage: (SQLite 3) Web SQL Storage Internet Explorer FireFox Chrome Safari Opera ios Safari Android - - 4 3.1 10.5 3.2 2.1 Specifikationen underhålls inte längre
Indexed Database Som localstorage men med möjligheten att sätta index. Asynkront API Synkront API https://developer.mozilla.org/en/indexeddb Internet Explorer FireFox Chrome Safari Opera ios Safari Android 10.0 4.0 11 - - - -
IdexedDB eller Web Storage? IndexedDB lämpar sig: För större datamängder Prestanda Sökning Indexering etc. Avancerade strukturer Web Storage lämpar sig för: Cachning av data Spara state Mindre datamängder utan sökbehov Enkelhet
Offline Web applications Internet Explorer FireFox Chrome Safari Opera ios Safari Android 10 3.5 4 4 10.6 3.2 2.1
Offline Web applications <html lang="sv" manifest="offline.appcache"> MIME: text/cache-manifest CACHE FALLBACK NETWORK http://html5doctor.com/go-offline-with-application-cache/
Online/Offline? if(navigator.online){ // online } window.addeventlistener('online', doonline, false); window.addeventlistener('offline', dooffline, false); Dåligt stöd överlag i webbläsarna. https://developer.mozilla.org/en-us/docs/dom/window.navigator.online
XMLHTTPRequest level 2 Nyheter så som: Förbättrad möjlighet för filöverföring Nya format: Arraybuffer, Blob, File, FormData Timeout för requests Möjlighet att få "progress"-event Möjlighet till Cross-Origin Resource Sharing (CORS) GET, POST: Access-Control-Allow-Origin: http://hello-world.example http-header Access-Control-Allow-Origin: * Lite knepigare blir det för delete och put läs själv på: CORS: http://dvcs.w3.org/hg/cors/raw-file/tip/overview.html
Web Sockets API: http://dev.w3.org/html5/websockets/ Protokoll: IETF Hypertext Bidirectional (HyBi) Working Group HyBi 00 01 02 03 04 05 06 07 08 09 10 RFC 6455 Internet Explorer FireFox Chrome Safari Opera ios Safari Android 10 11 16 6 12.1 6 - http://en.wikipedia.org/wiki/comparison_of_websocket_implementations
Web Sockets Event open close message error Anslutning genomförd Anslutningen stängd Inkommande meddelande Fel i kommunikation Metod send(data) close() Skicka data Stäng anslutning Attribut readystate bufferedamount 0: Ingen anslutning 1: Anslutning OK 2: Anslutningen stängs 3: Anslutning stängd Antal byte i send-kö
Server Sent Events (SSE) Lämpar sig för: Chat Börsnoteringar Väderuppdateringar Ej kritisk realtid Liknar long-polling med skillnaden att anslutningen kan hållas öppen även efter första responsen. Internet Explorer FireFox Chrome Safari Opera ios Safari Android - 6 6 5 11 4.0 -
SSE Event open message error [custom] Anslutning genomförd Inkommande meddelande Fel i kommunikation På servern definierat event Metod close() Stäng anslutning Attribut readystate 0: Ingen anslutning 1: Anslutning OK 2: Anslutning stängd Från server: http://www.html5rocks.com/en/tutorials/eventsource/basics/
SSE Server: Klient:
Drag and drop (DnD) Event dragstart drag dragcenter dragleave dragover drop dragend htmlelement.draggable = true; Internet Explorer FireFox Chrome Safari Opera ios Safari Android 5.5 3.5 3 3 - - -
DnD http://www.html5rocks.com/en/tutorials/file/dn dfiles/#toc-selecting-files-dnd
Web Workers Internet Explorer FireFox Chrome Safari Opera ios Safari Android 10 3.5 ja 4 10.6 5.0 nej
Web Workers worker.js
Web Workers worker.js Fler exempel på: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
DeviceOrientation Event Specification window.addeventlistener("deviceorientation", function(event) { //process event.alpha, event.beta and event.gamma }, true); devicemotion, compassneedscalibration 4.2 3.0 Gyroskop Kompass Accelerometer http://www.w3.org/tr/2011/wd-orientation-event-20111201/
Touch Event API touchnode.addeventlistener('touchstart', function(e) { if(e.touches.length > 1){ console.log("hello Multitouch!"); } } touchend, touchmove, touchcancel 3.2 2.1 http://www.w3.org/tr/2011/wd-touch-events-20111027/
HTML Media Capture API - - http://www.w3.org/tr/2011/wd-html-media-capture-20110414/ http://www.w3.org/tr/2010/wd-media-capture-api-20100928/
... Battery Status API (wd) System Information API (wd) Vibration API (wd) Contacts API (wd) Network information API (wd) Messaging API (wd) File API (wd) Clipboard API (wd)