Используйте Service Worker для перехвата запросов при первой загрузке моего сайта?

Question

TL; DR - Я хочу, чтобы мой сервисный работник активировался сразу после первого посещения моего сайта, а не после первого обновления.

Детали:

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

Есть ли что-нибудь, что я могу сделать, чтобы сервисный работник немедленно начал перехватывать запросы после его установки?

Answer 1

Вы можете использовать комбинацию из skipWaiting и clients.claim, как показано ниже.

Это приведет к тому, что рабочий-сервис немедленно возьмет под контроль сетевые запросы со страницы.

self.addEventListener('install', event => { 
    // Bypass the waiting lifecycle stage, 
    // just in case there's an older version of this SW registration. 
    event.waitUntil(self.skipWaiting()); 
}); 

self.addEventListener('activate', event => { 
    // Take control of all pages under this SW's scope immediately, 
    // instead of waiting for reload/navigation. 
    event.waitUntil(self.clients.claim()); 
});