Dlaczego warto korzystać z powiadomień push?
Powiadomienia przedstawiają użytkownikowi niewielkie fragmenty informacji. Aplikacje internetowe mogą korzystać z powiadomień, aby informować użytkowników o ważnych, pilnych zdarzeniach lub działaniach, które musi wykonać.
Wygląd i sposób powiadomień różni się w zależności od platformy. Na przykład:
.Dawniej przeglądarki internetowe musiały inicjować wymianę informacji między serwerem a klientem przez wysłanie żądania. Technologia Web push umożliwia skonfigurowanie serwera tak, aby wysyłał powiadomienia, gdy jest to uzasadnione w przypadku Twojej aplikacji. Usługa push tworzy unikalne adresy URL dla każdego subskrybowanego skryptu service worker. Wysyłanie wiadomości na adres URL skryptu service worker powoduje wywołanie zdarzeń, które powodują wyświetlenie powiadomienia.
Powiadomienia push mogą pomóc użytkownikom w pełni wykorzystać możliwości aplikacji, zachęcając do jej ponownego otwarcia i używania na podstawie najnowszych informacji.
Tworzenie i wysyłanie powiadomień
Twórz powiadomienia za pomocą interfejsu API powiadomień. Obiekt Notification
ma ciąg 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);
Gdy powiadomienie jest aktywne, title
jest pogrubiony, a pole body
zawiera dodatkowy tekst.
Uzyskiwanie uprawnień do wysyłania powiadomień
Aby aplikacja mogła wyświetlać powiadomienie, musi uzyskać na to zgodę użytkownika:
Notification.requestPermission();
Jak działają powiadomienia push?
Prawdziwa siła powiadomień tkwi w kombinacji mechanizmów Service Worker i technologii push:
Skrypty Service Worker mogą działać w tle i wyświetlać powiadomienia, nawet jeśli aplikacji nie są widoczne na ekranie.
Technologia push umożliwia skonfigurowanie serwera tak, aby wysyłał powiadomienia, gdy jest to uzasadnione dla danej aplikacji. Usługa push tworzy unikalne adresy URL dla każdego subskrybowanego skryptu service worker. Wysyłanie wiadomości na adres URL skryptu service worker powoduje wywołanie zdarzeń, które powodują wyświetlenie powiadomienia.
W poniższym przykładzie klient rejestruje skrypt service worker i subskrybuje powiadomienia push. Następnie serwer wysyła powiadomienie do punktu końcowego subskrypcji.
Klient i mechanizm Service Worker używają waniliowego JavaScriptu bez dodatkowych bibliotek. Serwer korzysta z pakietu npm express
w Node.js i używa pakietu npm web-push
do wysyłania powiadomień. Aby wysłać informacje do serwera, klient wywołuje adres URL POST ujawniony przez serwer.
Część 1. Zarejestruj skrypt service worker i zasubskrybuj Push
Aplikacja kliencka rejestruje skrypt service worker w
ServiceWorkerContainer.register()
. Zarejestrowany skrypt service worker będzie nadal działać w tle, gdy klient będzie nieaktywny.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, skrypt service worker tworzy subskrypcję push przy użyciu
PushManager.subscribe()
. W wywołaniuPushManager.subscribe()
skrypt service worker dostarcza klucz interfejsu API aplikacji jako identyfikator.Kod klienta:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ });
});Usługi push, takie jak Komunikacja w chmurze Firebase (FCM), działają na podstawie modelu subskrypcji. Gdy skrypt service worker subskrybuje usługę push, wywołując metodę
PushManager.subscribe()
, tworzy ona unikalny adres URL dla tego skryptu. Ten adres URL jest nazywany punktem końcowym 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. Wyślij powiadomienie
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 skrypcją service worker jako celem. Skrypt service worker 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 wejdzie w interakcję z powiadomieniem, aktywując aplikację internetową, jeśli jeszcze nie była aktywna.
Dalsze kroki
Następnym krokiem jest wdrożenie powiadomień push.
Przygotowaliśmy serię ćwiczeń z programowania, które przeprowadzą Cię przez każdy etap tego procesu.