Multimediale Webprogrammierung APIs in HTML /1. Multimediale Webprogrammierung APIs in HTML / /5

Transkript

1 Storage-APIs Multimediale Webprogrammierung (2) Es gibt zwei, die clientseitige Speicherung von Webseitendaten befördern: Web-Storage-API und Indexed-Database-API. (Letztere ersetzt die obsolete Web-SQL-Database- API.) Die Unterstützung durch Webbrowser ist nur für die erste API aktuell ausreichend zuverlässig. Die zweite API benötigt zudem möglichst Framework- Unterstützung / /2 Verbreitung Nov Web Storage API Diese API hat zwei wichtige Attribute: sessionstorage und localstorage. sessionstorage: Es werden temporäre Daten während einer in einem Fenster oder einem Reiter (!) laufenden Session sicher clientseitig verwahrt. Sie erlöschen, sobald Webseiten anderer Herkunft aufgerufen werden oder Reiter bzw. Fenster geschlossen werden. Die Speicherbereiche sind strikt getrennt / /4 Web Storage API Web Storage API localstorage: Es werden große Dateien clientseitig persistent gespeichert, ohne Verfallsdatum. Die Daten stehen der Anwendung, welche sie angelegt hat, dauerhaft zur Verfügung. Die Web Storage API funktioniert i.a. nur, wenn Sie dem Browser über einen Webserver geliefert wird! (Cookies sind an Browser gekoppelt.) Die von beiden Attributen genutzten Funktionen in JavaScript sind weitgehend die gleichen. Man muss also nicht doppelt lernen. Pro Applikation im Webbrowserfenster oder -reiter stehen aktuell etwa 5 MB zur Verfügung. Da Löschen möglich ist, muss über Speichermanagement nachgedacht werden. Browser fragen manchmal um Erweiterung des Speicherplatzes an / /6 1

2 Besonderheiten Wichtig ist der Ursprung der Webseite: / ergeben unterschiedliche Speicherbereiche. Beide Speicherarten sind weiterhin browserspezifisch, d.h. Browser unterschiedlicher Hersteller haben für denselben Ursprung getrennte Speicherbereiche. <div id="result"></div> Beispiel <script> // Store localstorage.setitem("lastname", "Meyer"); // Retrieve document.getelementbyid("result").innerhtml = localstorage.getitem("lastname"); </script> Das gleiche mit sessionstorage / /8 Beispiel <p><button onclick="clickcounter()" type="button">click me!</button></p> <div id="result"></div> <script> if (localstorage.clickcount) { localstorage.clickcount = Number(localStorage.clickcount) + 1; } else { localstorage.clickcount = 1; } document.getelementbyid("result").innerhtml = "You have clicked the button " + localstorage.clickcount + " time(s)."; </script> /9 JSON-Arrays localstorage.setitem( students, JSON.stringify({ name: Participant, list: [ Justus Bley, Peter Miller, Bob Black ] })); var participants = JSON.parse(localStorage.getItem( students )); console.log(participants.name, participants.list); /10 Verbreitung Nov Verbreitung Mai / /12 2

3 Quellen und Beispiele Spezifikation des W3C, Tutorial, US/docs/Web/Guide/API/DOM/Storage?redirectlocale=en- US&redirectslug=Web%2FGuide%2FDOM%2FStorage Demo (Webseite dazwischen neu laden!), Demo (Anleitung beachten), nur noch im IE Demo (Webseite in anderem Reiter / Browserfenster neu öffnen, starten, anderes Fenster - auch starten, Bug ansehen), Quellcode sehen Sie mit Firebug im Firefox. IndexedDB API Es ist ein Datenbanksystem, das indizierte Informationen clientseitig speichert. Anders als bei SQL werden Informationen als Objekte (Datensätze oder Records) in sogenannten Objektspeichern (Tabellen) gespeichert. Letztere haben nur Namen und Indizees. Jede Datenbank ist durch Computer und Website oder Anwendung eindeutig bestimmt. Es gibt keine Zugriffsrechte. (Name, Version) / /14 IndexedDB API Es ist eine API der untersten Ebene. Der Entwickler muss viel selbst programmieren und dabei die Bedingungen jedes Prozesses in jeder Operation prüfen. Deshalb wird der Einsatz der IndexedDB API vermutlich fast nur hinter Bibliotheken wie jquery erfolgen. Diese nehmen viel Programmierarbeit ab. IndexedDB-API Im Firefox sind die IndexedDB-Datenbanken beispielsweise in einer ganz normalen SQLite- Datenbank gespeichert. Die beiden anderen Browser verwenden jeweils hauseigene Speichertechniken: Extensible Storage Engine im IE, LevelDB in Chrome. [Peter Kröner] / /16 Verbreitung Nov / /18 3

4 Verbreitung Mai 2015 Für Opera, Safari Web SQL nutzen (depreciated). <script src="indexeddbshim.js"></script> /19 Quellen und Beispiele W3C-Spezifikation, Tutorial, Tutorial, 37 Tests einzelner Standardfeatures auf Basis von Prototype, ets/samples.html Peter Kröner testete, Nov. 2013, Artikel, in denen die Funktion setversion()-funktion erwähnt wird, sind definitiv veraltet!!! Die Funktion gibt es nicht mehr. Michael ToDo-Liste Frank online, APIs in /20 HTWK-Leipzig, HTML5 Quellen und Beispiele W3C-Spezifikation, Tutorial, Tutorial, 37 Tests einzelner Standardfeatures auf Basis von Prototype, ets/samples.html Peter Kröner testete, Nov. 2013, Artikel, in denen die Funktion setversion()-funktion erwähnt wird, sind definitiv veraltet!!! Die Funktion gibt es nicht mehr. Quellen JavaScript-Tutorial online, W3C, 6 Webapplications, , localforage: Tutorial dazu Michael ToDo-Liste Frank online, APIs in /21 HTWK-Leipzig, HTML /22 Es gibt heutzutage drei APIs zur Verwaltung von Dateien auf Clientseite: (Grundvariante, April 2015 Working Draft) : Directories & System (April 2014 Ende) : Writer (April 2014 Ende) Ziele sind es, Dateien auf dem Computer des Benutzers über Webseiten zu lesen, zu verarbeiten und zu erstellen. (Das Hoch- und Herunterladen von Dateien funktionierte schon früher.) /23 Die API existiert rudimentär schon länger, sie wird gerade intensiver theoretisch und experimentell fundiert. (2010: : from_web_applications Ende 2012 waren nach J.D. Gauchat nur Firefox 4 partiell und Chromium ( bei Bereitstellung der Testdateien auf einem Webserver in der Lage, die Funktionalitäten teilweise zu demonstrieren /24 4

5 Die Grundidee ist isolierte lokale Speicherung in einer clientseitigen kleinen objektorientierten Datenbank bzw. in einem kleinen Dateisystem. Beides würde anwendungsspezifisch funktionieren. Es soll nur zwei Lademöglichkeiten in den Verarbeitungsbereich geben: Das <input>-element und die Drag&Drop-Operation. Mit anderen Worten zu ladende Dateien müssen bereits existieren. Ein Tutorial vom Oktober 2014 zeigt wesentliche Anwendungsfälle auf, aber ohne Demo dazu: US/docs/Using_files_from_web_applications IE10 kann einige der.net 3.0 hinzugefügten Funktionen der, allerdings mit Vorsilbe ms : / /26 In dem Tutorial (s. unten) werden Funktionen beschrieben (mit Demo), die Bilder beim Laden zu jpeg oder png konvertieren Bilder in allen Winkeln drehen können Bilder beschneiden und in der Größe skalieren können Wasserzeichenbilder aufbringen können Bilder von Webcams einbinden können Demos: Ein weiteres Beispiel, das vielen von Ihnen zugänglich sein sollte, ist die Bildbearbeitungsfunktion von Facebook, die zwischen Auswahl zu versendender Bilder und Versand der Bilder geschaltet worden ist / /28 Browser: Microsoft Internet Explorer 10, Google Chrome 30, Mozilla Firefox 24, Safari 6 (Mac OS and ios 7) Compatibility (kurz registrieren, falsche -Adresse reicht, Okt. 2013) FileReadApi.html: demonstrates reading a small or huge file and showing the progress. Also support stopping and resuming. This demo can run in all previously listed browsers. FileSaver.html: demonstrates how to implement and use FileSaver. This demo can run in all previously listed browsers. FileSystemApi.html: demonstrates how to use File System API and FileWriter. It is only workable in Chrome among the previously listed browsers. FileSystemApiConsumer.html: lists all files created in FileSystemApi.html and reads the user specified one. Only for Chrome. DownloadFileViaBrowser.html and DownloadHandler.ashx: demonstrates the server code to enable browser downloading capability without exposing the file locations on the server. This demo can run in almost all browsers. Verwendung Nov / /30 5

6 Verbreitung Nov Verbreitung Nov Discontinued, April / /32 Quellen und Beispiele W3C-Spezifikation, WHATWG: work/multipage/states-of-the-type-attribute.html#file-upload-state- %28type=file%29 Älteres Beispiel: Datei-Upload (nur Dateiname, Dateigröße und MIME-Type sind ausgebbar) Jüngeres Beispiel: Laden von Bildern als Hintergrundbild einer div-box, streng lokal. Beispiel mit Hochladen von Bildern und simulierter Bildbearbeitung (2 Layer): (2012), Drag&Drop für Bilder Text aus Textdatei extrahieren: Communication API (3) XMLHttpRequest-API Level2: Es ist eine API für AJAX-Anwendungen geschaffen worden, die vollständig und browserübergreifend funktioniert. Neue Events, u.a. solche, die den Ladefortschritt nachvollziehen oder einen Abbruch des Ladens ermöglichen, die eine Datei hochladen. Cross-Origin Requests sind möglich, d.h. der Webserver muss per PHP-Scriptzeile des aufgerufenen Scripts oder per Konfiguration des Webservers selbst AJAX-Anfragen anderer Domains erlauben (spezifisch oder aller) / /34 XHR2 Communication API (3) Cross Document Messaging API (kurz: Web Messaging API): Diese API soll Kommunikationsbarrieren zwischen verschiedenen Frames und Fenstern überwinden. Auch Anwendungen mit verschiedenen Domänen als Ursprung können miteinander kommunizieren. Als Kennungen dienen Hostname und Port der Domänen. Für Tests sind zwei Domänen und Webserver erforderlich. Die Nachrichtenübermittlung ist asynchron / /36 6

7 Gleiche Domäne!!! Partial support in IE8-9 refers to only working in frames/iframes (not other tabs/ windows). Also in IE 9 and below an object cannot be sent using postmessage. Partial support in IE10 refers to limitations in certain conditions / /38 Communication API (3) Web Sockets: Ziel ist es, in der Kommunikation von Client und Webserver Echtzeitanwendungen zu ermöglichen. Die Verbindung wird über ein persistentes TCP- Socket ohne HTTP-Header hergestellt. Es wird ein Websockets-Server-Script benötigt. Diese gibt es fertig im Netz (PHP, Java, Ruby,...). Als Testbrowser eignen sich Chrome, FF. Es sollte https als Protokoll Verwendung finden. Zielangaben macht man besser gleich als IP-Nummer /39 Neues Protokoll HTTP/2 (bzw. SPDY) : Die IETF hat die Spezifikationen für HTTP 2.0 offiziell angenommen. Der neue Standard basiert auf dem von Google 2009 vorgestellten Protokoll SPDY, das der Internetkonzern für seinen Browser Chrome entwickelt hatte. HTTP/2 unterstützt eine Server-Push-Funktionalität im Hintergrund, die in der Regel nicht clientseitig steuerbar ist. Das ist weniger Funktionalität als bei Web Sockets /40 Quellen und Demos W3C-Spezifikation, W3C-Spezifikation, Einfache Demo: gleiche Domäne, - verschiedene Domänen (2015: FF nichts, IE Reaktion, aber Verbot) Tutorial: US/docs/Web/API/window.postMessage?redirectlocale=en- US&redirectslug=DOM%2Fwindow.postMessage Tutorial und Screencast-Demo: Experiment Spiel: Quadrat durch drei Fenster wandern lassen: / /42 7

8 Quellen und Demos W3C-Spezifikation, Echo-Test und Browser-Test, Kaazing: Börsenticker, New York Times Ticker, Gemeinsames Zeichenblatt im Netz: (Doku: Rumpetroll, die Nutzer bewegen ihre Figur simultan über die Fläche, plus Chatmöglichkeit: Wordsquared, Spiel galaktischen Ausmaßes: WebGL-Aquarium: Demos, viele Spiele: /43 Web Workers API JavaScript ist keine Multithread-Sprache, alles muss nacheinander abgearbeitet werden. Die Web Workers API bietet die Möglichkeit, Code im Hintergrund in separaten Threads zu verarbeiten. Damit ist JavaScript multitaskingfähig geworden! Die aktive Webseite bleibt davon unbeeinflusst. Das Grundmodell sind separate JavaScript- Dateien, die mit der Hauptdatei Nachrichten austauschen: Aufgabe hin, Ergebnis zurück /44 Web Workers API Nachrichten bestehen aus Strings oder aus JSON- Objekten. Andere Datenlasten sind derzeit nicht vorgesehen. Elemente des Hauptdokuments wie HTML- Elemente, JavaScript-Code oder -Variable sind den Workers nicht zugänglich. Fehlermeldungsroutinen für die Worker müssen programmiert werden. Worker können vom Hauptprogramm oder in sich selbst abgeschaltet werden. Workers und APIs Die HTML5-APIs liegen mitunter in einer asynchronen und in einer synchronen Version vor. Bisher wurde mit der asynchronen Version gearbeitet, d.h. die APIs liefen in einem separaten Thread. Die und die IndexedDB API gibt es aber z.b. auch als synchrone Versionen, die aktuell noch in der Entwicklung sind / /46 Dedicated und Shared Worker Ein Dedicated Worker arbeitet nur mit der Hauptdatei zusammen, von der er angesprochen (und mit der er zusammen erstellt) wurde. Ein Shared Worker kann mit mehreren Verbindungen zugleich arbeiten. Zum Test eines Dedicated Worker werden mindestens drei Dateien gebraucht, für den eines Shared Worker mindestens fünf Dateien / /48 8

9 Verbreitung im Nov Verbreitung im Mai 2015 Der Vergleich mit Nov zeigt: Angaben sind zu prüfen / /50 Quellen und Demos W3C-Spezifikation, shared-wrokers/ Demo: 3D-Bild zu berechnen mit wahlweise 0-16 Web Workern, Zeitmessung: 16 Demos: Emulating Web Workers in IE: Tutorial: US/docs/Web/Guide/Performance/Using_web_workers?redirectlocal e=en-us&redirectslug=dom%2fusing_web_workers Tutorial: Beispiel und Demos Tweeter Fall Web Workers, The highest prime number, Weitere Quellcodes von Ido Green, / /52 Andere APIs Nur APIs mit offiziellem Hintergrund sind gelistet! History API: Offline API: MediaStream API (oder Stream API): siehe WebRTC API Pointer Lock API: Page Visibility API: /User_experience/Using_the_Page_Visibility_API Andere APIs WebRTC API: Web Messaging API: /Introduction_to_Mobile_Message_API Web Audio API: / /54 9

10 Quellen JavaScript-Tutorial online, W3C, 6 Webapplications, , sehr gute Sammelseite von Web APIs, die Mozilla für bemerkenswert hält Vielen Dank für Ihre Aufmerksamkeit bis demnächst / /56 10