@EryTi

Почему может не работать self.addEventListener('fetch', function(e) { }) в PWA?

Зарегистрировал сервис-воркер- ошибок нет
приложение определяется браузером как PWA и успешно скачивается.

в консоле вывелось " console.log('--------install', event);" и "console.log('----------activate', event);", а слушатель события "fetch" не отрабатывает ни при каких условиях.
Не могу понять как заставить его работать в оффлайн режиме. В чем моя ошибка?

файл сервис-воркета
self.addEventListener('install', (event) => {
  console.log('--------install', event);
});

self.addEventListener('activate', (event) => {
  console.log('----------activate', event);
});

self.addEventListener('message', (event) => {
  console.log('----------message', event);
});

self.addEventListener('fetch', (event) => {
  console.log('----------fetch', event);
  event.respondWith(
    fetch(event.request).catch(() => {
      return caches.match(event.request);
    }),
  );
});

*использую Shopify
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
kellas
@kellas
веб-разработчик
Этому сервсис-воркеру не передается управление обработкой запросов.
В общем в activate нужно вызывать self.clients.claim()
Вот так например:
self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim())
})

после этого событие fetch начнет отлавливаться

вот такой же вопрос: https://stackoverflow.com/questions/70331036/why-s...

вот пример кэширования в сервис-воркере
/*
 * Caching
 */
const CACHE_NAME = 'v_17_' + __BUILD_TIME__
const precacheResources = [__BASE_PATH__, __BASE_PATH__ + '/']

self.addEventListener('install', event => {
  event.waitUntil((async () => {
    const cache = await caches.open(CACHE_NAME)
    await cache.addAll(precacheResources)
    self.skipWaiting()
  })())
})

self.addEventListener('activate', async event => {
  event.waitUntil(self.clients.claim())
  self.registration.unregister()

  // remove old cache from old versions of service worker
  const cacheNames = await caches.keys()
  await Promise.all(cacheNames.map(async cacheName => {
    if (cacheName !== CACHE_NAME) await caches.delete(cacheName)
  }))
})

self.addEventListener('fetch', async event => {
  event.respondWith(
    caches.match(event.request).then(cachedResponse => {
      if (cachedResponse) return cachedResponse

      return fetch(event.request).then(async response => {
        if (event.request.method === 'GET' && event.request.url.startsWith('http') &&
        !event.request.url.includes('/api/')) {
          const cache = await caches.open(CACHE_NAME)
          await cache.put(event.request, response.clone())
        }
        return response
      })
    })
  )
})
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы