Смешанная стратегия кэширования в PWA

Question

некоторые из URL в моем PWA должны быть сначала сетевыми, а все остальные должны сначала кэшироваться.

Для сети сначала я хочу добиться этого:

• в случае успеха возвращать сетевой ответ и обновлять кеш Dynami c последней версией запроса
• , если сетевой запрос не выполняется, найти совпадение в кеше Dynami c и вернуть его, если он существует, а если нет, вернуть stati c резервный файл

Для первого кэша:

• Найдите совпадение в динамическом c кэше, если оно существует, верните кэшированное значение и обновите кэшированное значение в следующий раз

• Если кеш динамического c не имеет значения, попробуйте получить ответ из сети (с выборкой), если он удастся, верните ответ сети и обновите динамический c кэш для следующего раза, иначе верните stati c резервный файл

Вот что я сделал до сих пор (код работника службы):

self.addEventListener('fetch', function(event) {
   const url = new URL(event.request.clone().url);
   if (event.request.clone().method === 'POST') {
        // handle post requests
   } else { // handle GET requests
        // network first urls
        if (url.pathname.indexOf("news") > -1 || url.pathname.indexOf("/photos/") > -1) {
          console.log('test'); // this gets logged
          event.respondWith(networkFirst(event));
      } else { 
          event.respondWith(cacheFirst(event));
      }
   }


function networkFirst(event) {
    console.log( 'respond with network first' ); // I can see this
    // Try the network
    return fetch(event.request) // return was edited in
      .then(function(res) {
        return caches.open('CACHE')
          .then(function(cache) {
            // Put in cache if succeeds
            console.log( 'NETWORK RESPONSE' ); // visible
            console.log( res.clone() ); // Response {type: "basic", url: "https://mysite/news", redirected: false, status: 200, ok: true, …}
            cache.put(event.request.url, res.clone());
            return res;
          })
      })
      .catch(function(err) {
          // Fallback to cache
          return caches.match(event.request).then(function(res){
              if (res === undefined) { 
                  return caches.open('STATIC_CACHE')
                     .then((cache) => {
                         return caches.match('/offline.html');
                  });
              } 
              return res;
          })
      })   
}

function cacheFirst(event) {
    return caches.open('eyewit') // return was edited in
      .then(function(cache) {

       return cache.match(event.request)
       .then(function(response) {
         var fetchPromise = fetch(event.request).then(function(networkResponse) {

            cache.put(event.request, networkResponse.clone());
            return networkResponse;
          }).catch(function () {
              return caches.open('STATIC_CACHE')
                 .then((cache) => {
                     return caches.match('/offline.html');
              });
          });

        // response contains cached data, if available
        return response || fetchPromise;
      })
    })
}

Когда я пробую любой URL, например: mypage / news, я получаю:

Этот сайт недоступен

И

В результате FetchEvent для "https://mypage/news" возникла сеть ответ об ошибке: объект, который не был Ответом, был передан в responseWith ().

Редактировать:

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

Любая помощь будет оценена.