Powiadomienia push są teraz obsługiwane w różnych przeglądarkach

Dostarczaj użytkownikom aktualne i przydatne powiadomienia.

Thomas Steiner

Powiadomienia push zostały ujednolicone w 2016 roku wraz z wydaniem interfejsów Push API i Notification API, które są częścią grupy roboczej W3C ds. aplikacji internetowych. Te interfejsy API zapewniają deweloperom stron internetowych niezbędne funkcje do wdrażania powiadomień push w aplikacjach internetowych oraz do odbierania i odpowiadania na powiadomienia w przeglądarkach internetowych. Powiadomienia push to powiadomienia wysyłane do przeglądarki użytkownika z witryny lub aplikacji, któremu użytkownik wcześniej udzielił zgody na wysyłanie powiadomień. Te wiadomości mogą służyć do powiadamiania użytkownika o nowych treściach lub aktualizacjach, przypominania o nadchodzących wydarzeniach lub terminach oraz przekazywania innych ważnych informacji. Komunikaty push mogą być szczególnie przydatne w aplikacjach, które muszą na bieżąco dostarczać użytkownikom istotne informacje, takie jak aplikacje z wiadomościami lub sportem, albo w przypadku witryn e-commerce, które chcą wysyłać użytkownikom powiadomienia o ofertach specjalnych lub wyprzedażach.

Aby zarejestrować się w celu otrzymywania powiadomień push, najpierw sprawdź, czy Twoja przeglądarka je obsługuje. Aby to zrobić, sprawdź, czy obiekty serviceWorker i PushManager znajdują się w obiektach navigator i window.

Jeśli powiadomienia push są obsługiwane, użyj słów kluczowych async i await, aby zarejestrować service workera i zasubskrybować powiadomienia push. Oto przykład, jak to zrobić za pomocą kodu JavaScript:

// Check if the browser supports push notifications.
if ("serviceWorker" in navigator && "PushManager" in window) {
  try {
    // Register the service worker.
    const swReg = await navigator.serviceWorker.register("/sw.js");

    // Subscribe for push notifications.
    const pushSubscription = await swReg.pushManager.subscribe({
      userVisibleOnly: true
    });

    // Save the push subscription to the database.
    savePushSubscription(pushSubscription);
  } catch (error) {
    // Handle errors.
    console.error("Error subscribing for push notifications.", error);
  }
} else {
  // Push notifications are not supported by the browser.
  console.error("Push notifications are not supported by the browser.");
}

Więcej informacji

• Omówienie powiadomień push
• Push API
• Wiadomości push w przeglądarce na iOS i iPadOS