Поймать запрос в сервисном работнике и ответить с другим URL изображения - PullRequest
Новая
       25

Поймать запрос в сервисном работнике и ответить с другим URL изображения

2 голосов
/ 05 марта 2020

У меня есть эта функция извлечения в моем сервисном работнике, и я пытаюсь ответить другим изображением, когда pwa находится в автономном режиме. Функция извлечения внутри броска броска: Uncaught (в обещании) TypeError: Не удалось получить. 

self.addEventListener('fetch', (e) => {
  if (e.request.method === 'GET') {
    e.respondWith(
      caches.match(e.request).then((cachedResponse) => {
        return cachedResponse || fetch(e.request.url)
          .then((res) => {
            return res;
          }).catch(() => {
             //if it is a image then
            let url1 = e.request.url.replace(".jpg", "_mini.jpg");
            return fetch(url1);
            /* Or like this
            caches.match(url1).then((cResp) => {
            return cResp;
            })
           */
          })

      })
    )
  }
});

Возможно ли перехватить ошибку, когда вы не в сети, и ответить «мини» альтернативным изображением или что я делаю не так?

1 Ответ

1 голос
/ 05 марта 2020

Вы возвращаете cachedResponse, если он существует, что предотвращает доступ к вашему логину замены c. Попробуйте удалить cachedResponse ||.

Это также можно удалить: 

.then((res) => {
    return res;
})

Кроме того, если вы в автономном режиме, return fetch(url1); не будет работать, поскольку fetch из Сервисный работник не вызовет другой FetchEvent рекурсивно. Таким образом, вместо этого вы должны return caches.match(url1), подразумевая, что он был кэширован ранее.

...