Ćwiczenia z programowania: tworzenie klienta powiadomień push

Kate Jeffreys

Kayce Basques

Aby wykonać to ćwiczenia z programowania, otwórz tę zakłócenie w drugiej karcie.

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak krok po kroku utworzyć klienta powiadomień push. Po zakończeniu ćwiczeń w Codelabs będziesz mieć klienta, który:

• Subskrybuje użytkownika, aby otrzymywać powiadomienia push.
• Odbiera wiadomości push i wyświetla je jako powiadomienia.
• Anuluje subskrypcję powiadomień push użytkownika.

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak uczyć się, robiąc to mniej i nie mówiąc o pojęciach. Więcej informacji o pojęciach związanych z powiadomieniami push znajdziesz w artykule Jak działają powiadomienia push?.

Kod serwera tego ćwiczenia z programowania jest już gotowy. W ramach tego ćwiczenia z programowania wdrożysz klienta tylko. Więcej informacji o implementowaniu serwera powiadomień push znajdziesz w lekcji Codelab: Tworzenie serwera powiadomień push.

Pełny kod znajdziesz na stronie push-notifications-client-codelab-complete (źródło).

Zgodność z przeglądarką

Ćwiczenia z programowania działają w następujących kombinacjach systemów operacyjnych i przeglądarek:

• Windows: Chrome, Edge
• macOS: Chrome, Firefox
• Android: Chrome, Firefox

Wiemy, że te ćwiczenia w Codelabs nie działają w tych systemach operacyjnych (ani ich kombinacjach) i systemów operacyjnych oraz przeglądarek:

• macOS: Brave, Edge, Safari
• iOS

Konfiguracja

Pobierz kopię kodu do edycji

W trakcie tego ćwiczenia edytor kodu widoczny po prawej stronie tych instrukcji będzie nazywany interfejsem błędu.

1. Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.

Jeśli korzystasz z trybu incognito lub gościa w Chrome, możesz mieć problem z ukończeniem ćwiczeń z programowania. Rozważ użycie profilu zalogowanego do logowania.

Konfigurowanie uwierzytelniania

Aby otrzymywać powiadomienia push, musisz skonfigurować klucze uwierzytelniające na serwerze i kliencie. Więcej informacji znajdziesz w artykule o podpisywaniu żądań protokołu Web push.

1. W interfejsie usługi Glitch kliknij Narzędzia, a następnie Terminal, aby otworzyć terminal zakłócenia.
2. W terminalu Glitch uruchom polecenie npx web-push generate-vapid-keys. Skopiuj klucz prywatny i klucz publiczny.
3. W interfejsie błędu otwórz plik .env i zaktualizuj VAPID_PUBLIC_KEY oraz VAPID_PRIVATE_KEY. Ustaw VAPID_SUBJECT na mailto:[e-mail]. Wszystkie te wartości musisz umieścić w cudzysłowie. Po wprowadzeniu zmian plik .env powinien wyglądać podobnie do tego:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:[e-mail]"

1. Zamknij terminal z błędami.

Wartości zmiennych środowiskowych (elementy w pliku .env) są unikalne w ramach pojedynczego projektu Glitch. Jeśli zremiksujesz projekt, wartości z pliku .env nie zostaną skopiowane.

1. Otwórz pokój public/index.js.
2. Zastąp VAPID_PUBLIC_KEY_VALUE_HERE wartością swojego klucza publicznego.

Rejestrowanie skryptu service worker

Klient będzie potrzebować skryptu service worker do odbierania i wyświetlania powiadomień. Najlepiej jak najszybciej zarejestrować skrypt service worker. Więcej informacji znajdziesz w sekcji Odbieranie i wyświetlanie przekazanych wiadomości jako powiadomień.

1. Zastąp komentarz // TODO add startup logic here tym kodem:

// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);

1. Aby wyświetlić podgląd witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran .

Kluczowy termin: w trakcie tego ćwiczenia z programowania otwarta przed chwilą karta będzie nazywana kartą aplikacji.

1. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
2. Kliknij kartę Konsola. Powinien wyświetlić się komunikat Service worker was registered. zapisany w konsoli.

Uwaga: w poprzedniej instrukcji zakładamy, że używasz Google Chrome i Narzędzi deweloperskich w Chrome.

Prośba o zgodę na wyświetlanie powiadomień push

Nigdy nie proś o zgodę na wysyłanie powiadomień push podczas wczytywania strony. Zamiast tego interfejs powinien pytać użytkownika, czy chce otrzymywać powiadomienia push. Gdy wyrażą zgodę na wyświetlanie powiadomień (np. kliknięcie przycisku), możesz rozpocząć formalny proces uzyskiwania zgody na powiadomienia push z przeglądarki.

1. W interfejsie błędu kliknij Wyświetl źródło, aby wrócić do kodu.
2. W public/index.js zastąp komentarz // TODO w pliku subscribeButtonHandler() tym kodem:

// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}

1. Wróć do karty aplikacji i kliknij Subskrybuj do push. Przeglądarka lub system operacyjny prawdopodobnie zapyta, czy chcesz zezwolić stronie na wysyłanie powiadomień push. Kliknij Zezwalaj (lub inne wyrażenie używane w przeglądarce lub systemie operacyjnym). W konsoli powinien pojawić się komunikat z informacją, czy prośba została zaakceptowana czy odrzucona.

Jeśli korzystasz z trybu incognito lub gościa, przeglądarka może automatycznie odrzucić żądanie. Zwróć uwagę na interfejs przeglądarki, który wskazuje, że żądanie zostało automatycznie zablokowane.

Subskrybowanie powiadomień push

Proces subskrypcji polega na interakcji z usługą push, która jest kontrolowana przez dostawcę przeglądarki. Gdy otrzymasz informacje o subskrypcji powiadomień push, musisz je wysłać na serwer, a następnie umożliwić mu przechowywanie ich w bazie danych przez długi czas. Więcej informacji o procesie subskrypcji znajdziesz w artykule Subskrybowanie powiadomień push klienta.

1. Dodaj do subscribeButtonHandler() ten wyróżniony kod:

subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

Opcja userVisibleOnly musi mieć wartość true. Może się zdarzyć, że pewnego dnia będzie można wysyłać wiadomości push bez wyświetlania powiadomień widocznych dla użytkowników (cichych powiadomień push), ale obecnie przeglądarki nie zezwalają na to ze względu na kwestie dotyczące prywatności.

Wartość applicationServerKey korzysta z funkcji użytkowej, która konwertuje ciąg base64 na format Uint8tablica. Ta wartość służy do uwierzytelniania między serwerem a usługą push.

Anulowanie subskrypcji powiadomień push

Po zasubskrybowaniu powiadomień push interfejs użytkownika musi umożliwiać anulowanie subskrypcji w przypadku, gdy zmieni zdanie i nie będzie chciał już otrzymywać powiadomień push.

1. Zastąp komentarz // TODO w pliku unsubscribeButtonHandler() tym kodem:

// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

Odbieraj wiadomości push i wyświetlaj je jako powiadomienia

Jak już wspomnieliśmy, potrzebny jest skrypt service worker do obsługi odbierania i wyświetlania wiadomości przekazanych do klienta z Twojego serwera. Więcej informacji znajdziesz w artykule Odbieranie i wyświetlanie przesłanych wiadomości jako powiadomień.

1. Otwórz public/service-worker.js i zastąp komentarz // TODO w module obsługi zdarzeń push skryptu service worker tym kodem:

// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);

1. Wróć na kartę aplikacji.
2. Kliknij Powiadom mnie. Otrzymasz powiadomienie push.
3. Spróbuj otworzyć adres URL karty aplikacji w innych przeglądarkach (lub nawet na innych urządzeniach), przejdź przez proces subskrypcji i kliknij Powiadom wszystkie. Musisz otrzymywać to samo powiadomienie push we wszystkich przeglądarkach, które subskrybujesz. Więcej informacji o tym, czy działają lub nie działają, znajdziesz w artykule Zgodność z przeglądarką.

Powiadomienia możesz dostosowywać na wiele sposobów. Aby dowiedzieć się więcej, sprawdź parametry parametru ServiceWorkerRegistration.showNotification().

Ważne jest zrozumienie wywołania self.skipWaiting() w detektorze install skryptu service worker. Wyjaśnienie znajdziesz w sekcji Pomijanie fazy oczekiwania. Bez niego zmiany kodu wprowadzone w mechanizmie Service Worker nie będą widoczne od razu. Zależnie od potrzeb możesz używać tej funkcji w swojej witrynie, ale musisz poznać jej działanie.

Otwieranie adresu URL, gdy użytkownik kliknie powiadomienie

W praktyce będziesz prawdopodobnie używać powiadomienia po to, by ponownie zaangażować użytkowników i zachęcić ich do odwiedzenia Twojej witryny. Aby to zrobić, musisz nieco skonfigurować mechanizm Service Worker.

1. Zastąp komentarz // TODO w module obsługi zdarzeń notificationclick skryptu service worker tym kodem:

// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

1. Wróć do karty aplikacji, wyślij do siebie kolejne powiadomienie, a następnie kliknij je. W przeglądarce powinna otworzyć się nowa karta i wczytać stronę https://web.dev.

Dalsze kroki

• Zajrzyj na stronę ServiceWorkerRegistration.showNotification(), aby poznać wszystkie sposoby dostosowywania powiadomień.
• Aby lepiej zrozumieć, jak działają powiadomienia push, przeczytaj Omówienie powiadomień push.
• Zapoznaj się z lekcją Codelab: Tworzenie serwera powiadomień push, aby dowiedzieć się, jak zbudować serwer, który będzie zarządzał subskrypcjami i wysyłał żądania protokołu Web push.
• Wypróbuj Generator powiadomień, aby przetestować wszystkie sposoby dostosowywania powiadomień.