Блог

Мой первый код таков:

 const FALLBACK_HTML_URL = '/offline.html'; let urlHandler = new NetworkFirst({  cacheName: 'html' }); registerRoute(  ({request}) =gt; true,  ({event}) =gt; {  return urlHandler.handle({event})  .then((response) =gt; {  return response || caches.match(FALLBACK_HTML_URL);  })  .catch(() =gt; caches.match(FALLBACK_HTML_URL));  } );  

Поэтому, когда я устанавливаю PWA и запускаю его в автономном режиме, результатом является: This site can’t be reached

Поэтому я изменил NetworkFirst на CacheFirst . Тот же результат: This site can’t be reached

У меня есть две проблемы:

1. Он не кэширует страницы и не загружает их в автономном режиме.
2. Если он не кэшировал страницы, он должен был вернуть резервный вариант, не так ли? Он не показывает автономную страницу, которая есть /offline.html .

Я исправил второй с помощью (хотя я не уверен, что это подходящий способ):

 const CACHE_NAME = 'offline-html'; self.addEventListener('install', (event) =gt; {  event.waitUntil((async () =gt; {  const cache = await caches.open(CACHE_NAME);  await cache.add(new Request(FALLBACK_HTML_URL, {cache: 'reload'}));  })()); });  self.addEventListener('activate', (event) =gt; {  event.waitUntil((async () =gt; {  console.log(self.registration)  if ('navigationPreload' in self.registration) {  await navigationPreload.enable();  }  })()); });  self.addEventListener('fetch', (event) =gt; {  if (event.request.mode === 'navigate') {  event.respondWith((async () =gt; {  try {  const preloadResponse = await event.preloadResponse;  if (preloadResponse) {  return preloadResponse;  }   return await fetch(event.request);  } catch (error) {  const cache = await caches.open(CACHE_NAME);  return await cache.match(FALLBACK_HTML_URL);  }  })());  } });  

Как я могу загрузить страницы, которые кэшируются в автономном режиме? А если кэш пуст для загрузки страницы offline.html в автономном режиме? А когда НЕ в автономном режиме загружать с сервера?