Aquí hay un trabajador de servicio que almacena en caché solo los archivos básicos de inicio de la aplicación,
self.addEventListener("fetch", event => { event.respondWith( caches.match(event.request) .then( cachedResponse => { return cachedResponse || fetch(event.request); } ) ); }); const cacheName0 = "bare-bones-of-the-app"; const mainResourcesToPrecache = [ "index.html", "app.js", "style.css" ]; self.addEventListener("install", event => { event.waitUntil( caches.open(cacheName0).then(cache => { return cache.addAll(mainResourcesToPrecache); }) ); });Hasta aquí todo bien. Ahora digamos que este PWA es un juego y el usuario progresa a medida que completa un nivel tras otro. Y digamos que tenemos,
const cacheName1 = "level-1"; const resourcesForLevel1 = [ "somepicture.jpg", "someartwork.png", "somesound.mp3" ]; const cacheName2 = "level-2"; const resourcesForLevel2 = [ "anotherpicture.jpg", "anotherartwork.png", "anothersound.mp3" ]; // etcEn este caso, ¿cómo despertamos al trabajador del servicio con una función que se activa en el hilo principal y, por lo tanto, hacemos que el navegador obtenga los archivos por adelantado cuando el usuario llega a ciertos puntos en la aplicación?
Lo bueno de la API de almacenamiento en caché es que los mismos cachés están expuestos tanto en ServiceWorkerGlobalScope como en el contexto de Window . Entonces puede hacer lo que sugiere sin tener que enviar un mensaje al trabajador del servicio pidiéndole que almacene cosas en caché por usted.
Lo importante es asegurarse de que está utilizando los mismos nombres de caché en ambos contextos.
async function cacheLevel(levelNumber) { // Make sure this matches the cache name you use in the SW. const cacheName = `level-${levelNumber}; // Assume there's a levelNumber => URLs mapping function. const urls = getURLsForLevel(levelNumber); const cache = await caches.open(cacheName); await cache.addAll(urls); } (Usar postMessage() para comunicarse con el trabajador del servicio también es una opción, pero no es obligatorio para su caso de uso).