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.
- Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
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.
- W interfejsie usługi Glitch kliknij Narzędzia, a następnie Terminal, aby otworzyć terminal zakłócenia.
- W terminalu Glitch uruchom polecenie
npx web-push generate-vapid-keys
. Skopiuj klucz prywatny i klucz publiczny. - W interfejsie błędu otwórz plik
.env
i zaktualizujVAPID_PUBLIC_KEY
orazVAPID_PRIVATE_KEY
. UstawVAPID_SUBJECT
namailto:test@test.test
. 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:test@test.test"
- Zamknij terminal z błędami.
- Otwórz pokój
public/index.js
. - 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ń.
- 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);
- Aby wyświetlić podgląd witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran .
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Konsola. Powinien wyświetlić się komunikat
Service worker was registered.
zapisany w konsoli.
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.
- W interfejsie błędu kliknij Wyświetl źródło, aby wrócić do kodu.
- W
public/index.js
zastąp komentarz// TODO
w plikusubscribeButtonHandler()
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.');
}
- 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.
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.
- 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.
- Zastąp komentarz
// TODO
w plikuunsubscribeButtonHandler()
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ń.
- 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
);
- Wróć na kartę aplikacji.
- Kliknij Powiadom mnie. Otrzymasz powiadomienie push.
- 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()
.
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.
- 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'));
- 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ń.