Долгое время ожидания Запрос работнику службы

Я заметил, что время, ожидающее, что работники службы ответят на элементы из кеша, не так быстро, как вы ожидали. Я видел одно и то же время ожидания как с sw-precache и с обычным письменным сотрудником службы.

Каковы возможные причины этого времени ожидания и как я могу его уменьшить?

Событие "Моя fetch для персонализированного сервисного работника выглядит так:

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {
                return response;
            }
            return fetch(event.request);
        })
    );
});

Ответ 1

У вас есть обновление "Обновить при перезагрузке" в Chrome Dev Tools на вкладке "Приложение → Сервис"?

Если это так, я думаю, что это может быть проблемой, поскольку он будет перезапускать весь ваш код Service Worker, который может быть довольно много кода при использовании sw-precache при каждой перезагрузке.

Ответ 2

Событие, хотя я не могу ответить на возможные причины этого странного времени ожидания, я знаю, как его уменьшить.

Мы можем перехватить событие выборки в сервисном работнике с event.respondWith(). Каким-то образом, в моем случае, когда моя страница должна загружать javascript поставщика через тег скрипта с моими работниками по умолчанию, чтобы перехватывать каждое событие выборки, чтобы выполнить кеш-затем-сеть (для активов) или только для сети (для извлечения данных), как это:

if (shouldLoadOfflinePage) {
    fetchEvent.respondWith(cacheManager.fromCache(new Request(offlinePage)));
} else if (shouldFromCache) {
    fetchEvent.respondWith(cacheManager.fromCache(fetchEvent.request));
} else {
    fetchEvent.respondWith(fetch(fetchEvent.request));
}

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

длинный запрос на время ожидания serviceworker: ~ 400 мс

Поэтому я решил не перехватывать ненужный перехват fetch (конечно, удалив последний блок):

if (shouldLoadOfflinePage) {
    fetchEvent.respondWith(cacheManager.fromCache(new Request(offlinePage)));
} else if (shouldFromCache) {
    fetchEvent.respondWith(cacheManager.fromCache(fetchEvent.request));
}

Тогда моя страница нуждается только в 16ms для загрузки вышеупомянутого файла.

Надеюсь, это поможет

Ответ 3

очистка indexedDB поможет сократить время, затрачиваемое на "Запрос работнику службы". Вы можете удалить его с помощью js:

indexedDB.deleteDatabase(location.host);

или сделать это вручную:

/Пользователи/[USERNAME]/Library/Поддержка приложений /Google/Chrome/Default/IndexedDB/