Dlaczego warto korzystać z powiadomień push?
Powiadomienia zawierają niewielkie porcje informacji. Aplikacje internetowe mogą używać powiadomień, aby informować użytkowników o ważnych wydarzeniach lub działaniach, które muszą wykonać.
Wygląd powiadomień różni się w zależności od platformy. Na przykład:
Tradycyjnie przeglądarki internetowe musiały inicjować wymianę informacji między serwerem a klientem, wysyłając żądanie. Technologia web push umożliwia natomiast skonfigurowanie serwera tak, aby wysyłał powiadomienia, gdy ma to sens w przypadku Twojej aplikacji. Usługa push tworzy unikalne adresy URL dla każdego subskrybowanego serwisu workera. Wysyłanie wiadomości do adresu URL usługi wywołuje zdarzenia w tej usłudze, co powoduje wyświetlenie powiadomienia.
Powiadomienia push mogą pomóc użytkownikom w całkowitym wykorzystaniu możliwości aplikacji, ponieważ zachęcają do jej ponownego otwarcia i korzystania z najnowszych informacji.
Tworzenie i wysyłanie powiadomień
Utwórz powiadomienia za pomocą interfejsu Notifications API. Obiekt Notification
zawiera ciąg znaków title
i obiekt options
. Na przykład:
let title = 'Hi!';
let options = {
body: 'Very Important Message',
/* other options can go here */
};
let notification = new Notification(title, options);
Element title
jest wyświetlany pogrubioną czcionką, gdy powiadomienie jest aktywne, a element body
zawiera dodatkowy tekst.
Uzyskiwanie uprawnień do wysyłania powiadomień
Aby wyświetlić powiadomienie, aplikacja musi uzyskać od użytkownika odpowiednie uprawnienie:
Notification.requestPermission();
Jak działają powiadomienia push?
Prawdziwa moc powiadomień wynika z połączenia usług robotów i technologii push:
Pracownicy usług mogą działać w tle i wyświetlać powiadomienia nawet wtedy, gdy aplikacja nie jest widoczna na ekranie.
Technologia push umożliwia skonfigurowanie serwera w taki sposób, aby wysyłał powiadomienia wtedy, gdy ma to sens w przypadku Twojej aplikacji. Usługa push tworzy niepowtarzalne adresy URL dla każdego subskrybowanego serwisu workera. Wysyłanie wiadomości do adresu URL usługi wywołuje zdarzenia w tej usłudze, co powoduje wyświetlenie powiadomienia.
W tym przykładowym procesie klient rejestruje service workera i subskrybuje powiadomienia push. Następnie serwer wysyła powiadomienie do punktu końcowego subskrypcji.
Klient i serwis worker korzystają z tradycyjnego JavaScriptu bez dodatkowych bibliotek. Serwer jest zbudowany z użyciem pakietu npm express
w Node.js i wysyła powiadomienia za pomocą pakietu npm web-push
. Aby wysłać informacje do serwera, klient wywołuje adres URL POST udostępniony przez serwer.
Część 1. Zarejestruj skrypt service worker i zasubskrybuj powiadomienia push
Aplikacja klienta rejestruje skrypt service worker w usłudze
ServiceWorkerContainer.register()
. Gdy klient jest nieaktywny, zarejestrowany skrypt service worker nadal działa w tle.Kod klienta:
navigator.serviceWorker.register('sw.js');
Klient prosi użytkownika o zgodę na wysyłanie powiadomień.
Kod klienta:
Notification.requestPermission();
Aby włączyć powiadomienia push, usługa workera używa funkcji
PushManager.subscribe()
do utworzenia subskrypcji push. W wywołaniuPushManager.subscribe()
usługa robocza przekazuje jako identyfikator klucz interfejsu API aplikacji.Kod klienta:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ });
});Usługi push, takie jak Komunikacja w chmurze Firebase, działają w modelu subskrypcji. Gdy usługa robocza subskrybuje usługę push, wywołując funkcję
PushManager.subscribe()
, usługa push tworzy adres URL, który jest unikalny dla tej usługi. Ten adres URL to punkt końcowy subskrypcji.Klient wysyła punkt końcowy subskrypcji do serwera aplikacji.
Kod klienta:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
sendToServer(subscription, '/new-subscription', 'POST');
});
});Kod serwera:
app.post('/new-subscription', (request, response) => {
// extract subscription from request
// send 'OK' response
});
Część 2. Wysyłanie powiadomienia
Serwer WWW wysyła powiadomienie do punktu końcowego subskrypcji.
Kod serwera:
const webpush = require('web-push');
let options = { /* config info for cloud messaging and API key */ };
let subscription = { /* subscription created in Part 1*/ };
let payload = { /* notification */ };
webpush.sendNotification(subscription, payload, options);Powiadomienia wysyłane do punktu końcowego subskrypcji wywołują zdarzenia push z usługą w roli celu. Pracownik usługi odbiera wiadomość i wyświetla ją użytkownikowi jako powiadomienie.
Kod skryptu service worker:
self.addEventListener('push', (event) => {
let title = { /* get notification title from event data */ }
let options = { /* get notification options from event data */ }
showNotification(title, options);
})Użytkownik wchodzi w interakcję z powiadomieniem, aktywując aplikację internetową, jeśli wcześniej nie była aktywna.
Dalsze kroki
W następnym kroku wprowadź powiadomienia push.
Opracowaliśmy serię laboratoriów kodu, które przeprowadzą Cię przez każdy etap tego procesu.