"HTML5 och relaterade API:er"

Storlek: px

Starta visningen från sidan:

Download ""HTML5 och relaterade API:er""

Georg Lund
för 7 år sedan
Visningar:

1 "HTML5 och relaterade API:er" Föreläsning 7 HTML5 och relaterade API:er Webbteknik II, 1DV449 Johan Leitet johan.leitet@lnu.se twitter.com/leitet facebook.com/leitet

2 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...

3 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

4 HTML5 Drag and drop API Web Workers Web Sockets Web Storage Offline Web applications Geolocation

5 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.

6 Geolocation Internet Explorer FireFox Chrome Safari Opera ios Safari Android

7 Geolocation

8 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

9 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.

prototype.getJSON = function(key, value){ var value = this.

10 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);

11 Web SQL Storage: (SQLite 3) Web SQL Storage Internet Explorer FireFox Chrome Safari Opera ios Safari Android Specifikationen underhålls inte längre

12 Indexed Database Som localstorage men med möjligheten att sätta index. Asynkront API Synkront API Internet Explorer FireFox Chrome Safari Opera ios Safari Android

13 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

14 Offline Web applications Internet Explorer FireFox Chrome Safari Opera ios Safari Android

15 Offline Web applications <html lang="sv" manifest="offline.appcache"> MIME: text/cache-manifest CACHE FALLBACK NETWORK

addeventlistener('offline', dooffline, false); Dåligt stöd

16 Online/Offline? if(navigator.online){ // online } window.addeventlistener('online', doonline, false); window.addeventlistener('offline', dooffline, false); Dåligt stöd överlag i webbläsarna.

17 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-header Access-Control-Allow-Origin: * Lite knepigare blir det för delete och put läs själv på: CORS:

18 Web Sockets API: Protokoll: IETF Hypertext Bidirectional (HyBi) Working Group HyBi RFC 6455 Internet Explorer FireFox Chrome Safari Opera ios Safari Android

19 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

20 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

21 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:

22 SSE Server: Klient:

23 Drag and drop (DnD) Event dragstart drag dragcenter dragleave dragover drop dragend htmlelement.draggable = true; Internet Explorer FireFox Chrome Safari Opera ios Safari Android

24 DnD dfiles/#toc-selecting-files-dnd

25 Web Workers Internet Explorer FireFox Chrome Safari Opera ios Safari Android ja nej

26 Web Workers worker.js

27 Web Workers worker.js Fler exempel på:

DeviceOrientation Event Specification window.addeventlistener("deviceorientation", function(event) { //process event.alpha, event.beta and event.

28 DeviceOrientation Event Specification window.addeventlistener("deviceorientation", function(event) { //process event.alpha, event.beta and event.gamma }, true); devicemotion, compassneedscalibration Gyroskop Kompass Accelerometer

29 Touch Event API touchnode.addeventlistener('touchstart', function(e) { if(e.touches.length > 1){ console.log("hello Multitouch!"); } } touchend, touchmove, touchcancel

30 HTML Media Capture API

31 ... 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)

Relevanta dokument

E12 "Evil is going on"

E12 "Evil is going on" Föreläsning 12, HT2014 AJAX Kurs: 1dv403 Webbteknik I Johan Leitet E12 Evil is going on Dagens agenda AJAX XMLHttpRequest-objektet JSON Vad är AJAX? Asynchronous JavaScript and XML