Как загрузить статическую страницу в PWA, если ее нет в динамическом кеше

Мой PWA использует стратегию кэширования в первую очередь в Интернете.

Если запрос успешен, он сохраняется в динамическом кеше с URL-адресом в качестве ключа.

Если запрос не выполняется, сервисный работник проверяет, хранится ли этот запрос в динамическом кеше, и возвращает его.

Эта часть работает нормально, я могу посещать все страницы, которые я посещал в Интернете, когда я не в сети, проблема в том, что я хотел бы вернуть статическую html-страницу с кнопкой, которая ведет на домашнюю страницу, когда у меня ничего нет в динамическом кеше .

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

Мой код сервисного работника:

event.respondWith(
     fetch(event.request)
          .then(function(res) {
              return caches.open('eyewit')
            .then(function(cache) {
              // console.log( 'Goes to cache: '  + event.request.url );
              // console.log( 'DYNAMIC' );
              let url = event.request.url;

              // dont cache maps
              if (url.indexOf('google') == -1) {
                  // store request to dynamic cache
                  cache.put(url, res.clone());
              } 
              return res;
            })
   })
  .catch(function(err) {
    // look for value in cache if request fails
    console.log( 'From cache' );
    // I would like to return static page ./offline.html if there is nothing in cache
    // with key event.request, if value exist return it instead
    // caches.match returns promise
    return caches.match(event.request);
  })
);

Я пробовал это сделать, но это не сработало, потому что caches.match (event.request) возвращает обещание:

.catch(function(err) {
     // return value from dynamic cache if exists
     if(caches.match(event.request)) {
          return caches.match(event.request);
     } else {
         // serve static page
         return caches.open('static_cache')
          .then((cache) => {
            return cache.match('offline.html');
          });
     }

javascript progressive-web-apps service-worker
person failedCoder    schedule 18.11.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если caches.match возвращает обещание, вам нужно дождаться ответа

.catch(function(err) {
     // return value from dynamic cache if exists
     return caches.match(event.request).then(function(result) {
          // If no match, result will be undefined
          if (result) {
               return result;
          } else {
               return caches.open('static_cache')
                 .then((cache) => {
                     return cache.match('offline.html');
               });
          }
     });
person diffidentDude    schedule 19.11.2019