Actualmente estoy trabajando en una pequeña aplicación web que debería implementar un primer escenario almacenado en caché (los usuarios descargan la aplicación wep en una base provista de wifi y luego deberían poder usarla fuera de línea) No estoy usando ningún marco y, por lo tanto, implemento el almacenamiento en caché (SO) yo mismo. Como también integro contenido de PlayCanvas (que tiene su propia pantalla de carga) en un iframe , me preguntaba qué estrategia general en términos de carga tendría sentido.
En un proyecto similar, simplemente dejo que el trabajador del servicio descargue los activos en paralelo a la carga (inicial) de la aplicación. Pero me vino a la mente que sería mejor implementar un flujo de trabajo más cercano al comportamiento de una aplicación nativa, es decir, mostrar una pantalla de carga general durante el proceso de descarga del trabajador del servicio y construir/mostrar mi aplicación principal después de que finalice este proceso ( o falló -> escenario de red forzado o sucedió antes -> escenario fuera de línea). Otra solución sería mostrar un banner que no bloquee "Los activos aún se están descargando".
Los pensamientos principales que llevan al segundo flujo de trabajo donde:
Sería genial si alguien pudiera proporcionarme comentarios/información:
Como siempre, gracias por cualquier aviso de antemano.
Mucho de esto se reduce a lo que desea que experimenten sus usuarios. La tecnología subyacente está ahí para lograr cualquiera de los escenarios que describa.
Por ejemplo, si desea mostrar información sobre el progreso del almacenamiento previo en caché durante la instalación inicial del trabajador del servicio, puede hacerlo agregando código de la siguiente manera.
En su trabajador de servicio:
const PRECACHE_NAME = "..."; const URLS_TO_PRECACHE = [ // ... ]; async function notifyClients(urlsCached, totalURLs) { const clients = await self.clients.matchAll({ includeUncontrolled: true }); for (const client of clients) { client.postMessage({ urlsCached, totalURLs }); } } self.addEventListener("install", (event) => { event.waitUntil( (async () => { const cache = await caches.open(PRECACHE_NAME); const totalURLs = URLS_TO_PRECACHE.length; let urlsCached = 0; for (const urlToPrecache of URLS_TO_PRECACHE) { await cache.add(urlToPrecache); urlsCached++; await notifyClients(urlsCached, totalURLs); } })() ); });En sus páginas de clientes:
// Optional: if controller is not set, then there isn't already a // previous service worker, so this is a "first-time" install. // If you would prefer, you could add this event listener // unconditionally, and you'll get update messages even when there's an // updated service worker. if (!navigator.serviceWorker.controller) { navigator.serviceWorker.addEventListener("message", (event) => { const { urlsCached, totalURLs } = event.data; // Display a message about how many URLs have been cached. }); }