Las aplicaciones basadas en web están cada vez más " perfeccionadas " para dispositivos móviles y los trabajadores de servicios son la base de las aplicaciones avanzadas basadas en web (PWA). Cuando mire por primera vez esta tecnología, puede tener la impresión de que el trabajo principal de los trabajadores del servicio es almacenar en caché el contenido. Y así es. La tarea de los trabajadores del servicio es garantizar el funcionamiento de una aplicación web en las condiciones de una conexión inestable o completamente ausente a la Red, lo que se logra mediante el almacenamiento en caché de datos.
Debajo del corte, un par de pensamientos sobre las consecuencias para las aplicaciones web ha provocado la aparición de la capacidad de almacenar datos en caché a través de los trabajadores del servicio.
Arquitectura PWA
Aquí está la arquitectura clásica de tres niveles de una aplicación web:
Agregar un trabajador de servicio y herramientas de persistencia de datos ( API de caché e IndexedDB ) en el cliente transforma una arquitectura de tres niveles en una arquitectura de cinco niveles:
De hecho, en ausencia de una conexión a la red, una aplicación web progresiva debería funcionar en el cliente en un modo clásico de tres niveles:
y cuando aparezca una conexión a la red, vaya al nivel de cinco:
- Presentación (hilo principal) : interfaz de usuario;
- Client Logic (Service Worker) : lógica empresarial para procesar datos de un usuario específico, teniendo en cuenta el trabajo en los modos offline y online;
- Datos del cliente (API de caché e IndexedDB) : almacenes de datos específicos del usuario;
- 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 (.. ).
Lo anterior puede parecer un poco confuso para algunos, pero antes de escribir este artículo, mi comprensión del papel de los trabajadores de servicios en las aplicaciones web progresivas era aún más confuso. Agradecería los comentarios que aclaren aún más las tareas del trabajador de servicios y cómo utilizarlas.