Ćwiczenia z programowania: tworzenie klienta powiadomień push

Kate Jeffreys

Kayce Basques

Aby kontynuować pracę z tym ćwiczeniem, otwórz tę stronę Glitch na drugiej karcie.

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak krok po kroku utworzyć klienta powiadomień push. Na koniec tego ćwiczenia będziesz mieć klienta, który:

• Subskrybuje powiadomienia push.
• Odbiera wiadomości push i wyświetla je jako powiadomienia.
• Anuluje subskrypcję powiadomień push.

Ten warsztat programistyczny ma na celu pomóc Ci w nauce poprzez działanie i nie skupia się na omawianiu pojęć. Aby dowiedzieć się więcej o pojęciach związanych z powiadomieniami push, przeczytaj artykuł Jak działają powiadomienia push?

Kod serwera w tym ćwiczeniu jest już gotowy. W tym ćwiczeniu będziesz wdrażać tylko klienta. Aby dowiedzieć się, jak wdrożyć serwer powiadomień push, zapoznaj się z Codelab: tworzenie serwera powiadomień push.

Aby zobaczyć pełny kod, otwórz push-notifications-client-codelab-complete (kod źródłowy).

Zgodność z przeglądarką

To Codelab działa w tych 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 następujących systemach operacyjnych (ani ich kombinacjach systemu operacyjnego i przeglądarki):

• macOS: Brave, Edge, Safari.
• iOS

Konfiguracja

Pobieranie edytowalnej kopii kodu

W tym samouczku edytor kodu widoczny po prawej stronie tych instrukcji będzie nazywany interfejsem Glitch.

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ć problemy z ukończeniem ćwiczeń z programowania. Zamiast tego możesz użyć profilu, na którym jesteś zalogowany(-a).

Konfigurowanie uwierzytelniania

Zanim zaczniesz korzystać z powiadomień push, musisz skonfigurować serwer i klienta za pomocą kluczy uwierzytelniających. Aby dowiedzieć się, dlaczego tak się dzieje, przeczytaj artykuł Podpisywanie żądań protokołu web push.

1. W interfejsie Glitch API kliknij Narzędzia, a następnie Terminal, aby otworzyć terminal zakłócenia.
2. W terminalu Glitch uruchom npx web-push generate-vapid-keys. Skopiuj wartości klucza prywatnego i klucza publicznego.
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ć tak:

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

1. Zamknij Glitch Terminal.

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

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

Rejestrowanie skryptu service worker

Ostatecznie klient będzie potrzebować service workera do odbierania i wyświetlania powiadomień. Najlepiej zarejestrować service workera jak najszybciej. 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 strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran.

Kluczowe pojęcie: w tym samouczku karta, którą właśnie otworzysz, będzie nazywana kartą aplikacji.

1. Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
2. Kliknij kartę Konsola. W Konsoli powinien pojawić się komunikatService worker was registered..

Uwaga: poprzednie instrukcje zakładają, że używasz przeglądarki Google Chrome i Chrome DevTools.

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 użytkownika powinien pytać, czy chce otrzymywać powiadomienia push. Gdy użytkownik wyraźnie potwierdzi (np. kliknięciem przycisku), możesz rozpocząć formalny proces uzyskania uprawnień do wysyłania powiadomień push z przeglądarki.

1. Aby wrócić do kodu, w interfejsie Glitch kliknij Wyświetl źródło.
2. W pliku 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 powiadomienia push. Przeglądarka lub system operacyjny prawdopodobnie zapyta, czy chcesz otrzymywać powiadomienia push z witryny. Kliknij Zezwól (lub inną odpowiednią frazę używaną przez Twoją przeglądarkę lub system operacyjny). W konsoli powinien pojawić się komunikat informujący, czy prośba została zaakceptowana, czy odrzucona.

Jeśli korzystasz z okna incognito lub okna gościa, przeglądarka może automatycznie odrzucić prośbę. Zwróć uwagę na interfejs przeglądarki, który informuje, że prośba została automatycznie zablokowana.

Subskrybuj powiadomienia push

Proces subskrypcji wymaga interakcji z usługą internetową kontrolowaną przez dostawcę przeglądarki, zwaną usługą push. 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. Aby dowiedzieć się więcej o procesie subskrypcji, przeczytaj artykuł Subskrypcja powiadomień push przez klienta.

1. Dodaj do pliku 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 bez wyświetlania powiadomień widocznych dla użytkownika (cicha wysyłka), ale obecnie przeglądarki nie umożliwiają takiej funkcji ze względu na kwestie związane z prywatnością.

Wartość applicationServerKey korzysta z funkcji użytkowej, która przekształca ciąg base64 w tablicę 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, do obsługiwania odbierania i wyświetlania wiadomości wysyłanych na klienta z serwera potrzebny jest Ci serwis worker. Więcej informacji znajdziesz w artykule Odbieranie i wyświetlanie wiadomości push jako powiadomień.

1. Otwórz plik public/service-worker.js i w obiekcie service worker zastąp komentarz // TODO w obiekcie push obsługującym zdarzenie 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 Powiadamiaj mnie. Otrzymasz powiadomienie push.
3. Spróbuj otworzyć adres URL karty aplikacji w innych przeglądarkach (lub na innych urządzeniach), przejść przez proces subskrypcji, a następnie kliknąć Powiadomij wszystkich. Musisz otrzymywać to samo powiadomienie push we wszystkich przeglądarkach, które subskrybujesz. Aby zobaczyć listę kombinacji przeglądarek i systemów operacyjnych, które działają lub nie działają, zapoznaj się z artykułem Zgodność przeglądarki.

Powiadomienie możesz dostosować na wiele sposobów. Aby dowiedzieć się więcej, zapoznaj się z parametrami funkcji ServiceWorkerRegistration.showNotification().

Wywołanie self.skipWaiting() w metodzie install listener w Twoim serwisie jest ważne. Więcej informacji znajdziesz w sekcji Pominięcie fazy oczekiwania. Bez niego zmiany kodu w Twoim serwisie worker nie zaczną obowiązywać od razu. Możesz, ale nie musisz używać tej funkcji w swojej witrynie. W obu przypadkach warto jednak wiedzieć, jaki ma ona wpływ.

Otwieranie adresu URL po kliknięciu powiadomienia przez użytkownika

W praktyce prawdopodobnie użyjesz powiadomienia, aby ponownie zaangażować użytkownika i zachęcić go do odwiedzenia witryny. Aby to zrobić, musisz trochę skonfigurować mechanizm Service Worker.

1. Zastąp komentarz // TODO w obiekcie notificationclick w obiekcie notificationclick 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 potem kliknij to powiadomienie. Przeglądarka powinna otworzyć nową kartę i wczytać https://web.dev.

Dalsze kroki

• Aby dowiedzieć się, jak na różne sposoby możesz dostosowywać powiadomienia, zajrzyj na stronę ServiceWorkerRegistration.showNotification().
• Aby lepiej zrozumieć, jak działają powiadomienia push, przeczytaj omówienie powiadomień push.
• Aby dowiedzieć się, jak utworzyć serwer, który zarządza subskrypcjami i wysyła żądania protokołu web push, skorzystaj z tego ćwiczenia z programowania: tworzenie serwera powiadomień push.
• Wypróbuj Generator powiadomień, aby sprawdzić wszystkie sposoby dostosowywania powiadomień.