JavaScript ServiceWorker.state — стан сервісного робітника

Властивість state показує стан сервісного робітника в його життєвому циклі.

правити

Загальний опис

Стани йдуть по черзі: installing (встановлюється) → installed/waiting (чекає) → activating → activated (працює) → redundant (замінений або зламаний).

І саме waiting пояснює найзагадковішу поведінку сервісних робітників: «я оновив код, а в браузері старий».

Причина в тому, що новий робітник не заміняє старого одразу. Він чекає, доки закриються всі вкладки сайту — щоб дві версії не працювали водночас. А просте перезавантаження вкладку не закриває, тож чекати можна вічно.

Обійти це можна викликом skipWaiting() усередині робітника — але тоді сторінка, відкрита зі старою версією, раптом почне спілкуватись із новою.

правити

Порада

«Оновив, а нічого не змінилось» — подивись на state. Якщо там waiting, новий робітник живий і чекає, доки закриються всі вкладки сайту.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	40	44	11.1	27	17	—

Підтримка: мобільні переглядачі

Переглядач
	40	40	44	11.3

Приклади

+ запропонувати свій приклад у пісочниці

(async () => {
    if (!('serviceWorker' in navigator)) {
        console.log('Service Worker недоступний у цьому середовищі');
        return;
    }

    try {
        const registration = await navigator.serviceWorker.register('/sw.js');

        registration.addEventListener('updatefound', () => {
            const fresh = registration.installing;

            fresh.addEventListener('statechange', () => {
                console.log('Стан:', fresh.state);

                // новий уже готовий, але чекає закриття старих вкладок
                if (fresh.state === 'installed' && navigator.serviceWorker.controller) {
                    console.log('Доступна нова версія — перезавантаж сторінку');
                }
            });
        });
    } catch (error) {
        console.log('Реєстрація не вдалася:', error.message);
    }
})();