STAW 09/12: Programare Web. API-uri JavaScript în contextul HTML5 (I)

Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Full-Stack Web Development
API-uri JavaScript în contextul HTML5 – partea I
html5demos.com
Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/

“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
cazuri tipice:
instrumente de indexare a conținutului
(roboți ai motoarelor de căutare)
sau
instanțe de navigator Web neinteractiv (headless browser)

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;
readonly attribute CustomElementRegistry customElements;
[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;
readonly attribute CustomElementRegistry customElements;
[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 USVString url = "",
optional DOMString target = "_blank",
optional [TreatNullAs=EmptyString]
DOMString features = "");
getter object (DOMString name);
// informații despre client
readonly attribute Navigator navigator;
[SecureContext] readonly attribute ApplicationCache applicationCache;
USV = Unicode
Scalar Values
toate posibilele
valori scalare

// interacțiune cu utilizatorul – se pot înlocui cu <dialog> (HTML 5.2)
void alert ();
void alert (DOMString message);
boolean confirm (optional DOMString message = "");
DOMString? prompt (optional DOMString message = "",
optional DOMString default = "");
void print ();
// plasarea de mesaje altei instanțe de fereastră
void postMessage (any message, USVString targetOrigin,
optional sequence<object> transfer = []);
void postMessage (any message,
optional WindowPostMessageOptions options = {});
// stabilirea de funcții pentru tratarea evenimentelor
// e.g., onplay ondrag onprogress
Window implements GlobalEventHandlers;
Window implements WindowEventHandlers;
html.spec.whatwg.org/multipage/window-object.html#the-window-object

Control asupra cache-ului navigatorului Web
ApplicationCache

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()
html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers

Specificarea contoarelor de timp
WindowTimers
observații (HTML Living Standard, 26 noiembrie 2019):
“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
NavigatorConcurrentHardware – arhitectura hardware
html.spec.whatwg.org/multipage/system-state.html#system-state-and-capabilities

interface mixin NavigatorID {
readonly attribute DOMString appCodeName; // constanta "Mozilla"
readonly attribute DOMString appName; // constanta "Netscape"
readonly attribute DOMString appVersion;
readonly attribute DOMString platform;
readonly attribute DOMString product; // constanta "Gecko"
readonly attribute DOMString userAgent;
[Exposed=Window] readonly attribute DOMString vendor;
};

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, 2019)
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
(HTML Living Standard, 26 noiembrie 2019)
enum ScrollRestoration { "auto", "manual" };
[Exposed=Window]
interface History {
readonly attribute unsigned long length;
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

la traversarea istoricului, pot fi emise evenimentele:
popstate
hashchange
pagetransition
exemple demonstrative:
bestvpn.org/html5demos/history/
www.quirksmode.org/dom/events/tests/hashchange.html

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:
assign() replace() reload() toString()
alte detalii la developer.mozilla.org/Web/API/Location

Drag & drop
stocarea fragmentelor de date în diverse formate,
în vederea efectuării operațiilor drag & drop
html.spec.whatwg.org/multipage/interaction.html#drag-and-drop
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/
bestvpn.org/html5demos/drag/
www.tutorialspoint.com/html5/html5_drag_drop.htm

suport incomplet
pe platforme mobile

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
detalii disponibile în specificația HTML Living Standard
(26 noiembrie 2019)
html.spec.whatwg.org/multipage/web-sockets.html

WebSocket API
un program JavaScript rulat de navigatorul Web poate
trimite mesaje de tip cerere spre o aplicație invocată
la nivel de server pentru a recepționa, ulterior, mesaje de
tip răspuns în mod asincron (event-driven responses)
succesor al abordării Comet – Reverse Ajax

[Exposed=(Window,Worker)]
interface WebSocket : EventTarget {
constructor (USVString url,
optional (DOMString or sequence<DOMString>) protocols = []),
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 evenimentelor
attribute EventHandler onerror; // vizând comunicarea asincronă
attribute EventHandler onclose; // a datelor prin rețea
readonly attribute DOMString extensions;
readonly attribute DOMString protocol;
specificația WebIDL a interfeței

// î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);
}
de studiat și developer.mozilla.org/Web/API/WebSockets_API

WebSocket API
fiecare WebSocket are asociat un URL
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 pentru a controla o veioză
sock.onmessage = (ev) => {
if (event.data == 'on') {
lamp.turnOn();
} else if (ev.data == 'off') {
lamp.turnOff();
}
};
exemple și resurse de interes:
www.websocket.org/aboutwebsocket.html
www.websocket.org/demos.html
html5demos.com/web-socket

Instrumente de programare pentru WebSocket
la nivel de server – independente de limbaj:
deepstream – deepstream.io
Nchan (modul NGINX) – nchan.io
Websocketd – websocketd.com
de considerat și
HornetMQ, Jetty, MigratoryData, websockify

la nivel de server – specifice:
C/C++: Mongoose Embedded Web Server Library,
QtWebSockets, µWebSockets
C#: ASP.NET SignalR, websocket-manager
Java: Atmosphere, Scarlet (pentru Android)
Node.js: Netflux, nodejs-websocket, Socket.IO, SockJS-node
PHP: phpws, Ratchet, Sandstone
Python: Autobahn, Tornado, websockets
Ruby: Faye-websocket

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

WebSocket API
navigatorul Web poate fi considerat platformă de
dezvoltare a aplicațiilor Internet
oferă suport și pentru diverse paradigme de comunicare:
RPC (Remote Procedure Call)
+
Pub/Sub (Publish/Subscribe)
vezi WebSub (W3C, 2018) – www.w3.org/TR/websub/

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)
manieră 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ă închiderea conexiunii
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
(26 noiembrie 2019)
html.spec.whatwg.org/multipage/server-sent-events.html

interface EventSource : EventTarget {
constructor (USVString url,
optional EventSourceInit eventSourceInitDict = {});
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

// instanțiem o sursă de date (un flux)
const flux = new EventSource ("//news.info/web/today");
// tratăm evenimentele
flux.onopen = () => console.log ("Am deschis fluxul");
flux.onmessage = (ev) => console.log ("Date de la server: " + ev.data);
flux.onerror = (ev) => { }; // raportarea erorilor
pentru un exemplu complet, a se studia:
github.com/mdn/dom-examples/tree/master/server-sent-events

resurse de interes:
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
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
optional sequence<Transferable> transfer = [ ]);
optional PostMessageOptions options = {});
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;
};

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ă

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 (26 noiembrie 2019)
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 OnErrorEventHandler onerror;
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 realizează 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 = [ ]);
optional PostMessageOptions options = {});
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)

cod JS de tip
Web Worker
fir de execuție
principal
(main thread)
postMessage
navigator Web
onmessage
onmessageerror

<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
let nr1 = document.querySelector('#number1'); // preluăm câmpurile din formular
let nr2 = document.querySelector('#number2’);
let rezultat = document.querySelector('.result');
const 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 = (ev) => {
console.log ('Mesaj recepționat de la programul principal');
// datele de la programul principal au fost transmise ca tablou
let rezultat = ev.data[0] * ev.data[1];
if (isNaN (rezultat)) {
console.error ('Parametri incorecți');
postMessage ('Furnizați 2 numere');
} else {
console.log ('Trimitem mesaj cu răspunsul programului principal');
postMessage (`Rezultatul înmulțirii: ${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
// tratarea apariției unei conectări 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 JS responsabil cu accesarea unor servicii externe
(disponibile prin Internet)
specificație W3C în curs de finalizare
(Candidate Recommendation, 19 noiembrie 2019)
www.w3.org/TR/service-workers/

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 realizează 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', () => {
navigator.serviceWorker.register ('/service-worker.js')
.then ( (reg) => { // succes
console.log('ServiceWorker – înregistrat cu succes: ',
reg.scope); // se indică și domeniul de vizibilitate (scope)
}, (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
controlul memoriei cache se realizează via CacheStorage
developer.mozilla.org/Web/API/CacheStorage
care poate include obiecte de tip Cache
developer.mozilla.org/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 ((cache) => 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', (ev) => {
ev.respondWith (
caches.match (ev.request) // resursa solicitată există deja în cache?
.then ( (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/

cod JS de tip
Service Worker
fir de execuție
principal
(main thread)
postMessage
navigator Web
onmessage
onmessageerror
cache
☁

resurse de interes:
jakearchibald.github.io/isserviceworkerready/resources.html

inspectarea worker-ilor Web
cu instrumentele pentru dezvoltatori
oferite de browser – about:debugging

depanarea codului JS
a unui worker instanțiat
de navigatorul Web

tutoriale + exemple de bună practică (Mozilla):
serviceworke.rs

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 (26 noiembrie 2019)
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
readonly attribute unsigned long length;
// 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(S)

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 Recommendation, 2018)
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/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/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/Web/API/IDBCursor

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

pentru detalii și exemplificări, a se experimenta:
developer.mozilla.org/Web/API/IndexedDB_API/Using_IndexedDB
gist.github.com/JamesMessinger/a0d6389a5d0e3a24814b
exemple specifice vizând PWA
(Progressive Web Applications)
developers.google.com/web/ilt/pwa/working-with-indexeddb
www.smashingmagazine.com/2018/11/guide-pwa-progressive-web-applications/
detalii într-un
curs viitor

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
abordare demodată,
dar implementată de unele navigatoare Web

File API
suită de API-uri pentru manipularea fișierelor
specificație W3C în stadiu de ciornă (11 septembrie 2019)
www.w3.org/TR/FileAPI/
developer.mozilla.org/docs/Web/API/File

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 encoding);
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 encoding);
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
inițiative neoficiale:
File & Directory Entries API și Cookie Store API

Alte inițiative – unele neoficiale:
acces la elementele sistemului de fișiere
File and Directory Entries API (30 septembrie 2019)
wicg.github.io/entries-api/
acces asincron la datele stocate de cookie-uri
Cookie Store API (02 decembrie 2019)
wicg.github.io/cookie-store/
partajarea conținutului curent la o destinație specifică
Web Share API (06 noiembrie 2019)
w3c.github.io/web-share/

episodul viitor:
alte API-uri JavaScript specifice HTML5
consumator
flux citibil
(readable stream)
date
procesate

STAW 09/12: Programare Web. API-uri JavaScript în contextul HTML5 (I)

More Related Content

What's hot (20)

Similar to STAW 09/12: Programare Web. API-uri JavaScript în contextul HTML5 (I) (20)

More from Sabin Buraga (20)

STAW 09/12: Programare Web. API-uri JavaScript în contextul HTML5 (I)