JavaScript Notification — системні сповіщення браузера

Notification показує системне сповіщення — те, що виринає в кутку екрана поза вікном браузера.

правити

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

Показати його можна лише з дозволу користувача, і дозвіл питається явно — Notification.requestPermission().

І тут головне правило, яке порушує половина сайтів: не питай дозволу одразу після завантаження. Людина, яка щойно зайшла й ще нічого не побачила, натисне «Заблокувати» — а це рішення назавжди, повторно запитати браузер уже не дасть.

Питати треба тоді, коли користувач сам зробив дію, з якої видно, що сповіщення йому потрібні: підписався на тему, увімкнув нагадування.

Сповіщення з закритої вкладки (справжній push) показує вже ServiceWorker — сам по собі Notification живе, доки жива сторінка.

правити

Нотатка

Відмова незворотна: після «Заблокувати» повторний requestPermission() мовчки поверне denied, не показавши жодного вікна. Один невдалий запит — і сповіщення для цього користувача закриті назавжди.

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

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

Синтаксис

new Notification("Заголовок", { body: "Текст" });

методи

властивості

Переглядачі

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

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

Переглядач
Notification	22+	22+	16.4+	25+	14+	-

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

Переглядач
Notification	-	yes	yes	16.4+

Приклади

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

<button id="subscribe">Увімкнути нагадування</button>

const button = document.getElementById('subscribe');

button.addEventListener('click', async () => {
    // питаємо ТУТ — коли людина сама попросила
    const permission = await Notification.requestPermission();

    if (permission !== 'granted') {
        console.log('Користувач відмовив — більше не питаємо');
        return;
    }

    new Notification('Нагадування увімкнено', {
        body: 'Ми повідомимо про нові матеріали',
        icon: '/img/logo.svg',
        tag: 'subscribe', // однакові теґи не множаться
    });
});