Estoy creando una PWA. En offline.html quiero agregar un estilo External CSS en lugar de Internal CSS . Me vinculo con él, pero aunque muestra el código de estado de 200 en el modo offline , no funciona.
const CACHE_NAME = 'pwa-version-1'; const urlsToCache = ['index.html', 'offline.html', 'style.offline.css', '../src/style/style.offline.css']; const self = this; // Installation service worker self.addEventListener('install', (e) => { e.waitUntil( caches.open(CACHE_NAME) .then(cache => { console.log('Cache Opened') return cache.addAll(urlsToCache) }) .catch() ) }) // Listen for request self.addEventListener('fetch', (e) => { e.respondWith( caches.match(e.request) .then(() => { return fetch(e.request) .catch(() => { return caches.match('offline.html') }) }) .catch() ) }) Nota: si 'style.offline.css', '../src/style/style.offline.css' entonces la fetch de retorno falló .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../src/style/offline.css"> <title>Weather App</title> </head> <body> <div class="city"> <h2 class="city-name"> <span>Please go online to check the current weather.</span> </h2> </div> </body> </html>