Как ответить на событие выборки для навигации в сервисном работнике? - PullRequest
Новая
       5

Как ответить на событие выборки для навигации в сервисном работнике?

0 голосов
/ 01 апреля 2020

Я создал SPA (одностраничное приложение) с Create-React-App. Я добавил к нему работника сервиса, чтобы SPA мог загружаться, когда нет сетевого подключения. Работник службы успешно кэширует все ресурсы, но не отвечает на запросы при отсутствии сетевого подключения. Я перепробовал много вещей, но просто не мог заставить его обслуживать ресурсы, чтобы получить офлайн-возможности. Выдается следующее сообщение об ошибке:

Uncaught (в обещании) TypeError: Не удалось получить

Мой работник службы успешно регистрируется, а также успешно кэширует активы. Код сервисного работника: 

const thingsToCache = [
  'index.html',
  'static/js/1.cb2fedf5.chunk.js',
  'static/js/main.5e7fdc75.chunk.js',
  'static/js/runtime~main.229c360f.js',
  'static/css/main.ca6d346b.chunk.css',
  'static/media/roboto.18d44f79.ttf',
  'static/media/comfortaa.7d0400b7.ttf',
];

this.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll(thingsToCache);
    })
  );
});

this.addEventListener('fetch', event => {
  //respond to fetch requests here
  caches
    .match(event.request)
    .then(cachedRes => {
      if (cachedRes) {
        event.respondWith(cachedRes);
      } else {
        throw new Error('No match found in cache!');
      }
    })
    .catch(() => {
      return fetch(event.request);
    });
});

Если вам нужны активы, то вот ссылка:

https://github.com/Twaha-Rahman/pwa-problem-assets

Спасибо за все ваши помощь!

1 Ответ

0 голосов
/ 02 апреля 2020

В вашем прослушивателе событий fetch произошла ошибка. Вам нужно позвонить event.respondWith вместо event.waitUntil, и он должен быть на верхнем уровне. Ниже приведена слегка измененная версия. 

this.addEventListener('fetch', event => {
  event.respondWith(
    caches
      .match(event.request)
      .then(cachedRes => {
        if (cachedRes) {
          return cachedRes;
        } else {
          throw new Error('No match found in cache!');
        }
      })
      .catch(() => {
        return fetch(event.request);
      });
  )
});

Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

...