HTML-Seite UND externe Ressourcen mit Servicemitarbeiter vorab abrufen ⇐ HTML

[Anonymous]

Ich möchte einen Service Worker verwenden, um eine Webseite bei der Installation vorab zwischenzuspeichern.
Es ist sehr einfach, den HTML-Code selbst vorab zwischenzuspeichern

Code: Select all

self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1')
.then((cache) => {
return cache.addAll(['/404.html']);
})
);
});

Aber! Wenn der Browser die Seite 404.html lädt, ruft er auch viele Abhängigkeiten von anderen URLs ab, wie Skripte, Stylesheets, Bilder, Schriftarten usw.
Wie kann mein Servicemitarbeiter auch diese Abhängigkeitsressourcen abrufen und vorab zwischenspeichern?

Ich möchte die Abhängigkeiten nicht manuell auflisten und verfolgen

Code: Select all

self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll([
'/404.html',
'/static/css/main.css',
'/static/css/404.css',
'/static/img/logo.png',
'/static/fonts/inter-var.woff2',
// ... everything the offline page needs
]);
})
);
});

Da es auf der Website viele im Cache gespeicherte Dateinamen gibt (z. B. main.abc123.css), die hin und wieder programmgesteuert generiert werden, funktioniert die Hardcodierung nicht, und ich möchte nicht riskieren, zu vergessen, manuell eine neue Abhängigkeit aus dieser Liste hinzuzufügen (oder eine veraltete zu entfernen). Ich stelle mir vor, dass ich etwas sehr Kompliziertes orchestrieren müsste (z. B. das Generieren der tatsächlichen Liste der Abhängigkeiten durch den Dramatiker), um eine solche Liste von Abhängigkeiten zu unterstützen.
Ich denke, das Parsen des HTML im Service Worker ist auch keine gute Lösung, da es keine CSS-URL()-Referenzen und dynamischen URLs (z. B. JS-generierte) verarbeitet, es sei denn, es gibt eine Browser-API dafür, die die Seite unter der Haube abruft (von dem ich noch nichts weiß), die Implementierung meines eigenen In-the-Browser-Parsers klingt nach Albträumen! Es wäre fragil und würde wahrscheinlich keine genaue Parität mit einem echten Browser aufrechterhalten.