Strony na komórki

wszystko o stronach na komórki

Polecamy

Jak wdrożyć push notyfikacje na stronie mobilnej

stronynakomorki.pl8 mins

Push notyfikacje znacząco zwiększają zaangażowanie użytkowników mobilnych, dostarczając im natychmiastowe informacje bez konieczności ciągłego odwiedzania strony. Artykuł przedstawia kompleksowy przewodnik, który przeprowadzi cię przez proces wdrożenia push notyfikacji na stronie mobilnej, począwszy od zrozumienia kluczowych pojęć, przez konfigurację środowiska, aż po testowanie i optymalizację. W poszczególnych sekcjach znajdziesz praktyczne wskazówki oraz przykłady kodu, które pomogą ci stworzyć w pełni funkcjonalne rozwiązanie.

Co to są push notyfikacje i jak działają

Push notyfikacje to krótkie komunikaty wysyłane przez serwer bezpośrednio do urządzeń użytkowników. Dzięki wykorzystaniu mechanizmów przeglądarki mobilnej możliwe jest odbieranie ich nawet wtedy, gdy strona nie jest aktywna. Kluczowe komponenty tego procesu to:

  • Rejestracja użytkownika i uzyskanie uprawnień od przeglądarki
  • Service Worker – skrypt działający w tle, odpowiedzialny za odbiór komunikatów
  • Wysyłanie wiadomości z serwera do punktu dostępowego (endpoint)

Mechanizm opiera się na API Push i Notifications. Po przyznaniu zgody użytkownika przeglądarka generuje klucz publiczny i prywatny. Klucz publiczny służy do identyfikacji urządzenia, a prywatny do zabezpieczenia transmisji wiadomości. W momencie wysłania komunikatu serwer szyfruje zawartość przy użyciu tego klucza, a Service Worker odszyfrowuje i prezentuje powiadomienie użytkownikowi.

Przygotowanie środowiska i plików

Przed rozpoczęciem implementacji warto upewnić się, że masz gotowe następujące elementy:

  • Certyfikat SSL – bezpieczeństwo komunikacji wymaga protokołu HTTPS
  • Plik manifest.json z informacjami o aplikacji mobilnej
  • Dostęp do hostingu lub platformy z SSH/FTP, gdzie umieścisz pliki

Konfiguracja pliku manifest.json

W pliku manifest.json zdefiniuj podstawowe dane: nazwa aplikacji, ikonę, kolor paska przeglądarki oraz tryb wyświetlania. Przykładowa zawartość:

{
  "name": "Moja Aplikacja",
  "short_name": "App",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

Rejestracja Service Workera

Umieść plik service-worker.js w głównym katalogu strony mobilnej. W pliku tym definiujesz obsługę zdarzeń push i kliknięć powiadomień:

self.addEventListener('push', event => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: data.icon
  };
  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

W kodzie klienta zarejestruj Service Workera:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(reg => console.log('Service Worker zarejestrowany', reg))
    .catch(err => console.error('Błąd rejestracji', err));
}

Implementacja po stronie klienta

Teraz, gdy środowisko jest gotowe, przejdź do uzyskania zgody użytkownika na odbieranie powiadomień i wygenerowania klucza subskrypcji:

  • Sprawdź wsparcie dla API Push
  • Poproś o pozwolenie na powiadomienia
  • Utwórz subskrypcję za pomocą metody pushManager.subscribe()

Przykładowy kod zapytania o zgodę

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    subscribeUser();
  } else {
    console.warn('Użytkownik odrzucił powiadomienia');
  }
});

Subskrypcja użytkownika

function subscribeUser() {
  navigator.serviceWorker.ready.then(registration => {
    const vapidPublicKey = 'TWÓJ_PUBLICZNY_KLUCZ_VAPID';
    const convertedKey = urlBase64ToUint8Array(vapidPublicKey);
    registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: convertedKey
    }).then(subscription => {
      // Wyślij subscription na serwer
      fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(subscription)
      });
    });
  });
}

Funkcja urlBase64ToUint8Array konwertuje klucz VAPID z formatu Base64 na tablicę bajtów, co jest wymagane przez przeglądarkę. Po utworzeniu subskrypcji wyślij obiekt zawierający endpoint, klucze i inne metadane do serwera, aby móc później kierować do niego wiadomości.

Konfiguracja serwera i wysyłka powiadomień

Na serwerze przygotuj endpoint, który przyjmie dane subskrypcji i zapisze je w bazie. Do wysyłania powiadomień użyj biblioteki zgodnej z Web Push, np. web-push dla Node.js:

const webpush = require('web-push');
webpush.setVapidDetails(
  'mailto:kontakt@twojadomena.pl',
  publicVapidKey,
  privateVapidKey
);

Przykład wysyłki powiadomienia

const payload = JSON.stringify({
  title: 'Nowa wiadomość',
  body: 'Sprawdź najnowsze aktualności!',
  icon: '/icons/notification.png'
});

webpush.sendNotification(subscription, payload)
  .then(() => console.log('Powiadomienie wysłane'))
  .catch(err => console.error('Błąd wysyłki', err));

Zadbaj o odpowiednie przechowywanie kluczy VAPID oraz obsługę błędów. Jeśli przeglądarka zwróci błąd 410 (Gone), usuń nieaktualną subskrypcję z bazy danych.

Testowanie, debugowanie i optymalizacja

Przed uruchomieniem rozwiązania w środowisku produkcyjnym przetestuj działanie na różnych urządzeniach i przeglądarkach. Zwróć uwagę na:

  • Czas dostarczenia powiadomienia
  • Wyświetlanie ikony i tytułu
  • Odpowiednie reakcje po kliknięciu

W konsoli debugera przeglądarki mobilnej sprawdź zakładki Application > Service Workers oraz Push Manager. Upewnij się, że pliki są aktualizowane przy deploymencie i że użytkownicy otrzymują najnowsze wersje skryptów. Warto również monitorować metryki skuteczności kampanii push: wskaźnik otwarć, kliknięć i konwersji.

Podkreślony aspekt: stosowanie segmentacji użytkowników, aby wysyłać spersonalizowane treści, zwiększy zaangażowanie i poprawi odbiór kampanii.

Powiązane treści