1. Trabajadores de servicio: Esta es la piedra angular de las capacidades fuera de línea de PWA. Los trabajadores de servicios son scripts que se ejecutan en segundo plano, independientemente de la página web, lo que les permite interceptar las solicitudes de red y manejarlas incluso cuando la aplicación no está abierta activamente en el navegador. Ellos pueden:
* Activos de caché: Los trabajadores de servicios pueden almacenar en caché los activos estáticos como HTML, CSS, JavaScript, imágenes y fuentes. Cuando el usuario está fuera de línea, el trabajador de servicio puede servir estos activos en caché directamente desde el caché del navegador, evitando que la aplicación se rompa. Las estrategias como el almacenamiento en caché solo, el caché primero, la red primero y el revalidamiento rancio, mientras se revalidan, proporcionan diferentes niveles de control sobre cómo se utilizan los recursos en caché.
* manejar solicitudes de red: El trabajador de servicios puede interceptar solicitudes de datos de API u otros recursos de red. Si el usuario está fuera de línea, puede devolver las respuestas en caché. Si está en línea, puede obtener los datos de la red y actualizar el caché.
* Responda a las notificaciones push: Los trabajadores de servicios habilitan notificaciones push, incluso cuando la aplicación no está abierta, lo que permite informar al usuario sobre las actualizaciones o el nuevo contenido incluso fuera de línea. Sin embargo, la notificación en sí se mostrará cuando el usuario se conecte en línea.
2. IndexedDB: Esta es una API de la base de datos del lado del cliente que permite a PWAS almacenar datos localmente en el dispositivo del usuario. Esto es ideal para almacenar datos de aplicaciones, preferencias de usuario o cualquier contenido dinámico que deba persistir entre sesiones o cuando fuera de línea. Esto suplementa almacenamiento en caché almacenando datos específicos de la aplicación.
3. Estrategias de almacenamiento en caché: El almacenamiento en caché efectivo es crucial. Los PWA utilizan diferentes estrategias de almacenamiento en caché para equilibrar el contenido nuevo con disponibilidad fuera de línea. Estrategias como:
* caché-primero: Servir primero la respuesta en caché. Solo obtenga de la red si la respuesta en caché es obsoleta o falta.
* Network-First: Poner de la red primero. Alcijo la respuesta para su uso posterior.
* rancio-when-revalidate: Servir la respuesta en caché mientras obtiene simultáneamente una nueva de la red. Esto garantiza que el usuario siempre ve el último contenido eventualmente, al tiempo que proporciona una experiencia rápida fuera de línea.
4. Enfoque fuera de línea primero: Algunos PWA están diseñados con una filosofía "fuera de línea primero". Esto prioriza el acceso fuera de línea y considera la funcionalidad fuera de línea como el comportamiento principal. La aplicación funcionará como se esperaba fuera de línea, y cualquier característica en línea solo se tratan como adiciones, no de requisitos.
Implementación de ejemplo (conceptual con trabajador de servicio):
`` `JavaScript
// en su trabajador de servicio:
self.addeventListener ('install', (evento) => {
Event.waituntil (
Caches.open ('my-cache'). Entonces ((cache) => {
return cache.addall ([[
'/',
'/index.html',
'/styles.css',
'/script.js',
// ... otros activos
]);
})
);
});
self.addeventListener ('fetch', (evento) => {
event.lponspontWith (
Caches.Match (Event.Request) .then ((respuesta) => {
Respuesta de retorno || buscar (event.request); // estrategia de caché primero
})
);
});
`` `` ``
Este simple ejemplo muestra cómo caché de los activos estáticos. Las estrategias más complejas requieren una cuidadosa consideración de la estrategia de almacenamiento en caché, la gestión de datos y el manejo de posibles conflictos entre las respuestas en caché y la red. La sofisticación de la experiencia fuera de línea dependerá de la complejidad de la aplicación y las opciones de implementación del desarrollador.