Webbasierte Anwendungen werden fĂŒr mobile GerĂ€te zunehmend " geschĂ€rft ", und Servicemitarbeiter bilden die Grundlage fĂŒr fortschrittliche webbasierte Anwendungen (PWA). Wenn Sie sich diese Technologie zum ersten Mal ansehen , haben Sie möglicherweise den Eindruck, dass die Hauptaufgabe der Servicemitarbeiter darin besteht, Inhalte zwischenzuspeichern. Und so ist es. Die Aufgabe der Servicemitarbeiter besteht darin, das Funktionieren einer Webanwendung unter den Bedingungen einer instabilen oder vollstĂ€ndig fehlenden Verbindung zum Netzwerk sicherzustellen, was durch Daten-Caching erreicht wird.
Unter dem Strich haben einige Gedanken ĂŒber die Konsequenzen fĂŒr Webanwendungen die Entstehung der FĂ€higkeit, Daten durch Servicemitarbeiter zwischenzuspeichern, gefĂŒhrt.
PWA-Architektur
Hier ist die klassische dreistufige Architektur einer Webanwendung:
Durch HinzufĂŒgen eines Service Workers und von Datenpersistenz-Tools ( Cache-API und IndexedDB ) auf dem Client wird eine dreistufige Architektur in eine fĂŒnfschichtige Architektur umgewandelt:
Wenn keine Verbindung zum Netzwerk besteht, sollte eine progressive Webanwendung in einem klassischen dreistufigen Modus auf dem Client funktionieren:
Wenn eine Verbindung zum Netzwerk hergestellt wird, wechseln Sie zur fĂŒnfstufigen Ebene:
- PrÀsentation (Hauptthema) : BenutzeroberflÀche;
- Client Logic (Service Worker): - offline & online ;
- Client Data (Cache API & IndexedDB): ;
- Server Logic (Server): - ;
- Server Data (DB): ;
Offline first
web- mobile first. PWA â offline first. , ( ), .
, service worker' , . â . â (online/offline) .
, offline- â , ( - ) - , .
:
- : , (HTML/CSS/JS/images/...);
- (API): ( , JSON), ( ), ( );
() Cache API â "" â ""
(API) â IndexedDB (NoSQL JSON).
Cache
Chrome' Application / Cache / Cache Storage / < >, :
, , CDN , .
IndexedDB
Chrome' Application / Storage / IndexedDB / < > / < >, :
CRUD-, , . IndexedDB . , .
, .
service worker'
- service worker' . ( webpack') . service worker' WorkerGlobalScope.importScripts(). , . service worker' :
import('/modules/my-module.js')
.then((module) => {
// Do something with the module.
});, service worker', . â service worker web- offline-, .
service worker' ( IndexedDB) (PWA offline) ( â â ). Online- PWA "" : Client Logic/Data â Server Logic/Data. - web- : , , (, ACL ).
service worker' - service worker' (, ES6 import), service worker' , - Main Thread ( ).
web-, , :
Service worker . , online offline (.. ).
Das Obige mag einigen etwas verwirrend erscheinen, aber bevor ich diesen Artikel schrieb, war mein VerstĂ€ndnis der Rolle von Servicemitarbeitern in progressiven Webanwendungen noch verwirrender. Ich wĂ€re dankbar fĂŒr Kommentare, die die Aufgaben der Servicemitarbeiter und deren Verwendung nĂ€her erlĂ€utern.