ServiceWorker не получает запросы на выборку

Я впервые устанавливаю сервис-воркер и следую инструкциям по адресу: https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

Мой сервисный работник ведет себя так, как ожидалось, при установке и обновлении, но запросы на выборку не запускаются должным образом.

var CACHE_NAME = 'test-cache-v1'
var urlsToCache = [
  '/',
  '/public/scripts/app.js'
]

self.addEventListener('install', function (event) {
  console.log('Installing new service worker', event)
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function (cache) {
        return cache.addAll(urlsToCache)
      })
      .catch(err => console.log('Error Caching', err))
)
})

self.addEventListener('fetch', function (event) {
  console.log('Fetch req', event)
  event.respondWith(
    caches.match(event.request)
      .then(function (response) {
        console.log('Cache hit', response)
        // Cache hit - return response
        if (response) {
          return response
        }
        return fetch(event.request)
        .catch(e => console.log('Error matching cache', e))
      }
    )
  )
})

Я вижу, что «Установка нового работника службы» выводится на консоль, когда ожидалось, но не «Выборка запроса». Я использую Chrome devtools и получил доступ к опции «Проверить» рядом с ServiceWorker на вкладке «Приложение».


person David Jay    schedule 20.02.2017    source источник


Ответы (2)


Будьте осторожны на динамических веб-сайтах!

Если сервис-воркер имеет область действия: example.com/weather/ У него нет области видимости: example.com/weather

Особенно на firebase, который по умолчанию удаляет косую черту

В этом случае сервис-воркер будет устанавливать, активировать и даже кэшировать файлы, но не будет получать события «выборки»! Очень трудно отлаживать.

Добавьте «trailingSlash»: true в firebase.json в разделе «хостинг». Это решит проблему. Обязательно измените перезапись из:

  {
    "source": "/weather", "function": "weather"
  }

To :

  {
    "source": "/weather/", "function": "weather"
  }

А также manifest.json

person Sam    schedule 28.05.2017
comment
Какая огневая база? О чем ты говоришь? - person Brian Cannard; 08.03.2018

Если вы прослушаете событие activate и добавите вызов clients.claim() внутри этого события, то ваш новый активный сервис-воркер получит контроль над существующими веб-страницами в своей области, включая страницу, на которой он зарегистрирован. Дополнительную информацию можно найти в этой статье о жизненный цикл работника службы. Достаточно следующего кода:

self.addEventListener('activate', () => self.clients.claim());

Если вы не вызовете clients.claim(), сервис-воркер активируется, но не будет контролировать ни одну из открытых в данный момент страниц. Пока вы не перейдете на следующую страницу в своей области (или не перезагрузите текущую страницу), сервисный работник возьмет на себя управление и начнет перехватывать сетевые запросы через свой обработчик fetch.

person Jeff Posnick    schedule 21.02.2017