Frontend Academy · Lekcja

Powiadomienia push

Poprosi Pan/Pani o zgodę, zasubskrybuje powiadomienia push za pomocą Push API, odbierze wiadomości w Service Workerze i wyświetli powiadomienia za pomocą showNotification.

Powiadomienia push to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Dlaczego powiadomienia push?

Powiadomienia push ponownie angażują użytkowników, gdy aplikacja nie jest otwarta — służą do alertów o wiadomościach, aktualizacji wiadomości i przypomnień o porzuconym koszyku. Obsługuje je Service Worker, dlatego działają nawet po zamknięciu strony.

Push API + Notifications API

Dwa interfejsy API przeglądarki współpracują ze sobą. Push API odbiera wiadomości z serwera za pośrednictwem subskrypcji push. Notifications API wyświetla wiadomość użytkownikowi.

Żądanie zgody

Przed zasubskrybowaniem należy poprosić użytkownika o zgodę — trzeba to robić wyłącznie w odpowiedzi na jednoznaczne działanie użytkownika (kliknięcie przycisku), a nie podczas ładowania strony.

async function enableNotifications() {
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    alert('Notifications denied');
    return;
  }
  // proceed to subscribe...
}

Subskrypcja push

Należy zasubskrybować usługę za pośrednictwem aktywnej rejestracji service workera. Publiczny klucz VAPID serwera uwierzytelnia subskrypcję.

async function subscribeToPush() {
  const reg = await navigator.serviceWorker.ready;
  const sub = await reg.pushManager.subscribe({
    userVisibleOnly: true, // required: every push must show a notification
    applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
  });
  // Send sub to your server:
  await fetch('/api/save-subscription', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(sub)
  });
}

Klucze VAPID

Klucze VAPID (Voluntary Application Server Identification) identyfikują serwer w usługach push (FCM, Mozilla itd.). Należy wygenerować je raz i przechowywać klucz prywatny na serwerze.

# Generate VAPID keys with web-push CLI:
npx web-push generate-vapid-keys

# Output:
# Public Key: BJ...
# Private Key: ka...

Push po stronie serwera

Należy użyć biblioteki npm web-push, aby wysłać powiadomienie push do zapisanej subskrypcji.

import webpush from 'web-push';

webpush.setVapidDetails(
  'mailto:you@example.com',
  process.env.VAPID_PUBLIC,
  process.env.VAPID_PRIVATE
);

await webpush.sendNotification(savedSubscription, JSON.stringify({
  title: 'New message',
  body: 'Alice sent you a message',
  url: '/inbox/123'
}));

Obsługa push w Service Workerze

SW odbiera zdarzenie push i wyświetla powiadomienie.

// sw.js
self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : {};
  event.waitUntil(
    self.registration.showNotification(data.title || 'Notification', {
      body: data.body,
      icon: '/icons/192.png',
      badge: '/icons/badge.png',
      data: { url: data.url }
    })
  );
});

Procedura obsługi kliknięcia powiadomienia

Po kliknięciu powiadomienia należy otworzyć aplikację lub przenieść ją na pierwszy plan.

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const url = event.notification.data.url || '/';
  event.waitUntil(
    clients.matchAll({ type: 'window' }).then(clientList => {
      for (const client of clientList) {
        if (client.url.endsWith(url) && 'focus' in client) return client.focus();
      }
      return clients.openWindow(url);
    })
  );
});

Opcje powiadomień

Można dostosować: icon, badge (mała ikona w obszarze powiadomień), image (duży obraz), actions (przyciski), tag (zastępuje starsze powiadomienia z tym samym tagiem), requireInteraction (pozostaje do momentu zamknięcia), silent.

self.registration.showNotification('Message', {
  body: 'Alice sent you a photo',
  icon: '/icons/192.png',
  image: '/images/alice-photo.jpg',
  actions: [
    { action: 'view', title: 'View' },
    { action: 'reply', title: 'Reply' }
  ],
  tag: 'message-from-alice', // replaces earlier 'message-from-alice'
  requireInteraction: false
});

Anulowanie subskrypcji

Należy umożliwić użytkownikom rezygnację — wywołać pushSubscription.unsubscribe() i usunąć subskrypcję z serwera.

async function disablePush() {
  const reg = await navigator.serviceWorker.ready;
  const sub = await reg.pushManager.getSubscription();
  if (sub) {
    await sub.unsubscribe();
    await fetch('/api/delete-subscription', {
      method: 'POST',
      body: JSON.stringify({ endpoint: sub.endpoint })
    });
  }
}

Obsługa w iOS

iOS 16.4+ obsługuje Web Push, ale tylko w przypadku PWA zainstalowanych na ekranie głównym. Urządzenia ze starszymi wersjami niż iOS 16.4 oraz Safari na iPhonie nie obsługują web push w ogóle.

Najlepsze praktyki

1) O zgodę należy prosić dopiero po jednoznacznym działaniu użytkownika. 2) Należy wysyłać wartościowe i niezbyt częste powiadomienia. 3) Po każdym zdarzeniu push zawsze należy wyświetlić powiadomienie (w przeciwnym razie przeglądarki mogą odebrać uprawnienia). 4) Należy zapewnić łatwą możliwość anulowania subskrypcji. 5) Należy testować wszystkie 3 usługi push (FCM, Mozilla, WindowsPush).

Typowe problemy

Push kończy się niepowodzeniem bez wyraźnego komunikatu, jeśli: userVisibleOnly ma wartość false (Chrome wymaga true), klucze VAPID się nie zgadzają, subskrypcja wygasła (należy zasubskrybować ponownie) lub po zdarzeniu push nie wyświetlono powiadomienia (przeglądarka je odbiera).

Szybkie sprawdzenie

Dlaczego każda wiadomość push musi skutkować widocznym powiadomieniem (z wartością userVisibleOnly: true)?

Podsumowanie: powiadomienia push

O zgodę należy prosić wyłącznie po działaniu użytkownika. Należy zasubskrybować usługę za pomocą reg.pushManager.subscribe z publicznym kluczem VAPID. Serwer korzysta z biblioteki web-push do wysyłania wiadomości. Zdarzenie push SW wywołuje showNotification. notificationclick otwiera aplikację lub przenosi ją na pierwszy plan. Można dostosować icon, badge, image, actions i tag. Zawsze należy wyświetlać powiadomienie (wymagana jest wartość userVisibleOnly: true). iOS 16.4+ obsługuje tę funkcję, ale tylko w PWA zainstalowanych na ekranie głównym.

Często zadawane pytania

Czy lekcja „Powiadomienia push” jest bezpłatna?

Tak — pełny tekst „Powiadomienia push” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Powiadomienia push”?

Poprosi Pan/Pani o zgodę, zasubskrybuje powiadomienia push za pomocą Push API, odbierze wiadomości w Service Workerze i wyświetli powiadomienia za pomocą showNotification. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Powiadomienia push”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy