Ich habe einen iframe, der auf 3rd-Party-Ressourcen beruht. Der iframe selbst hat keinen src, ist nicht sandboxed, ist mit Inhalt über AJAX gefüllt und seine Unterressourcen (e.x. CSS, Bilder) existieren auf einem CDN in einer anderen Domäne.Ist es möglich, Iframe-Unterressourcen mit Service-Mitarbeitern zu proxygrafieren?
Im Falle eines Ausfalls, entweder unserer oder unserer Kunden, hatte ich gehofft, in der Lage zu sein, das CSS des iframe zu einer lokalen Datei von unserer Domäne zu wechseln. Ich versuche, dies über das holen Ereignis in unseren Service-Arbeitern zu tun:
self.addEventListener('fetch', event => {
const processEpubRequests =() => fetch(`/epubs/${event.request.url.split('epub-resource/')[1]}`);
if(event.request.url.startsWith(`https://our_api.com`))
event.respondWith(
fetch(event.request)
.then(response => response.status >= 400 ? processEpubRequests(response) : response)
.catch(processEpubRequests)
);
else
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
Dies funktioniert gut für die AJAX-Anforderungen für den Inhalt, aber die CSS scheint nicht zu funktionieren. Es wird in der Registerkarte Netzwerk mit der richtigen Antwort angezeigt, aber es ist wie der Iframe ignoriert es einfach.
Ist es möglich, iframe-Unterressourcen auf diese Weise zu behandeln?
Vielen Dank!
EDIT: Ich produzierte eine Github-Seiten-Demo, um zu illustrieren, was ich sehe. Seite: https://soluml.github.io/ServiceWorkerIframeExample/ Src: https://github.com/soluml/ServiceWorkerIframeExample/tree/gh-pages