Предварительная загрузка HTML-страницы И внешних ресурсов с помощью сервисного работника ⇐ Html

[Anonymous]

Я хочу использовать сервис-воркера для предварительного кэширования веб-страницы при установке.
Предварительно кэшировать сам HTML очень легко

Код: Выделить всё

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

Но! Когда браузер загружает страницу 404.html, он также извлекает множество зависимостей от других URL-адресов, таких как сценарии, таблицы стилей, изображения, шрифты и т. д.
Как мой сервис-воркер может также получать и предварительно кэшировать эти ресурсы зависимостей?

Я не хочу вручную перечислять и отслеживать зависимости

Код: Выделить всё

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
]);
})
);
});

Поскольку на сайте много имен файлов с разрушенным кешем (например, main.abc123.css), которые время от времени генерируются программно, поэтому жесткое кодирование не будет работать, и я не хочу рисковать забыть вручную добавить новую зависимость (или удалить устаревшую) из этого списка. Я предполагаю, что мне придется организовать что-то очень сложное (например, создание драматургом реального списка зависимостей) для поддержки такого списка зависимостей.
Я думаю, что анализ HTML в сервисном работнике также не является хорошим решением, поскольку он не обрабатывает ссылки CSS url(), динамические URL-адреса (например, сгенерированные JS), если для этого не существует API браузера, который извлекает страницу под капотом (который Я пока не знаю), реализация моего собственного парсера в браузере звучит как кошмар! Он будет хрупким и, вероятно, не будет соответствовать реальному браузеру.

Подробнее здесь: https://stackoverflow.com/questions/798 ... ice-worker