JavaScript ServiceWorker.postMessage() — зв'язок зі сторінкою

Метод postMessage() надсилає повідомлення сервісному робітнику зі сторінки.

правити

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

Робітник живе окремо й доступу до сторінки не має — спілкування можливе лише повідомленнями.

Типові команди: «скинь кеш», «оновись зараз», «завантаж це наперед».

Щоб робітник міг відповісти, є два шляхи. Простіший — MessageChannel: створюєш канал, віддаєш робітнику один його кінець, слухаєш другий. Робітник може й сам звернутись до всіх відкритих вкладок через clients.matchAll().

Найчастіший практичний випадок — команда skipWaiting: новий робітник за замовчуванням чекає, доки закриються всі вкладки, а ця команда каже йому активуватись негайно.

правити

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

Переглядачі

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

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

Переглядач
postMessage	45+	44+	11.1+	32+	17+	-

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

Переглядач
postMessage	45+	yes	yes	11.3+

Приклади

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

// top-level await працює лише в модулях — тут той самий код в async-функції
(async () => {
    // --- сторінка ---
    const registration = await navigator.serviceWorker.ready;

    // новий робітник, оновись негайно
    registration.waiting?.postMessage({ type: 'SKIP_WAITING' });

    // із відповіддю — через канал
    const channel = new MessageChannel();

    channel.port1.onmessage = event => {
        console.log('Робітник відповів:', event.data);
    };

    registration.active.postMessage({ type: 'GET_VERSION' }, [channel.port2]);

    // --- усередині sw.js ---
    // self.addEventListener('message', event => {
    //     if (event.data.type === 'SKIP_WAITING') {
    //         self.skipWaiting();
    //     }
    //
    //     event.ports[0]?.postMessage({ version: 'v1' });
    // });
})();