I am creating a PWA. At offline.html I want to add External CSS style instead of Internal CSS. I do link with it but although it shows status code of 200 at offline mode but doesn't work.
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()
)
})
Note: If I remove 'style.offline.css', '../src/style/style.offline.css' then it return fetch failed.
<!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>