Служба, как загрузить index.html из кэша только в автономном режиме, если онлайн из сети ⇐ Javascript

[Anonymous]

Я пытаюсь реализовать сетевую стратегию для index.html , где она всегда извлекается из сети, но возвращается к кэшу только в автономном режиме.
Причина этого подхода заключается в том, что мой index.html содержит точки входа для файлов JavaScript и CSS, которые включают хэш в их именах файлов. Когда я нажимаю обновление, эти хэши изменяются, то есть обслуживающий работник не найдет старые файлы .js и .css в кэше. Всегда получая index.html из сети, приложение мгновенно загрузит последнюю версию, не требуя руководства, нажав на просьбу перезагрузки.
Однако я все еще хочу приложение Для работы в автономном режиме, поэтому, если нет подключения к Интернету, index.html должен быть обслуживаться из кэша. InjectManifest , и мой текущий работник службы кэширует все, включая файлы HTML, CSS, JS, PNG, ICO и SVG. >

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

/// 
import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching';
import { NavigationRoute, registerRoute } from 'workbox-routing';

declare let self: ServiceWorkerGlobalScope;

self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') self.skipWaiting();
});

// self.__WB_MANIFEST is the default injection point
precacheAndRoute(self.__WB_MANIFEST);

// clean old assets
cleanupOutdatedCaches();

registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')));

Я пытался изменить его так, чтобы index.html всегда извлекается из сети, возвращаясь к кэшу только в автономном режиме. Тем не менее, index.html все еще, кажется, каждый раз обслуживается из кэша. "Lang-Js PrettyPrint-Override">

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

/// 
import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching';
import { NavigationRoute, registerRoute } from 'workbox-routing';
import { NetworkFirst } from 'workbox-strategies';
import { cacheNames } from 'workbox-core';

declare let self: ServiceWorkerGlobalScope;

self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') self.skipWaiting();
});

// self.__WB_MANIFEST is the default injection point
precacheAndRoute(self.__WB_MANIFEST);

// clean old assets
cleanupOutdatedCaches();

// Retrieve the precache cache name dynamically
const precacheCacheName = cacheNames.precache;

registerRoute(
({ request }) => request.mode === 'navigate' || request.url.endsWith('/index.html'),
new NetworkFirst({
cacheName: precacheCacheName,
plugins: [
{
fetchDidFail: async ({ request }) => {
console.warn('Network request failed, serving from cache:', request.url);
},
},
],
})
);

registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')));

Что я делаю не так? Приложения?

Я понимаю, что подсказка перезагрузки все равно будет появляться, потому что обслуживающий работник входит в состояние ожидания. Тем не менее, эта стратегия гарантирует, что если я внесу изменения в бэкэнд, недавно вынесенный JavaScript будет работать немедленно вместо того, чтобы сбой с ошибками API до тех пор, пока пользователь вручную не перезагрузит. Таким образом, приложение остается функциональным, не ожидая, когда подсказка перезагрузки вступит в силу.
Спасибо

Подробнее здесь: https://stackoverflow.com/questions/794 ... -online-fr