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

Question

[EryTi]

Зарегистрировал сервис-воркер- ошибок нет
приложение определяется браузером как 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

Answer 1

[Alex Step]

Этому сервсис-воркеру не передается управление обработкой запросов.
В общем в 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
      })
    })
  )
})

Comments

[EryTi]

Попробовал включить- не помогло event.waitUntil(self.clients.claim()),
а если добавить полный код, то появляется ошибка "caches is not defined"

[Alex Step]

EryTi, ну прям полный код добавлять не нужно, там у вас ещё __BUILD и __BASE вот эти переменные не установлены

[Alex Step]

можете добавить проверку
if ('caches' in self)

caches - доступен только в случае если сайт открыт по протоколу https
для локальной разработки без https можно как-то исключение добавить для домена в настройках хрома

chrome://flags/#unsafely-treat-insecure-origin-as-secure

[EryTi]

Alex Step, сайт на https, и даже настройка в хроме не помогла, по какой-то причине все равно выдает ошибку: "caches is not defined" в евенте "activate", "fetch" не выполняется

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

self.addEventListener('activate', async (event) => {
  console.log('----------activate', event);
  event.waitUntil(self.clients.claim());

  const cacheNames = await caches.keys();
  console.log('----------cacheNames', cacheNames);
});

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

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

[Alex Step]

EryTi, странно, я точно не знаю, ну попробуйте написать self.caches
Это точно хром ругается а не ваш сборщик / линтер?

[EryTi]

Alex Step, хм, теперь ошибка "Cannot read properties of undefined (reading 'keys')". Да, в хром.
Попробовал чистое pwa создать- там работает. Проблема в shopify значит, pwa поверх него стоит (мой косяк, тэг "shopify" в вопросе не прописался), пытаюсь понять причину ошибки, по туториалам все примерно идентично, что и с "чистым" сайтом, но кажется что не так давно они поставили ограничение на доступ к service worker