Les applications Web sont de plus en plus « affûtées » pour les appareils mobiles et les techniciens de service sont à la base des applications Web avancées (PWA). Lorsque vous examinez cette technologie pour la première fois, vous pourriez avoir l'impression que la tâche principale des techniciens de service est de mettre en cache le contenu. Et c'est comme ça. La tâche des techniciens de service est d'assurer le fonctionnement d'une application Web dans des conditions de connexion instable ou inexistante au réseau, ce qui est obtenu par la mise en cache des données.
Dans le cadre de la réduction, quelques réflexions sur les conséquences pour les applications Web de l'émergence de la capacité de mettre en cache des données via des travailleurs de service.
Architecture PWA
Voici l' architecture classique à trois niveaux d'une application Web:
L'ajout d'un service worker et d'outils de persistance des données ( API Cache et IndexedDB ) sur le client transforme une architecture à trois niveaux en une architecture à cinq niveaux:
En effet, en l'absence de connexion au réseau, une application web évolutive devrait fonctionner sur le client dans un mode classique à trois niveaux:
et lorsqu'une connexion au réseau apparaît, passez au niveau cinq:
- Présentation (fil de discussion principal) : interface utilisateur;
- 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 (.. ).
Ce qui précède peut sembler un peu déroutant pour certains, mais avant d'écrire cet article, ma compréhension du rôle des travailleurs des services dans les applications Web progressives était encore plus déroutante. Je serais reconnaissant pour les commentaires qui clarifient davantage les tâches des travailleurs de service et comment les utiliser.