Ответьте всегда с помощью index.html

Question

Приложение React (обычно) использует одинаковые index.html для всех URL-адресов, и на это отвечает мой сервер.

Однако первый запрос никогда неexample.com/index.html, это, например, example.com/, example.com/posts, example.com/post/123, example.com/contact и так далее ..

Если я включаю в автономном режиме от Chrome DevTools, я просто получить не по умолчанию Нет страницы подключения ,

Как всегда реагировать index.html из кеша?

---

Соответствующий код:

self.addEventListener('install', function(e) { 
    self.skipWaiting() 

    e.waitUntil(
     caches.open('v1').then(function(cache) { 
      return cache.addAll([ 
       'index.html', 
       'main.js', 
       'main.css' 
      ]) 
     }) 
    ) 
}) 

self.addEventListener('fetch', function(e) { 
    e.respondWith(
     caches.match(e.request).then(function(match) { 
      // If no match in cache, send request 
      return match || fetch(e.request) 
     }) 
    ) 
}) 

---

Im используя localhost, но я не мог найти какую-либо информацию, что это имеет значение, когда речь заходит об этой проблеме.

Answer 1

Это потому, что вы явно пытаетесь открыть только кеш-хиты из кеша (caches.match(e.request).then ... в вашем слушателе fetch). Таким образом, он будет соответствовать только URL-адресам, которые вы вручную добавили в кэш.

Чтобы ответить на все запросы с заранее кэшировать значения, вы должны были бы явно ищет index.html записи кэша, что-то вроде этого:

self.addEventListener('fetch', function(e) { 
    var indexRequest = new Request('/index.html'); 

    // route index.html-based URLs to the specific cache directly 
    if (shouldRespondWithIndex(e.request.url)) { 
     e.respondWith(caches.match(indexRequest)) 
    } else { 
     // other URLs may go through the standard "look for exact match 
     // in the cache with network fallback" route 
     e.respondWith(
      caches.match(e.request).then(function(match) { 
       // If no match in cache, send request 
       return match || fetch(e.request) 
      })) 
    } 
}) 

Обратите внимание, что ваша shouldRespondWithIndex реализация должна возвращать false для всех не - запросы документов, то есть изображения, таблицы стилей и т. д., в противном случае Service Worker заменит его также index.html.

Answer 2

Вы должны изменить эту часть кода:

caches.match(e.request).then(function(match) { 
    // If no match in cache, send request 
    return match || fetch(e.request) 
}) 

Для возврата index.html с учетом условий, которые вы хотите. Вы можете найти больше в документации к кешу.

https://developer.mozilla.org/en-US/docs/Web/API/Cache

Чтобы ответить посетителю и избежать этого автономного экрана, часть, которую вы должны решить, как обращаться в том, как проверить event.request, чтобы увидеть, если возвращение index.html хорошо, в противном случае он может вернуться что даже если вы этого не хотите. Вы должны использовать event.respondWith, вручную открыть кеш, найти нужный элемент кэша и вернуть его. Поэтому вместо поиска соответствия event.request найдите соответствие index.html следующим образом:

event.respondWith(

    // Opens Cache objects that start with 'font'. 
    caches.open(CURRENT_CACHES['font']).then(function(cache) { 
     return cache.match('/index.html').then(function(response) { 
     if (response) { 
      console.log(' Found response in cache:', response); 

      return response; 
     } 
     }).catch(function(error) { 

     // Handles exceptions that arise from match() or fetch(). 
     console.error(' Error in fetch handler:', error); 

     throw error; 
     }); 
    }) 
);