CLIW 2017-2018 (10/12) Programare Web. API-uri JavaScript în contextul HTML5 (I)

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web la nivel de client
API-uri JavaScript în contextul HTML5 – partea I
html5demos.com

“You are never too old to set another goal
or to dream a new dream.”
C.S. Lewis

Încărcarea & redarea documentelor
prezentarea conținutului (reprezentării) unei resurse
– uzual, obiecte ale arborelui DOM –
are loc în cadrul unui context de navigare
(browsing context)

context de navigare
mediu în care sunt redate obiectele de tip Document

context de navigare
mediu în care sunt redate obiectele de tip Document
exemple tipice:
tab-ul unei instanțe de browser Web
elementul <iframe> în care se încarcă o altă resursă

context de navigare
are asociat un obiect WindowProxy
care referă obiectul Window

context de navigare
include un istoric al sesiunii curente (session history)
memorând secvența instanțelor de tip Document
care au fost redate utilizatorului
documentul curent e considerat ca fiind document activ

context de navigare
posedă un proprietar (creator browsing context)
desemnat de o origine (origin)
uzual, tuplul <schema, host, port, domain>

context de navigare
originile pot fi partajate și sunt imutabile, în general

context de navigare
originile pot fi partajate și sunt imutabile, în general
doar domeniul unei origini poate fi alterat
via proprietatea document.domain

context de navigare
anumite elemente – de exemplu, <iframe> –
pot instanția alte contexte:
contexte imbricate (nested browsing contexts)

context de navigare
astfel, un context imbricat are asociat un context părinte
pot exista diverse contexte copil „legate”
de un context părinte

context de navigare
un context imbricat poate fi setat să întârzie încărcarea
unei resurse (delaying load events mode)

context de navigare
poate avea asignat un nume (browsing context name)
nu există niciun nume prestabilit

context de navigare
poate avea asignat un nume (browsing context name)
denumiri speciale – valori ale atributului target
desemnând numele contextului de navigare:
_blank _self _parent _top
<a href="http://undeva.info/" target="_blank">…</a>

remarcă:
un document (instanță de tip Document)
nu trebuie obligatoriu să aibă atașat un context
caz frecvent:
instrumente de indexare a conținutului
(roboți ai motoarelor de căutare)
(re)vezi unul dintre
cursurile anterioare

uzual, unei instanțe de tip Document
îi corespunde un obiect Window (relație 1-la-1)

excepție:
reutilizarea unui obiect Window pentru prezentarea
altei instanțe de Document în cadrul aceluiași context
e.g., înlocuirea unui document vid (about:blank) cu altul

excepție:
refolosirea unei instanțe de Document pentru a încărca
alte obiecte Window via metoda document.open()

interface Window : EventTarget {
// contextul curent de navigare
[Unforgeable] readonly attribute WindowProxy window;
[Replaceable] readonly attribute WindowProxy self;
[Unforgeable] readonly attribute Document document;
attribute DOMString name;
[PutForwards=href, Unforgeable] readonly attribute Location location;
readonly attribute History history;
[Replaceable] readonly attribute BarProp locationbar;
[Replaceable] readonly attribute BarProp menubar;
[Replaceable] readonly attribute BarProp personalbar;
[Replaceable] readonly attribute BarProp scrollbars;
[Replaceable] readonly attribute BarProp statusbar;
[Replaceable] readonly attribute BarProp toolbar;
attribute DOMString status;
void close();
readonly attribute boolean closed;
void stop();
void focus();
void blur(); interfață declarată cu WebIDL

interface Window : EventTarget {
// contextul curent de navigare
[Unforgeable] readonly attribute WindowProxy window;
[Replaceable] readonly attribute WindowProxy self;
[Unforgeable] readonly attribute Document document;
attribute DOMString name;
[PutForwards=href, Unforgeable] readonly attribute Location location;
readonly attribute History history;
[Replaceable] readonly attribute BarProp locationbar;
[Replaceable] readonly attribute BarProp menubar;
[Replaceable] readonly attribute BarProp personalbar;
[Replaceable] readonly attribute BarProp scrollbars;
[Replaceable] readonly attribute BarProp statusbar;
[Replaceable] readonly attribute BarProp toolbar;
attribute DOMString status;
void close();
readonly attribute boolean closed;
void stop();
void focus();
void blur();
interface BarProp {
readonly attribute boolean visible;
};

// alte contexte de navigare
[Replaceable] readonly attribute WindowProxy frames;
[Replaceable] readonly attribute unsigned long length;
[Unforgeable] readonly attribute WindowProxy top;
attribute any opener;
[Replaceable] readonly attribute WindowProxy parent;
readonly attribute Element? frameElement;
WindowProxy open (optional DOMString url = "about:blank",
optional DOMString target = "_blank",
[TreatNullAs=EmptyString]
optional DOMString features = "",
optional boolean replace = false);
getter WindowProxy (unsigned long index);
getter object (DOMString name);
// informații despre client
readonly attribute Navigator navigator;

// interacțiune cu utilizatorul
void alert();
void alert(DOMString message);
boolean confirm(optional DOMString message = "");
DOMString? prompt(optional DOMString message = "",
optional DOMString default = "");
void print();
// aspecte privind rata de redare a animațiilor
unsigned long requestAnimationFrame(FrameRequestCallback callback);
void cancelAnimationFrame(unsigned long handle);
};
// stabilirea de funcții pentru tratarea evenimentelor
// e.g., onplay ondrag onprogress
Window implements GlobalEventHandlers;
Window implements WindowEventHandlers;
www.w3.org/TR/html5/browsers.html#window-window

Control asupra cache-ului navigatorului Web
ApplicationCache
detalii la www.w3.org/TR/html5/browsers.html#offline

politica de caching e specificată de un fișier .appcache
referit prin <html manifest="offline.appcache">
pentru fiecare pagină Web a aplicației
CACHE MANIFEST
# Aplicație Web minunată (versiunea 1.0.1)
# resurse (proprii / din alte domenii) ce pot fi plasate în cache
index.html
cache.html
html5.css
fig.jpg
img/logo.png
http://www.penguin.info/tux.css
# preia de pe rețea conținutul unor resurse, dacă e posibil
NETWORK:
news.html
# conținut alternativ, dacă suntem offline
FALLBACK:
/fallback.html

ApplicationCache
operații asupra cache-ului: update() abort() swapCache()
starea cache-ului este furnizată de atributul status

ApplicationCache
actualmente, această tehnică e considerată învechită
“This feature is in the process of being removed from
the Web platform. (This is a long process that takes many years.)
Using any of the offline Web application features at this time
is highly discouraged. Use service workers instead.”
conform html.spec.whatwg.org/multipage/offline.html#offline

Specificarea contoarelor de timp
WindowTimers
setTimeout() clearTimeout()
setInterval() clearInterval()
www.w3.org/TR/html5/webappapis.html#timers

Specificarea contoarelor de timp
WindowTimers
observații (W3C, 2017):
“Timers can be nested; after 5 such nested timers, however,
the interval is forced to be at least four milliseconds.”
“This API does not guarantee that timers will run exactly
on schedule. Delays due to CPU load, other tasks, etc.,
are to be expected.”

Starea și proprietățile sistemului
interfața Navigator având sub-interfețele:
NavigatorID – identitatea browser-ului
NavigatorLanguage – preferințe lingvistice ale clientului
NavigatorOnline – starea online/offline a navigatorului
NavigatorContentUtils – manipularea conținuturilor
NavigatorCookies – informații privind cookie-urile
NavigatorPlugins – managementul plugin-urilor
www.w3.org/TR/html5/webappapis.html#system-state-and-capabilities

[NoInterfaceObject, Exposed=(Window, Worker)]
interface NavigatorID {
readonly attribute DOMString appCodeName; // constanta "Mozilla"
readonly attribute DOMString appName; // oferă "Netscape"
readonly attribute DOMString appVersion;
readonly attribute DOMString platform;
readonly attribute DOMString product; // întoarce "Gecko"
readonly attribute DOMString userAgent;
};

remarcă:
datele furnizate pot fi folosite
la identificarea utilizatorului
implicații asupra intimității (privacy)
browser-ul ar trebui să ofere cât mai puține informații

remarcă:
“In certain cases, despite the best efforts of the entire
industry, Web browsers have bugs and limitations
that Web authors are forced to work around.” (W3C, 2017)
detectarea clientului trebuie întotdeauna
să ia în considerație versiunile actuale
se presupune că versiunile viitoare/necunoscute
vor fi compatibile cu cea curentă

protocoalele și/sau tipurile de date
ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorContentUtils
registerProtocolHandler() registerContentHandler()
implicit, într-un URI se permit scheme precum:
bitcoin irc geo mailto magnet mms news nntp sip
sms smsto ssh tel urn webcal xmpp

protocoalele și/sau tipurile de date
ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorContentUtils
tipuri Media-Type (MIME) uzuale:
application/x-www-form-urlencoded application/xhtml+xml application/xml
image/gif image/jpeg image/png image/svg+xml
text/cache-manifest text/css text/html text/plain text/xml

Managementul istoricului navigării
enum ScrollRestoration { "auto", "manual" };
interface History {
readonly attribute unsigned long length;
readonly attribute unsigned long index;
attribute ScrollRestoration scrollRestoration;
readonly attribute any state;
void go(optional long delta = 0);
void back();
void forward();
void pushState(any data, DOMString title, optional USVString? url = null);
void replaceState(any data, DOMString title, optional USVString? url = null);
};
html.spec.whatwg.org/multipage/history.html

enum ScrollRestoration { "auto", "manual" };
interface History {
readonly attribute unsigned long index;
attribute ScrollRestoration scrollRestoration;
readonly attribute any state;
void go(optional long delta = 0);
void back();
void forward();
void pushState(any data, DOMString title, optional USVString? url = null);
void replaceState(any data, DOMString title, optional USVString? url = null);
};
html.spec.whatwg.org/multipage/history.html
toate posibilele valori scalare
Unicode Scalar Values

la traversarea istoricului, pot fi emise evenimentele:
popstate
hashchange
pagetransition
exemplu demonstrativ:
html5demos.com/history/

adițional, fiecărui obiect Window i se asociază
o unică instanță a unui obiect de tip Location
proprietăți (mutabile):
href origin protocol host hostname port pathname search hash

adițional, fiecărui obiect Window i se asociază
o unică instanță a unui obiect de tip Location
metode:
asign() replace() reload()

Drag & drop
stocarea fragmentelor de date în diverse formate,
în vederea efectuării operațiilor drag & drop
www.w3.org/TR/html5/editing.html#drag-and-drop
html.spec.whatwg.org/multipage/dnd.html#dnd
developer.mozilla.org/Web/API/HTML_Drag_and_Drop_API

Drag & drop
un element HTML poate fi sursă pentru drag & drop
dacă are atașat atributul draggable="true" și are definită
o funcție de tratare a evenimentului dragstart
ce stochează datele ce vor fi transferate către destinație

Drag & drop
datele de transferat vor fi stocate
de un obiect DataTransfer
developer.mozilla.org/Web/API/DataTransfer
se permit diverse operații – precizate de effectsAllowed:
copiere (copy copyLink)
mutare (move linkMove),
realizarea unei legături (link) etc.

Drag & drop
destinatarul operațiunii drag & drop va avea definit
atributul dropzone a cărui valoare specifică tipul MIME
al datelor ce vor fi acceptate
e.g., string:text/plain pentru a accepta orice șir de caractere
sau file:image/jpeg pentru un fișier JPEG

Drag & drop
o soluție alternativă:
ținta operației drop poate trata
evenimentele dragenter și, eventual, dragover
pentru a oferi un feedback vizual utilizatorului

Drag & drop
evenimente ce pot fi tratate:
drop
dragenter
dragover
dragend

Drag & drop
pentru exemplificări și alte detalii, a se consulta:
dev.opera.com/articles/view/drag-and-drop/
www.html5rocks.com/tutorials/dnd/basics/
html5demos.com/drag

suport inexistent
pe platforme mobile

Alte API-uri de bază:
editing API
conținutul poate fi marcat ca fiind editabil
via atributul contenteditable
document.designMode="on"
întreg documentul poate fi editat la nivel local
www.w3.org/TR/html5/editing.html

editing API
execuția de script-uri asupra selecției curente
sau la poziția curentă a cursorului de text
metode: execCommand()
queryCommandEnabled() queryCommandState()
queryCommandSupported() etc.
developer.mozilla.org/Web/API/Document/execCommand

scripting
suport pentru execuția de cod
în contextul unui document HTML:
procesarea elementelor <script>
navigarea via URL-uri folosind schema javascript:
managementul funcțiilor de tratare a evenimentelor
suport pentru scripting în alte limbaje – e.g., SVG

scripting
interfața ErrorEvent pentru raportarea erorilor
interface ErrorEvent : Event {
readonly attribute DOMString message;
readonly attribute DOMString filename;
readonly attribute unsigned long lineno;
readonly attribute unsigned long colno;
readonly attribute any error;
};

Există alte specificații/inițiative de interes?

WebSocket API
definește un API abstract pentru transmiterea de date
pe baza protocolului de transfer WebSocket – RFC 6455
succesor al abordării Comet (Reverse Ajax)

WebSocket API
detalii disponibile în specificația HTML5 Living Standard
(12 decembrie 2017)
html.spec.whatwg.org/multipage/web-sockets.html

[Constructor(USVString url, optional (DOMString or
sequence<DOMString>) protocols), Exposed=(Window,Worker)]
interface WebSocket : EventTarget {
readonly attribute USVString url;
const unsigned short CONNECTING = 0; // constante: starea conexiunii
const unsigned short OPEN = 1;
const unsigned short CLOSING = 2;
const unsigned short CLOSED = 3;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;
attribute EventHandler onopen; // funcții de tratare a evenim.
attribute EventHandler onerror; // privitoare la comunicarea
attribute EventHandler onclose; // prin rețea
readonly attribute DOMString extensions;
readonly attribute DOMString protocol;
specificație WebIDL

// închiderea conexiunii
void close (optional unsigned short code, optional USVString reason);
// diverse maniere de transfer de mesaje (date)
attribute EventHandler onmessage;
attribute BinaryType binaryType; // { "blob", "arraybuffer" };
void send(USVString data);
void send(Blob data);
void send(ArrayBuffer data);
void send(ArrayBufferView data);
}
a se parcurge și
developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

WebSocket API
transferul datelor se realizează
în regim full duplex (bidirecțional),
folosind un singur socket
se recurge la schemele URI ws: și wss:

// creăm un socket Web
var sock = new WebSocket ("ws://www.undeva.info/");
// asociem funcțiile de tratare a evenimentelor
sock.onopen = function (ev) {
// socket-ul a fost deschis, transferul datelor poate începe…
};
sock.onclose = function (ev) {
console.log ("Socket-ul a fost închis; cod de stare: " + ev.code)
};
sock.onmessage = function (ev) {
console.log ("Am recepționat mesajul: " + ev.data);
};
sock.onerror = function (ev) {
console.error ("A survenit o eroare…");
};
// trimitem date
sock.send ("Salutări hibernale! :)");
// am închis conexiunea
sock.close (); maniera generală de
transfer al datelor

// actualizările de date vor fi trimise cu rata de o actualizare
// la fiecare 33ms, dacă rețeaua oferă suficientă lățime de bandă
var sock =
new WebSocket ('ws://joc.undeva.org:19740/updates');
sock.onopen = function () {
setInterval (function() {
if (sock.bufferedAmount === 0)
sock.send (oferaDate ());
}, 33);
};
oferă numărul de octeți
ce n-au fost transmiși încă

// exemplu în contextul IoT (Internet of Things):
// implementarea unui comutator
sock.onmessage = function (ev) {
if (event.data == 'on') {
lamp.turnOn();
} else if (ev.data == 'off') {
lamp.turnOff();
}
};
exemple și resurse de interes:
www.websocket.org/aboutwebsocket.html
html5demos.com/web-socket

WebSocket API
diverse instrumente de programare
la nivel de server:
apache-websocket (modul Apache), proiectul APE,
framework-ul Autobahn (Web, aplicații mobile, IoT),
HornetMQ, Kaazing, Jetty, Juggernaut, MigratoryData,
PHPWebsocket, Socket.IO (bazat pe Node.js), websockify
github.com/facundofarias/awesome-websockets

WebSocket API
diverse instrumente de programare
la nivel de client (aplicații) – API-uri/biblioteci:
Arduino WebSocket (C++), Beast (C++),
Java API for WebSocket (JSR 356), libwebsockets (C),
Rachet (PHP), SignalR (.NET), Tyrus (Java), Web-socket-js,
clasa WebSocket (Dart), ZTWebSocket (Objective-C),…
github.com/facundofarias/awesome-websockets

WebSocket API
navigatorul poate fi considerat platformă de dezvoltare
a aplicațiilor Internet
oferă suport pentru diverse paradigme de comunicare:
RPC (Remote Procedure Call)
+
Pub/Sub (Publish/Subscribe)

How HTML5 Web Sockets Interact With Proxy Servers
www.infoq.com/articles/Web-Sockets-Proxy-Servers

arhitectura aplicatiilor Web ce recurg la WebSocket
conform Peter Lubbers (2012)

WebSocket API
de studiat și WAMP – Web Application Messaging Protocol
wamp-proto.org
exemple de instrumente software folositoare:
Autobahn.js – client WAMP
crossbar.io – router WAMP

EventSource API (Server-Send Events)
mecanism standardizat de transmitere prin HTTP
a unui flux continuu de date – în format text/event-stream –
de la server spre client (push events)
fără a se închide conexiunea
tratarea recepționării datelor provenite de la server
se realizează via evenimente DOM

EventSource API (Server-Send Events)
detalii disponibile în specificația HTML5 Living Standard
(12 decembrie 2017)
html.spec.whatwg.org/multipage/server-sent-events.html

interface EventSource : EventTarget {
readonly attribute USVString url;
readonly attribute boolean withCredentials;
// valori ale stării conexiunii
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
// evenimente de rețea ce pot fi tratate
attribute EventHandler onopen;
attribute EventHandler onerror;
void close();
};
specificația WebIDL a interfeței

// verificăm dacă există suport oferit de navigatorul Web
if (!!window.EventSource) {
// instanțiem o sursă de date (un flux)
var flux = new EventSource ("http://news.info/web/today");
// tratăm evenimentele
flux.onopen = function () { console.log ("Am deschis fluxul"); }
flux.onmessage = function (ev) {
console.log ("Am primit date de la server: " + ev.data);
}
flux.onerror = function (ev) {
if (ev.eventPhase != EventSource.CLOSED)
console.error ("A survenit o eroare…");
else {
/* conexiunea a fost închisă */
}
}
};
un exemplu complet:
github.com/mdn/dom-examples/tree/master/server-sent-events

tutoriale:
www.html5rocks.com/en/tutorials/eventsource/basics/
developer.mozilla.org/Web/API/Server-sent_events/Using_server-sent_events

Web Messaging
oferă API-uri pentru realizarea transferului de mesaje
între diverse contexte de navigare

Web Messaging
de studiat HTML5 Living Standard
(12 decembrie 2017)
html.spec.whatwg.org/multipage/web-messaging.html

Web Messaging
mesajele pot proveni de la server, via socket-uri Web
sau de la alte documente via canale de comunicație
documentele HTML5 pot transmite date unul altuia,
chiar dacă aparțin unor domenii Internet diferite
mesajele pot conține obiecte
de tip File Blob, FileList, ArrayBuffer etc.

Web Messaging
datele privind evenimentul de recepționare
a unui mesaj sunt specificate de interfața MessageEvent
transmiterea unui mesaj
se efectuează cu metoda postMessage ()

Web Messaging
interfața MessageChannel specifică
un canal de transmitere de mesaje
constituit din 2 porturi (sursă și destinație)
vezi și interfața MessagePort

typedef sequence<MessagePort> MessagePortArray;
interface MessagePort : EventTarget {
// plasează un mesaj
void postMessage (any message,
optional sequence<Transferable> transfer = [ ]);
void start (); // deschide canalul de comunicație
void close (); // închide canalul
// tratează evenimentul recepționării unui mesaj
// tratează erorile de transmitere
attribute EventHandler onmessageerror;
};

un exemplu succint:
tutorials.jenkov.com/html5/messaging.html

Broadcast Channel API
permite comunicații simple între contexte de navigare
(ferestre, tab-uri, <iframe>-uri) având aceeași origine
(i.e. pagini ale aceluiași sit Web)
expedierea datelor se face via metoda postMessage()
recepționarea datelor se realizează
tratând evenimentul onmessage
developer.mozilla.org/Web/API/Broadcast_Channel_API

exemplificări:
developer.mozilla.org/Web/API/Channel_Messaging_API/Using_channel_messaging
developers.google.com/web/updates/2016/09/broadcastchannel

(în loc de) pauză
devhumor.com/media/spiders-are-the-only-web-developers-that-are-happy-to-find-bugs

Web Workers
conceptul de worker Web:
script rulat în fundal – în accepțiunea daemon-ilor Unix –
independent de alte programe JavaScript
nu interacționează direct cu utilizatorul
nu are acces la arborele DOM

Web Workers
conceptul de worker Web:
script rulat în fundal – în accepțiunea daemon-ilor Unix –
independent de alte programe JavaScript
mediul de execuție a unui worker e complet separat,
codul fiind rulat concurent/paralel, în mod asincron

Web Workers
se oferă un API pentru instanțierea și manipularea
programelor JavaScript de tip worker
HTML Living Standard (12 decembrie 2017)
html.spec.whatwg.org/multipage/workers.html

Web Workers
un worker – desemnat de interfața Worker –
prezintă un domeniu global de execuție
specificat de interfața WorkerGlobalScope

[Exposed=Worker]
interface WorkerGlobalScope : EventTarget {
readonly attribute WorkerGlobalScope self;
readonly attribute WorkerLocation location; // originea worker-ului
readonly attribute WorkerNavigator navigator; // contextul navigării
void importScripts(USVString... urls);
// tratarea evenimentelor
attribute EventHandler onlanguagechange;
attribute EventHandler onoffline;
attribute EventHandler ononline;
attribute EventHandler onrejectionhandled;
attribute EventHandler onunhandledrejection;
};
WorkerGlobalScope are rol de clasă de bază pentru instanțe
de obiecte specifice: DedicatedWorkerGlobalScope,
SharedWorkerGlobalScope, ServiceWorkerGlobalScope

Web Workers
un obiect WorkerGlobalScope are asociată:
o mulțime de proprietari (owner set) desemnați de
obiecte de tip Document sau WorkerGlobalScope

Web Workers
un obiect WorkerGlobalScope are asociată:
o mulțime de „lucrători” (worker set) – inițial, vidă –
ce poate fi populată cu obiecte de tip WorkerGlobalScope

Web Workers
un obiect WorkerGlobalScope are asociate, de asemenea:
un tip – type (classic sau module)
o adresă – url (inițial, null)
un nume – name (șir de caractere)
o stare a conexiunii HTTPS ("none", "deprecated", "modern")
o politică de securitate (CSP – Content Security Policy)

Web Workers
dedicated worker
„legat” de creatorul lui
interacțiunea se face via canale de comunicație
prin intermediul porturilor de mesaje
vezi interfața MessagePort

[Global=(Worker, DedicatedWorker), Exposed=DedicatedWorker]
interface DedicatedWorkerGlobalScope : WorkerGlobalScope {
[Replaceable] readonly attribute DOMString name; // nume specific
void postMessage (any message, // plasează un mesaj
optional sequence<Transferable> transfer = [ ]);
void close (); // oprește execuția
// tratează apariția unui mesaj ce poate fi procesat
// tratează erorile survenite
attribute EventHandler onmessageerror;
};
“Dedicated web workers are instantiated by
the main process and they can communicate only with it.”
(Guillaume Cedric Marty, 2015)

<form>
<div>
<label for="number1">Primul număr: </label>
<input type="text" id="number1" value="0">
</div>
<div>
<label for="number2">Al doilea număr: </label>
<input type="text" id="number2" value="0">
</div>
</form>
<p class="result">Rezultatul înmulțirii: 0</p>
…

<script src="main.js"></script>
exemplu complet – înmulțirea a două numere:
github.com/mdn/simple-web-worker

// Program principal care va recurge la un worker pentru procesarea datelor
var nr1 = document.querySelector('#number1'); // preluăm câmpurile din formular
var nr2 = document.querySelector('#number2');
var rezultat = document.querySelector('.result');
var lucrator = new Worker ("worker.js"); // instanțiem un „lucrător” dedicat
nr1.onchange = function () { // s-a modificat valoarea primului câmp
lucrator.postMessage ([nr1.value, nr2.value]); // se trimit date worker-ului
console.log ('Mesaj expediat lucrătorului');
};
nr2.onchange = function () { // s-a modificat valoarea câmpului al II-lea
lucrator.postMessage ([nr1.value, nr2.value]); // se trimit date
console.log ('Mesaj expediat lucrătorului');
};
lucrator.onmessage = function (ev) { // date primite de la worker
rezultat.textContent = ev.data; // ce vor fi plasate în documentul Web
console.log ('Mesaj primit de la lucrător');
};

// Codul-sursă al lucrătorului: worker.js
onmessage = function (ev) {
console.log ('Mesaj recepționat de la programul principal');
// datele de la programul principal au fost transmise ca tablou
var rezultat = 'Rezultatul înmulțirii: ' + (ev.data[0] * ev.data[1]);
console.log ('Se trimite un mesaj cu răspunsul programului principal');
postMessage (rezultat);
}

Web Workers
shared worker
are un nume ce desemnează cod JavaScript partajabil
poate fi utilizat de toate procesele având (rulând pe)
aceeași origine – tab-uri ale aceleași instanțe de
browser, elemente <iframe> sau alți lucrători partajați –,
comunicând cu acestea

[Global=(Worker, SharedWorker), Exposed=SharedWorker]
interface SharedWorkerGlobalScope : WorkerGlobalScope {
[Replaceable] readonly attribute DOMString name; // nume specific
void close (); // oprește execuția
// tratează unei conexiuni la worker din partea unui client
attribute EventHandler onconnect;
};
un „lucrător” partajat (shared worker)
are asociate o origine și un URL și va recepționa mesaje
via evenimente connect pentru fiecare conexiune în parte

Web Workers
service worker
cod responsabil cu accesarea unor servicii externe
(disponibile prin Internet)
specificație W3C în regim de ciornă (2 noiembrie 2017)
www.w3.org/TR/service-workers/
resurse de interes:
jakearchibald.github.io/isserviceworkerready/resources.html

Web Workers
service worker
“Service workers essentially act as proxy servers that sit
between Web applications, and the browser and the network
(when available). They are intended to (amongst other
things) enable the creation of effective offline experiences,
intercepting network requests, and taking appropriate
action based on whether the network is available, and
updated assets reside on the server.”
developer.mozilla.org/Web/API/Service_Worker_API

Web Workers
service worker
reprezintă un „lucrător” – fișier JavaScript –
ce va răspunde la evenimente specifice unei origini
fiind asincron, opțiunile sincrone ale API-urilor
localStorage și XMLHttpRequest nu pot fi utilizate
comunicarea se poate realiza exclusiv prin HTTPS

ciclul de viață al lui service worker
developers.google.com/web/fundamentals/primers/service-workers/

Web Workers
service worker
la început, trebuie înregistrat prin metoda
ServiceWorkerContainer.register ()
care întoarce un obiect de tip Promise

if ('serviceWorker' in navigator) { // există suport disponibil în browser?
// la încărcarea resursei se înregistrează și codul JS de tip service worker
window.addEventListener ('load', function() {
navigator.serviceWorker.register ('/service-worker.js')
.then (function (reg) { // succes
console.log('ServiceWorker înregistrat cu succes: ',
reg.scope); // se indică și domeniul de vizibilitate (scope)
}, function (eroare) {
// a apărut o eroare… :(
console.log ('ServiceWorker – eroare survenită: ', eroare);
});
});
}

Web Workers
service worker
după înregistrare, se va instala codul „lucrătorului” –
tratându-se evenimentul install și, opțional, controlând
politica de stocare în cache a resurselor ce vor fi folosite

Web Workers
service worker
după înregistrare, se va instala codul „lucrătorului” –
tratându-se evenimentul install și, opțional, controlând
politica de stocare în cache a resurselor ce vor fi folosite
controlul memoriei cache se realizează via CacheStorage
developer.mozilla.org/en-US/docs/Web/API/CacheStorage
care poate include obiecte de tip Cache
developer.mozilla.org/en-US/docs/Web/API/Cache

var url-uriCache = [ // lista adreselor Web
'/', // ale resurselor statice
'/styles/stil.css', // care pot fi stocate în cache
'/scripts/main.js',
'/images/logo.png'
];
this.addEventListener ('install', function (ev) {
ev.waitUntil ( // se așteaptă până când resursele sunt plasate în cache
caches.open ('v1') // prima versiune a cache-ului creat
.then (function(cache) {
return cache.addAll (url-uriCache);
})
);
});
metode oferite de interfața Cache:
add() addAll() put() match() matchAll() keys() delete()

Web Workers
service worker
pentru fiecare eveniment fetch recepționat, „lucrătorul”
poate oferi conținutul solicitat (fie din cache,
fie de la distanță – e.g., invocând un serviciu Web)
evenimentul fetch este emis de fiecare dată
când se solicită o resursă aflată sub controlul „lucrătorului”

// se tratează evenimentul fetch
this.addEventListener ('fetch', function (ev) {
ev.respondWith (
caches.match (ev.request) // resursa solicitată există deja în cache?
.then (function (response) {
if (response) { // da (cache hit)
return response;
}
return fetch (ev.request); // se execută un fetch() real
}
)
);
});
exemplificări complete:
developer.mozilla.org/Web/API/Service_Worker_API/Using_Service_Workers
developers.google.com/web/fundamentals/primers/service-workers/

inspectarea
worker-ilor Web
cu instrumentele
pentru dezvoltatori
oferite de browser

tutoriale, exemple de bună practică, biblioteci:
https://serviceworke.rs/
jakearchibald.github.io/isserviceworkerready/resources.html

Web Storage
oferă mecanisme de stocare (persistentă) a datelor
la nivel de client (browser)
sub forma de perechi cheie—valoare

Web Storage
recomandare a Consorțiului Web (2016)
www.w3.org/TR/webstorage/
specificația cea mai recentă:
HTML Living Standard (12 decembrie 2017)
html.spec.whatwg.org/multipage/webstorage.html

Web Storage
interfața Storage oferă acces la o listă de perechi (itemi)
de forma cheie—valoare

interface Storage {
// mărimea spațiului de stocare
// cheie pentru acces la date
DOMString? key (unsigned long index);
// consultarea unui item
getter DOMString getItem (DOMString key);
// asignarea de valori pentru un item
setter creator void setItem (DOMString key, DOMString value);
// eliminarea unui item
deleter void removeItem (DOMString key);
// ștergerea spațiului de stocare
void clear ();
}
metodele setItem () și removeItem ()
se consideră ca fiind atomice

Web Storage
maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage

Web Storage
stocare nepersistentă
(suport pentru sesiuni)

Web Storage
alternativă la cookie-uri

Web Storage
orice modificare a zonei de stocare
conduce la emiterea evenimentului storage
interface StorageEvent : Event {
readonly attribute DOMString? key;
readonly attribute DOMString? oldValue;
readonly attribute DOMString? newValue;
readonly attribute DOMString url;
readonly attribute Storage? storageArea;
};

<textarea id="editor" placeholder="Începeți să tastați...">
</textarea>
document.querySelector ('#editor').addEventListener ('keyup',
function (eveniment) { // la fiecare eliberare a tastei…
// stocăm conținutul și data editării
localStorage.setItem ('valoare', this.value);
localStorage.setItem ('data', (new Date ()).getTime ());
}, false);

Web Storage
față de cookie-uri, datele stocate în localStorage
nu au un timp de viață stabilit a-priori
(pot fi șterse explicit de utilizator sau prin program)

Web Storage
datele memorate în localStorage
sunt disponibile numai la nivel local – în browser
(serverul Web nu le poate accesa direct decât
via un program ce le transferă explicit prin HTTP)

Web Storage
nu este precizată o dimensiune maximă
pentru stocarea locală a datelor cu localStorage
(navigatorul Web poate impune o anumită valoare,
eventual ulterior modificată de utilizator)

de explorat Awesome Web Storage
github.com/softvar/awesome-web-storage

Indexed Database API
suport de stocare de date la nivel obiectual
via un API asincron, inclusiv pentru WebWorker
Indexed Database API 2.0
(W3C Proposed Recommendation, noiembrie 2017)
www.w3.org/TR/IndexedDB/

obiectele de stocare compun baze de date
identificate prin nume
fiecare bază de date are asociată o versiune (număr >= 0)

interface IDBDatabase : EventTarget {
readonly attribute DOMString name;
readonly attribute unsigned long version;
readonly attribute DOMStringList objectStoreNames;
IDBObjectStore createObjectStore (DOMString name, // stocare
optional IDBObjectStoreParameters options);
void deleteObjectStore (DOMString name); // ștergere
IDBTransaction transaction ((DOMString or sequence<DOMString>)
storeNames, optional IDBTransactionMode mode = "readonly");
void close ();
attribute EventHandler onabort; // abandonarea unei operații
attribute EventHandler onclose; // închiderea conexiunii
attribute EventHandler onerror; // tratează posibile erori
attribute EventHandler onversionchange; // tratează actualizările
};
interfață modelând o conexiune la baza de date,
rezultând o tranzacție

interface IDBDatabase : EventTarget {
readonly attribute unsigned long version;
IDBObjectStore createObjectStore (DOMString name, // stocare
optional IDBObjectStoreParameters options);
void deleteObjectStore (DOMString name); // ștergere
IDBTransaction transaction ((DOMString or sequence<DOMString>)
storeNames, optional IDBTransactionMode mode = "readonly");
void close ();
attribute EventHandler onabort; // abandonarea unei operații
attribute EventHandler onclose; // închiderea conexiunii
attribute EventHandler onerror; // tratează posibile erori
attribute EventHandler onversionchange; // tratează actualizările
};
var db = indexedDBSync.open ('Agenda', 1,
function (tranz, versVeche) {
tranz.db.createObjectStore ('Adrese',
{ keyPath: 'id', autoIncrement: true } ); });

datele sunt indexate, în sensul că fiecare înregistrare
posedă o cheie unică de tip Number, String, Date ori Array
(conform specificației ECMAScript)

de asemenea, o înregistrare (record) are o valoare
corespunzătoare unui tip de date ECMAScript
valoarea propriu-zisă e obținută prin evaluarea
așa-numitei căi asociate cheii (key path)
(uzual, un șir de caractere ori șiruri delimitate de „.”)

interface IDBObjectStore { // specifică maniera de stocare
readonly attribute DOMString keyPath;
readonly attribute DOMStringList indexNames;
readonly attribute IDBTransaction transaction;
readonly attribute boolean autoIncrement;
IDBRequest put (any value, optional any key); // operații privind cheile
IDBRequest add (any value, optional any key);
IDBRequest delete (any query);
IDBRequest clear ();
IDBRequest get (any query);
IDBRequest getKey (any query);
IDBRequest getAll (optional any query,
optional [EnforceRange] unsigned long count);
IDBRequest getAllKeys (optional any query,
optional [EnforceRange] unsigned long count);
IDBRequest count (optional any query);

// operații privind cursoarele
IDBRequest openCursor (optional any? query,
optional IDBCursorDirection direction = "next");
IDBRequest openKeyCursor (optional any? query,
optional IDBCursorDirection direction = "next");
// operații vizând indecșii
IDBIndex index (DOMString name);
IDBIndex createIndex (DOMString name,
(DOMString or sequence<DOMString>) keyPath,
optional IDBIndexParameters options);
void deleteIndex (DOMString indexName);
};
dictionary IDBIndexParameters { // folosit pentru precizarea opțiunilor
boolean unique = false;
boolean multiEntry = false;
};

[Exposed=(Window, Worker)]
interface IDBRequest : EventTarget { // modelează o cerere
readonly attribute any result; // rezultatul interogării emise
readonly attribute DOMException? error; // eventuala eroare survenită
readonly attribute (IDBObjectStore or IDBIndex or IDBCursor)? source;
readonly attribute IDBTransaction? transaction;
// starea interogării: în așteptare ("pending") sau efectuată ("done")
readonly attribute IDBRequestReadyState readyState;
attribute EventHandler onsuccess; // funcții de tratare a evenim.
};
alte detalii:
developer.mozilla.org/en-US/docs/Web/API/IDBRequest

accesul la înregistrări se poate realiza și via indecși
specificați de interfața IDBIndex
metode utile:
get() getKey() getAll() getAllKeys()
count()
openCursor() openKeyCursor()
developer.mozilla.org/en-US/docs/Web/API/IDBIndex

operațiile asupra datelor din baza de date
se realizează prin intermediul tranzacțiilor
fiecare tranzacție are asociată o conexiune
o tranzacție poate fi deschisă (inițiată) în modurile:
readonly, readwrite, versionchange

interface IDBTransaction : EventTarget {
// modul de efectuare a tranzacției: readonly, readwrite, versionchange
readonly attribute IDBTransactionMode mode;
readonly attribute IDBDatabase db;
readonly attribute DOMError error; // include eroarea apărută
IDBObjectStore objectStore (DOMString name);
void abort ();
attribute EventHandler onabort;
attribute EventHandler oncomplete;
};

interface IDBTransaction : EventTarget {
// modul de efectuare a tranzacției: readonly, readwrite, versionchange
readonly attribute IDBTransactionMode mode;
readonly attribute IDBDatabase db;
readonly attribute DOMError error; // include eroarea apărută
IDBObjectStore objectStore (DOMString name);
void abort ();
attribute EventHandler onabort;
attribute EventHandler oncomplete;
};
var tran = db.transaction (); // crearea unei tranzacții
var adr = tran.objectStore ('Adrese');
var loc = adr.add ( { nume: 'Copou', numar: '11' } );
var locatie = adr.get (1); // locatie.nume === 'Copou'

iterarea unui număr de înregistrări se face via un cursor
valorile direcției de parcurgere sunt specificate
via IDBCursorDirection: next, nextunique, prev, prevunique

[Exposed=(Window, Worker)]
interface IDBCursor {
readonly attribute (IDBObjectStore or IDBIndex) source; // sursa datelor
readonly attribute IDBCursorDirection direction; // direcția de iterare
readonly attribute any key; // cheia
readonly attribute any primaryKey; // cheia primară
IDBRequest update (any value); // actualizarea valorilor
IDBRequest delete ();
void advance ([EnforceRange] unsigned long count);
void continue (optional any key);
void continuePrimaryKey (any key, any primaryKey);
};
developer.mozilla.org/en-US/docs/Web/API/IDBCursor

excepții specifice:
UnknownError ConstraintError DataError
TransactionInactiveError ReadOnlyError VersionError
excepții preluate de la DOM – nivelul 4:
NotFoundError InvalidStateError InvalidAccessError
AbortError TimeoutError QuotaExceededError
SyntaxError DataCloneError

pentru detalii și exemplificări, a se studia:
developer.mozilla.org/Web/API/IndexedDB_API/Using_IndexedDB
gist.github.com/BigstickCarpet/a0d6389a5d0e3a24814b
exemple specifice:
în contextul WebGL
www.webappers.com/2014/01/02/how-to-use-indexeddb-to-handle-3d-webgl-assets/
vizând PWA (Progressive Web Applications)
developers.google.com/web/ilt/pwa/working-with-indexeddb

Web SQL Database
set de API-uri pentru managementul
asincron al bazelor de date la nivel de client via SQL
specificație abandonată!
www.w3.org/TR/webdatabase/

Web SQL API
specificație demodată,
dar implementată de unele navigatoare Web

File API
suită de API-uri pentru manipularea fișierelor
specificație W3C în stadiu de ciornă (octombrie 2017)
www.w3.org/TR/FileAPI/

File API
interfețe de interes:
File – consultarea informațiilor vizând un fișier
Blob – consultarea datelor binare imutabile
FileList – lista unor fișiere, eventual via <input type="file">
FileReader – citirea datelor dintr-un File sau Blob
API-ul se poate folosi în conjuncție cu
XMLHttpRequest, postMessage, drag & drop, WebWorker

interface FileReader : EventTarget {
// metode de citire asincronă
void readAsArrayBuffer (Blob blob);
void readAsBinaryString (Blob blob);
void readAsText (Blob blob, optional DOMString label);
void readAsDataURL (Blob blob);
void abort ();
// coduri de stare
const unsigned short EMPTY = 0;
const unsigned short LOADING = 1;
const unsigned short DONE = 2;
// rezultatul obținut: File sau Blob
readonly attribute (DOMString or ArrayBuffer)? result;

interface FileReader : EventTarget {
// metode de citire asincronă
void readAsArrayBuffer (Blob blob);
void readAsBinaryString (Blob blob);
void readAsText (Blob blob, optional DOMString label);
void readAsDataURL (Blob blob);
void abort ();
// coduri de stare
const unsigned short EMPTY = 0;
const unsigned short LOADING = 1;
const unsigned short DONE = 2;
// rezultatul obținut: File sau Blob
readonly attribute (DOMString or ArrayBuffer)? result;
evenimente ce pot fi tratate:
onloadstart onprogress onload onabort onerror onloadend

File API
diverse exemplificări:
developer.mozilla.org/Using_files_from_web_applications
în conjuncție cu drag & drop
html5demos.com/file-api/
capturarea de imagini de la Webcam
github.com/coremob/camera

Privire de ansamblu
asupra stocării la nivel de client
Web Storage API: localStorage + sessionStorage
IndexedDB
Web SQL – specificație abandonată
Application Cache – via Service Worker
File APIs
cookie-uri clasice

episodul viitor:
API-uri JavaScript în contextul HTML5 (II)

CLIW 2017-2018 (10/12) Programare Web. API-uri JavaScript în contextul HTML5 (I)

More Related Content

What's hot (20)

Similar to CLIW 2017-2018 (10/12) Programare Web. API-uri JavaScript în contextul HTML5 (I) (20)

More from Sabin Buraga (19)

CLIW 2017-2018 (10/12) Programare Web. API-uri JavaScript în contextul HTML5 (I)