Service worker stops CSS images from showing if using JS location.href(JavaSript redirection), in Firefox but I have noticed some smaller loading problems in safari too after some other redirects, chrome works correct.
Anyways, in Firefox 100.0.2 (64-bit, windows 8.1) if you visit my site the first time and I use location.href(after onload event) to redirect you to the right place, based on your language pref, all sites CSS images don't appear at all, even after refresh, design is pretty blank, img tags are loading, no CSS backgrounds. Or if I activate service worker after the redirect, part of CSS images are loading not all of them.
Firefox Network shows 200 image loaded(service worker), but blank response, still not appearing any CSS images.
Anyone can help me with this. I have no idea why Firefox stops showing CSS backgrounds, something with fetch?
All the code:
//test.js
$(document).ready(function() {
if (document.getElementById("xxx")) {
location.href = "https://www.example.com/?xxx";
}
});
//swin.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
}, function(err) {
// registration failed :(
});
});
}
//sw.js
var filevers='1';
const OFFLINE_VERSION = filevers;
const CACHE_NAME = 'C'+filevers;
const expectedCaches = ['C'+filevers];
const OFFLINE_URL = 'offline.php';
const OFFLINE_URL_ALL = [
'offline.php',
'/.'
].map(url => new Request(url, {credentials: 'include'}));
self.addEventListener('install', (event) => {
self.skipWaiting();
event.waitUntil((async () => {
const cache = await caches.open(CACHE_NAME);
await cache.addAll(OFFLINE_URL_ALL);
})());
});
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys().then(keys => Promise.all(
keys.map(key => {
if (!expectedCaches.includes(key)) {
return caches.delete(key);
}
})
)).then(() => {
})
);
self.clients.claim();
});
self.addEventListener('fetch', (event) => {
const destination = event.request.destination;
if (destination == "style" || destination == "script" || destination == "document" || destination == "image" || destination == "font") {
event.respondWith((async () => {
try {
const cache = await caches.open(CACHE_NAME);
const cachedResponse = await cache.match(event.request);
if (cachedResponse) {
return cachedResponse;
} else {
const networkResponse = await fetch(event.request);
return networkResponse;
}
} catch (error) {
if (event.request.mode === 'navigate') {
const cache = await caches.open(CACHE_NAME);
const cachedResponse = await cache.match(OFFLINE_URL);
return cachedResponse;
}
}
})());
}
});
Current Conclusion: Tested on 2 different sites and 2 different PCs, at least some part of CSS images are not loaded, seems to be Firefox BUG, anyone can test this too?