Dodawanie powiadomień push do aplikacji internetowej

Wiadomości push to prosty i skuteczny sposób na ponowne zaangażowanie użytkowników. Z tego przewodnika dowiesz się, jak dodać do aplikacji internetowej powiadomienia push.

Czego się nauczysz

  • Subskrybowanie i anulowanie subskrypcji powiadomień push
  • Jak postępować z przychodzącymi wiadomościami push
  • Wyświetlanie powiadomienia
  • Jak reagować na kliknięcia powiadomień

Czego potrzebujesz

  • Chrome w wersji 52 lub nowszej
  • Web Server for Chrome lub wybrany serwer internetowy.
  • edytor tekstu,
  • Podstawowa znajomość HTML, CSS, JavaScriptu i Narzędzi deweloperskich w Chrome
  • przykładowy kod (patrz Konfiguracja);

Pobierz przykładowy kod

Przykładowy kod na potrzeby tych ćwiczeń z programowania możesz uzyskać na 2 sposoby:

  • Sklonuj repozytorium Git:
git clone https://github.com/GoogleChrome/push-notifications.git
  • Pobierz plik ZIP:

Pobieranie kodu źródłowego

Jeśli pobierzesz źródło jako plik ZIP, po jego rozpakowaniu otrzymasz folder główny push-notifications-master.

Instalowanie i weryfikowanie serwera WWW

Możesz używać własnego serwera internetowego, ale ten przewodnik został zaprojektowany tak, aby dobrze współpracował z aplikacją Web Server for Chrome. Jeśli nie masz jeszcze tej aplikacji, możesz ją pobrać z Chrome Web Store:

Instalowanie serwera Web Server for Chrome

Po zainstalowaniu aplikacji Web Server for Chrome kliknij skrót Aplikacje na pasku zakładek:

W oknie Aplikacje kliknij ikonę serwera internetowego:

Następnie zobaczysz to okno, w którym możesz skonfigurować lokalny serwer WWW:

Kliknij przycisk Wybierz folder i wybierz folder app w pobranym folderze push-notifications. Umożliwia to wyświetlanie postępów prac za pomocą adresu URL widocznego w sekcji Adresy URL serwera internetowego w oknie dialogowym.

W sekcji Opcje zaznacz pole Automatycznie wyświetlaj plik index.html, jak pokazano poniżej:

Następnie zatrzymaj i ponownie uruchom serwer, przesuwając przełącznik Serwer WWW: URUCHOMIONY w lewo, a potem z powrotem w prawo.

Kliknij adres URL serwera internetowego, aby otworzyć witrynę w przeglądarce. Powinna wyświetlić się strona podobna do tej poniżej (w Twojej wersji może być widoczny adres 127.0.0.1:8887):

00-push-codelab.png

Zawsze aktualizuj service worker

Podczas tworzenia warto zadbać o to, aby skrypt service worker był zawsze aktualny i zawierał najnowsze zmiany.

Aby to skonfigurować w Chrome:

  1. Otwórz kartę Push Codelab.
  2. Otwórz Narzędzia deweloperskie: Ctrl+Shift+I w systemach Windows i Linux, Cmd+Option+I w systemie macOS.
  3. Wybierz panel Application (Aplikacja), kliknij kartę Service Workers (Usługi Service Worker) i zaznacz pole wyboru Update on Reload (Aktualizuj przy ponownym wczytaniu). Gdy to pole wyboru jest zaznaczone, skrypt service worker jest wymuszany przy każdym ponownym wczytaniu strony.

Ukończony kod

W katalogu app zobaczysz pusty plik o nazwie sw.js. Ten plik będzie Twoim service workerem. Na razie może pozostać puste. Kod dodasz później.

Najpierw musisz zarejestrować ten plik jako service worker.

app/index.htmlStrona się wczytujescripts/main.js. W tym pliku JavaScript rejestrujesz service worker.

Dodaj do pliku scripts/main.js ten kod:

if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('Service Worker and Push are supported');

  navigator.serviceWorker.register('sw.js')
  .then(function(swReg) {
    console.log('Service Worker is registered', swReg);

    swRegistration = swReg;
  })
  .catch(function(error) {
    console.error('Service Worker Error', error);
  });
} else {
  console.warn('Push messaging is not supported');
  pushButton.textContent = 'Push Not Supported';
}

Ten kod sprawdza, czy Twoja przeglądarka obsługuje service workerów i wiadomości push. Jeśli są obsługiwane, kod zarejestruje plik sw.js.

Wypróbuj

Sprawdź zmiany, odświeżając kartę Push Codelab w przeglądarce.

Sprawdź, czy w konsoli w Narzędziach deweloperskich w Chrome znajduje się symbol Service Worker is registered message:

Pobieranie kluczy serwera aplikacji

Aby wykonać to ćwiczenie, musisz wygenerować klucze serwera aplikacji. Możesz to zrobić w witrynie towarzyszącej: web-push-codelab.glitch.me

W tym miejscu możesz wygenerować parę kluczy (publicznego i prywatnego).

push-codelab-04-companion.png

Skopiuj klucz publiczny do scripts/main.js, zastępując wartość <Your Public Key>:

const applicationServerPublicKey = '<Your Public Key>';

Ważne: nigdy nie umieszczaj klucza prywatnego w aplikacji internetowej.

Ukończony kod

Obecnie przycisk Włącz w aplikacji internetowej jest wyłączony i nie można go kliknąć. Domyślnie przycisk push powinien być wyłączony, a włączony dopiero wtedy, gdy będziesz mieć pewność, że przeglądarka obsługuje wiadomości push i możesz sprawdzić, czy użytkownik jest obecnie subskrybentem wiadomości.

W scripts/main.js musisz utworzyć 2 funkcje:

  • initializeUI, aby sprawdzić, czy użytkownik ma obecnie subskrypcję.
  • updateBtn, aby włączyć przycisk i zmienić tekst w zależności od tego, czy użytkownik ma subskrypcję

Dodaj funkcję initializeUI do main.js w ten sposób:

function initializeUI() {
  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

Nowa metoda używa swRegistration z poprzedniego kroku, pobiera z niego właściwość pushManager i wywołuje na niej getSubscription().

pushManager. getSubscription() zwraca obietnicę, która jest spełniana w przypadku bieżącej subskrypcji. W przeciwnym razie zwraca wartość null. Dzięki temu możesz sprawdzić, czy użytkownik już subskrybuje, ustawić wartość isSubscribed, a następnie wywołać updateBtn(), aby zaktualizować przycisk.

Dodaj funkcję updateBtn() do main.js:

function updateBtn() {
  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

Ta funkcja włącza przycisk i zmienia jego tekst w zależności od tego, czy użytkownik ma subskrypcję.

Na koniec wywołaj funkcję initializeUI(), gdy Twój service worker zostanie zarejestrowany w main.js:

navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
  console.log('Service Worker is registered', swReg);

  swRegistration = swReg;
  initializeUI();
})

Wypróbuj

Odśwież kartę Push Codelab. Powinien być widoczny włączony przycisk Włącz powiadomienia push (możesz go kliknąć), a w konsoli powinien być widoczny symbol User is NOT subscribed.

W dalszej części tego laboratorium zobaczysz, że tekst przycisku zmienia się za każdym razem, gdy subskrybujesz lub anulujesz subskrypcję.

Ukończony kod

Obecnie przycisk Włącz powiadomienia push nie ma większego znaczenia. Zajmijmy się tym.

W funkcji initializeUI() dodaj detektor kliknięć przycisku:

function initializeUI() {
  pushButton.addEventListener('click', function() {
    pushButton.disabled = true;
    if (isSubscribed) {
      // TODO: Unsubscribe user
    } else {
      subscribeUser();
    }
  });

  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    updateSubscriptionOnServer(subscription);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

Gdy użytkownik kliknie przycisk, wyłącz go, aby mieć pewność, że nie kliknie go po raz drugi, ponieważ subskrypcja wiadomości push może zająć trochę czasu.

Następnie wywołujesz funkcję subscribeUser(), jeśli użytkownik nie ma obecnie subskrypcji. Aby to zrobić, wklej ten kod do pliku scripts/main.js:

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey
  })
  .then(function(subscription) {
    console.log('User is subscribed.');

    updateSubscriptionOnServer(subscription);

    isSubscribed = true;

    updateBtn();
  })
  .catch(function(error) {
    console.error('Failed to subscribe the user: ', error);
    updateBtn();
  });
}

Przyjrzyjmy się, co robi ten kod i jak subskrybuje użytkownika w celu otrzymywania wiadomości push.

Najpierw weź klucz publiczny serwera aplikacji, który jest zakodowany w formacie Base64 URL-safe, i przekształć go w UInt8Array, ponieważ jest to oczekiwane dane wejściowe wywołania subscribe(). Funkcja urlB64ToUint8Array() znajduje się u góry scripts/main.js.

Po przekonwertowaniu wartości wywołujesz metodę subscribe() w obiekcie pushManager skryptu service worker, przekazując klucz publiczny serwera aplikacji i wartość userVisibleOnly: true.

const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})

Parametr userVisibleOnly gwarantuje, że powiadomienie będzie się wyświetlać za każdym razem, gdy zostanie wysłana wiadomość push. Obecnie ta wartość jest wymagana i musi być ustawiona na „true”.

Wywołanie funkcji subscribe() zwraca obietnicę, która zostanie spełniona po wykonaniu tych czynności:

  1. Użytkownik przyznał uprawnienia do wyświetlania powiadomień.
  2. Przeglądarka wysłała żądanie sieciowe do usługi push, aby uzyskać dane potrzebne do wygenerowania PushSubscription.

Obietnica subscribe() zostanie rozwiązana z wartością PushSubscription, jeśli te czynności zostaną wykonane prawidłowo. Jeśli użytkownik nie przyzna uprawnień lub wystąpi problem z subskrypcją, obietnica zostanie odrzucona z błędem. W tym przypadku w samouczku dotyczącym programowania otrzymasz ten łańcuch obietnic:

swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})
.then(function(subscription) {
  console.log('User is subscribed.');

  updateSubscriptionOnServer(subscription);

  isSubscribed = true;

  updateBtn();

})
.catch(function(err) {
  console.log('Failed to subscribe the user: ', err);
  updateBtn();
});

Dzięki temu możesz uzyskać subskrypcję i traktować użytkownika jako subskrybenta lub przechwycić błąd i zarejestrować go w konsoli. W obu przypadkach wywołujesz funkcję updateBtn(), aby przywrócić przycisk i ustawić odpowiedni tekst.

W prawdziwej aplikacji funkcja updateSubscriptionOnServer() służy do wysyłania danych subskrypcji do backendu, ale w tym ćwiczeniu z programowania po prostu wyświetlasz subskrypcję w interfejsie. Dodaj do pliku scripts/main.js tę funkcję:

function updateSubscriptionOnServer(subscription) {
  // TODO: Send subscription to application server

  const subscriptionJson = document.querySelector('.js-subscription-json');
  const subscriptionDetails =
    document.querySelector('.js-subscription-details');

  if (subscription) {
    subscriptionJson.textContent = JSON.stringify(subscription);
    subscriptionDetails.classList.remove('is-invisible');
  } else {
    subscriptionDetails.classList.add('is-invisible');
  }
}

Wypróbuj

Otwórz kartę Push Codelab, odśwież stronę i kliknij przycisk. Powinien pojawić się komunikat z prośbą o przyznanie uprawnień podobny do tego:

Jeśli przyznasz uprawnienia, w konsoli powinien pojawić się komunikat User is subscribed. Tekst przycisku zmieni się na Wyłącz wiadomości push, a u dołu strony zobaczysz subskrypcję w postaci danych JSON.

Ukończony kod

Nie wiesz jeszcze, co się stanie, jeśli użytkownik zablokuje prośbę o uprawnienia. Wymaga to szczególnej uwagi, ponieważ jeśli użytkownik zablokuje uprawnienia, Twoja aplikacja internetowa nie będzie mogła ponownie wyświetlić prośby o uprawnienia ani zasubskrybować użytkownika. Musisz co najmniej wyłączyć przycisk, aby użytkownik wiedział, że nie można go użyć.

Najlepszym miejscem do obsługi tego scenariusza jest funkcja updateBtn(). Wystarczy sprawdzić wartość Notification.permission, np. tak:

function updateBtn() {
  if (Notification.permission === 'denied') {
    pushButton.textContent = 'Push Messaging Blocked';
    pushButton.disabled = true;
    updateSubscriptionOnServer(null);
    return;
  }

  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

Wiesz, że jeśli uprawnienie ma wartość denied, użytkownik nie może subskrybować i nic więcej nie możesz zrobić, więc najlepszym rozwiązaniem jest trwałe wyłączenie przycisku.

Wypróbuj

Ponieważ w poprzednim kroku przyznano już uprawnienia aplikacji internetowej, musisz kliknąć i w kółku na pasku adresu i zmienić uprawnienia Powiadomienia na Użyj domyślnych ustawień globalnych (pytaj).

Po zmianie tego ustawienia odśwież stronę, kliknij przycisk Włącz wiadomości push i w oknie uprawnień wybierz Zablokuj. Przycisk będzie wyłączony i będzie wyświetlać tekst Blokowanie wiadomości push.

Po wprowadzeniu tej zmiany możesz zasubskrybować użytkownika, uwzględniając możliwe scenariusze uprawnień.

Ukończony kod

Zanim dowiesz się, jak wysyłać wiadomości push z backendu, musisz zastanowić się, co się stanie, gdy subskrybent otrzyma taką wiadomość.

Gdy wywołasz wiadomość push, przeglądarka ją odbierze, sprawdzi, do którego service workera jest ona przeznaczona, wybudzi go i wyśle zdarzenie push. Musisz nasłuchiwać tego zdarzenia i wyświetlać powiadomienie.

Dodaj do pliku sw.js ten kod:

self.addEventListener('push', function(event) {
  console.log('[Service Worker] Push Received.');
  console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);

  const title = 'Push Codelab';
  const options = {
    body: 'Yay it works.',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

Przeanalizujmy ten kod. Nasłuchujesz zdarzeń push w usłudze Service Worker, dodając detektor zdarzeń:

self.addEventListener('push', ... );

(Jeśli nie masz doświadczenia z Web Workers, symbol self jest prawdopodobnie dla Ciebie nowy. W pliku service worker self odnosi się do samego service workera).

Gdy zostanie odebrana wiadomość push, zostanie wywołany detektor zdarzeń, a Ty utworzysz powiadomienie, wywołując showNotification() na właściwości registration service workera. showNotification() wymaga podania title. Możesz też podać obiekt options, aby ustawić treść wiadomości, ikonę i plakietkę. (W momencie pisania tego artykułu plakietka jest używana tylko na Androidzie).

const title = 'Push Codelab';
const options = {
  body: 'Yay it works.',
  icon: 'images/icon.png',
  badge: 'images/badge.png'
};
self.registration.showNotification(title, options);

Ostatnią rzeczą, którą musisz omówić w kontekście obsługi zdarzeń push, jest event.waitUntil(). Ta metoda przyjmuje obietnicę, aby umożliwić przeglądarce utrzymanie działania usługi Service Worker do momentu rozwiązania przekazanej obietnicy.

Aby ułatwić zrozumienie powyższego kodu, możesz go przepisać w ten sposób:

const notificationPromise = self.registration.showNotification(title, options);
event.waitUntil(notificationPromise);

Po przeanalizowaniu zdarzenia push przetestujmy je.

Wypróbuj

Dzięki obsłudze zdarzeń push w usłudze Service Worker możesz wywołać fałszywe zdarzenie push, aby sprawdzić, co się stanie po otrzymaniu wiadomości.

W aplikacji internetowej zasubskrybuj wiadomości push i sprawdź, czy w konsoli widzisz symbol User IS subscribed. W panelu Aplikacja w Narzędziach deweloperskich na karcie Service Workers kliknij przycisk Push (Wysyłaj):

Po kliknięciu Push (Wypchnij) powinno pojawić się powiadomienie podobne do tego:

Uwaga: jeśli ten krok nie zadziała, spróbuj wyrejestrować skrypt service worker, klikając link Wyrejestruj w panelu Aplikacja w Narzędziach deweloperskich. Poczekaj, aż skrypt service worker zostanie zatrzymany, a następnie ponownie załaduj stronę.

Ukończony kod

Jeśli klikniesz jedno z tych powiadomień, nic się nie stanie. Kliknięcia powiadomień możesz obsługiwać, nasłuchując zdarzeń notificationclick w procesie roboczym usługi.

Zacznij od dodania notificationclicksłuchacza w sw.js:

self.addEventListener('notificationclick', function(event) {
  console.log('[Service Worker] Notification click received.');

  event.notification.close();

  event.waitUntil(
    clients.openWindow('https://developers.google.com/web')
  );
});

Gdy użytkownik kliknie powiadomienie, zostanie wywołany detektor zdarzeń notificationclick.

Kod najpierw zamyka powiadomienie, które zostało kliknięte:

event.notification.close();

Następnie otworzy się nowe okno lub nowa karta, na której załaduje się adres URL https://developers.google.com/web. Możesz to zmienić. 

event.waitUntil(
    clients.openWindow('https://developers.google.com/web/')
  );

event.waitUntil() zapewnia, że przeglądarka nie zakończy działania service workera, zanim nie zostanie wyświetlone nowe okno lub karta.

Wypróbuj

Spróbuj ponownie wywołać wiadomość push w Narzędziach deweloperskich i kliknij powiadomienie. Powiadomienie zostanie zamknięte i otworzy się nowa karta.

Wiesz już, że Twoja aplikacja internetowa może wyświetlać powiadomienia za pomocą Narzędzi deweloperskich, i wiesz, jak zamknąć powiadomienie kliknięciem. Następnym krokiem jest wysłanie rzeczywistej wiadomości push.

Zwykle wymaga to wysłania subskrypcji ze strony internetowej do backendu. Backend wywołuje wtedy wiadomość push, wykonując wywołanie API do punktu końcowego w subskrypcji.

To wykracza poza zakres tego samouczka, ale możesz użyć witryny towarzyszącej (web-push-codelab.glitch.me), aby wywołać rzeczywisty komunikat push. Wklej subskrypcję na dole strony:

Następnie wklej go w witrynie towarzyszącej w obszarze tekstowym Subskrypcja do wysłania:

W sekcji Tekst do wysłania dodaj dowolny ciąg znaków, który chcesz wysłać w wiadomości push.

Kliknij przycisk Wyślij wiadomość push.

Powinno się wtedy pojawić powiadomienie push. Użyty tekst zostanie zarejestrowany w konsoli.

Dzięki temu będziesz mieć możliwość przetestowania wysyłania i odbierania danych oraz manipulowania powiadomieniami.

Aplikacja towarzysząca to tylko serwer węzła, który do wysyłania wiadomości używa biblioteki web-push. Warto przejrzeć organizację web-push-libs na GitHubie, aby sprawdzić, jakie biblioteki są dostępne do wysyłania powiadomień push. Dzięki temu wiele szczegółów dotyczących wywoływania wiadomości push jest obsługiwanych automatycznie.

Tutaj możesz zobaczyć cały kod witryny towarzyszącej.

Ukończony kod

Brakuje tylko możliwości anulowania subskrypcji powiadomień push przez użytkownika. Aby to zrobić, musisz zadzwonić pod numer unsubscribe() na PushSubscription.

Wróć do pliku scripts/main.js i zmień odbiornik kliknięć pushButton w initializeUI() na ten:

pushButton.addEventListener('click', function() {
  pushButton.disabled = true;
  if (isSubscribed) {
    unsubscribeUser();
  } else {
    subscribeUser();
  }
});

Zwróć uwagę, że teraz wywołasz nową funkcję unsubscribeUser(). W tej funkcji uzyskujesz bieżącą subskrypcję i wywołujesz w niej funkcję unsubscribe(). Dodaj do pliku scripts/main.js ten kod:

function unsubscribeUser() {
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    if (subscription) {
      return subscription.unsubscribe();
    }
  })
  .catch(function(error) {
    console.log('Error unsubscribing', error);
  })
  .then(function() {
    updateSubscriptionOnServer(null);

    console.log('User is unsubscribed.');
    isSubscribed = false;

    updateBtn();
  });
}

Przyjrzyjmy się tej funkcji.

Najpierw uzyskaj obecną subskrypcję, dzwoniąc pod numer getSubscription():

swRegistration.pushManager.getSubscription()

Zwraca obietnicę, która jest spełniana przez obiekt PushSubscription, jeśli taki istnieje. W przeciwnym razie zwraca wartość null. Jeśli subskrypcja istnieje, wywołujesz na niej funkcję unsubscribe(), co powoduje, że PushSubscription staje się nieprawidłowy.

swRegistration.pushManager.getSubscription()
.then(function(subscription) {
  if (subscription) {
    // TODO: Tell application server to delete subscription
    return subscription.unsubscribe();
  }
})
.catch(function(error) {
  console.log('Error unsubscribing', error);
})

Wywołanie funkcji unsubscribe() zwraca obietnicę, ponieważ wykonanie tej operacji może trochę potrwać. Zwracasz tę obietnicę, aby następna funkcja then() w łańcuchu czekała na zakończenie działania funkcji unsubscribe(). Dodajesz też moduł obsługi błędów na wypadek, gdyby wywołanie funkcji unsubscribe() spowodowało błąd. Następnie możesz zaktualizować interfejs.

.then(function() {
  updateSubscriptionOnServer(null);

  console.log('User is unsubscribed.');
  isSubscribed = false;

  updateBtn();
})

Wypróbuj

W aplikacji internetowej powinna być możliwość kliknięcia Włącz wiadomości push lub Wyłącz wiadomości push, a w logach będzie widoczne, że użytkownik subskrybuje lub anuluje subskrypcję.

Gratulujemy ukończenia tego ćwiczenia!

W tym ćwiczeniu z programowania pokazaliśmy, jak zacząć dodawać powiadomienia push do aplikacji internetowej. Jeśli chcesz dowiedzieć się więcej o tym, co można zrobić za pomocą powiadomień internetowych, zapoznaj się z tymi dokumentami.

Jeśli chcesz wdrożyć powiadomienia push w swojej witrynie, możesz dodać obsługę starszych przeglądarek lub przeglądarek niezgodnych ze standardami, które korzystają z GCM. Więcej informacji

Więcej informacji

Przydatne posty na blogu