Używanie skryptu service worker do zarządzania powiadomieniami

W tym ćwiczeniu w Codelabs wykorzystasz mechanizm Service Worker aby zarządzać powiadomieniami. W tych instrukcjach zakładamy, że znasz już oraz podstawy wysyłania próśb o zgodę na wyświetlanie powiadomień i wysyłania powiadomień. Jeśli chcesz odświeżyć sobie informacje o powiadomieniach, przeczytaj Pierwsze kroki z interfejsem Notification API ćwiczenie w Codelabs. Aby dowiedzieć się więcej o skryptach service worker, zapoznaj się z artykułem Wprowadzenie do mechanizmów Service Worker Matta Gaunta.

Zremiksuj przykładową aplikację i wyświetl ją w nowej karcie

Powiadomienia z umieszczonej aplikacji Glitch są automatycznie blokowane, więc nie możesz wyświetlić podglądu aplikacji na tej stronie. Oto co musisz zrobić:

1. Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
2. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran

Usterka powinna się otworzyć w nowej karcie Chrome.

Podczas wykonywania tych ćwiczeń w programie wprowadź zmiany w kodzie w umieszczonym na tej stronie glitchu. Aby zobaczyć zmiany, odśwież nową kartę w aplikacji, która jest aktywna w sieci.

Zapoznanie się z przykładową aplikacją i uruchamianiem kodu

Zacznij od zapoznania się z aktywną aplikacją w nowej karcie Chrome:

1. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.

2. Kliknij kartę Konsola.

3. Upewnij się, że w menu Poziomy wybrana jest opcja Informacje. obok pola Filtr.

4. W konsoli Narzędzi deweloperskich w przypadku opublikowanej aplikacji powinien pojawić się taki komunikat:

   TODO: Implement getRegistration().

   To jest komunikat z kropku funkcji, który wdrożysz w ramach tego ćwiczenia z programowania.

Przyjrzyjmy się teraz kodowi przykładowej aplikacji w umieszczonej na tej stronie stronie Glitch.

1. W umieszczonej wersji błędu zobacz public/index.js:

   • Dostępne są 4 kropki dla funkcji, które implementujesz: registerServiceWorker, getRegistration, unRegisterServiceWorker i sendNotification.

   • Funkcja requestPermission prosi użytkownika o zgodę na wysyłanie powiadomień. Jeśli udało Ci się już wykonać ćwiczenie z programowania dotyczące interfejsu Notification API, zauważysz, że w tym miejscu jest używana jego funkcja requestPermission. Jedyną różnicą jest to, że po rozpatrzeniu prośby o uprawnienia aktualizuje się też interfejs użytkownika.

   • Funkcja updateUI odświeża wszystkie przyciski i komunikaty w aplikacji.

   • Funkcja initializePage wykrywa funkcje skryptu service work w przeglądarce i aktualizuje interfejs użytkownika aplikacji.

   • Skrypt czeka na wczytanie strony, a następnie go inicjuje.

2. W umieszczonej usterce otwórz public/service-worker.js.

   Jak sama nazwa wskazuje, należy dodać do aplikacji kod, aby zarejestrować ten plik jako skryptor service worker.

   Chociaż plik nie jest jeszcze używany przez aplikację, zawiera on kod początkowy, który wyświetla komunikat w konsoli, gdy skrypt service worker jest aktywny.

   Do public/service-worker.js dodasz kod służący do obsługi powiadomień, gdy skrypt service worker je otrzyma.

Rejestrowanie skryptu service worker

W tym kroku napiszesz kod uruchamiany gdy użytkownik kliknie Zarejestruj skrypt service worker w interfejsie aplikacji. Ten kod spowoduje zarejestrowanie public/service-worker.js jako skryptu service worker.

1. W osadzonym edytorze błędów otwórz public/index.js. Zastąp funkcję registerServiceWorker tym kodem:

   // Use the Service Worker API to register a service worker.
   async function registerServiceWorker() {
     await navigator.serviceWorker.register('./service-worker.js')
     updateUI();
   }
   

   Pamiętaj, że registerServiceWorker używa deklaracji async function, aby ułatwić obsługę obietnic. W ten sposób możesz await uzyskać wartość z Promise. Na przykład powyższa funkcja czeka na wynik zarejestrowania skryptu service worker przed zaktualizowaniem interfejsu użytkownika. Więcej informacji znajdziesz na stronie await w MDN.

2. Teraz gdy użytkownik może zarejestrować skrypt service worker, możesz uzyskać odwołanie do obiektu rejestracji skryptu service worker. W public/index.js zastąp funkcję getRegistration tym kodem:

   // Get the current service worker registration.
   function getRegistration() {
     return navigator.serviceWorker.getRegistration();
   }
   

   Powyższa funkcja korzysta z funkcji Interfejs Service Worker API , aby pobrać bieżącą rejestrację skryptu service worker, jeśli istnieje. Dzięki temu odniesienie do rejestracji skryptu service worker jest nieco wygodniejsze.

• Aby zakończyć rejestrację skryptu service worker, dodaj kod umożliwiający wyrejestrowanie tego skryptu. Zastąp funkcję unRegisterServiceWorker tym kodem:

  // Unregister a service worker, then update the UI.
  async function unRegisterServiceWorker() {
    // Get a reference to the service worker registration.
    let registration = await getRegistration();
    // Await the outcome of the unregistration attempt
    // so that the UI update is not superceded by a
    // returning Promise.
    await registration.unregister();
    updateUI();
  }
  

Na karcie, na której przeglądasz aktywną aplikację, załaduj ponownie stronę. Przyciski Zarejestruj skrypt service worker i Wyrejestruj skrypt service worker powinny już działać.

Wysyłaj powiadomienia do skryptu service worker

W tym kroku napiszesz kod, który będzie uruchamiany, gdy użytkownik kliknie Wyślij powiadomienie w interfejsie aplikacji. Ten kod spowoduje utworzenie powiadomienia, sprawdzenie, czy skrypt service worker jest zarejestrowany, a następnie wysłanie powiadomienia do skryptu service worker za pomocą jego metody postMessage.

W umieszczonym na stronie edytora Glitch otwórz plik public/index.js i zastąp funkcję sendNotification tym kodem:

// Create and send a test notification to the service worker.
async function sendNotification() {
  // Use a random number as part of the notification data
  // (so you can tell the notifications apart during testing!)
  let randy = Math.floor(Math.random() * 100);
  let notification = {
    title: 'Test ' + randy,
    options: { body: 'Test body ' + randy }
  };
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Check that the service worker registration exists.
  if (registration) {
    // Check that a service worker controller exists before
    // trying to access the postMessage method.
    if (navigator.serviceWorker.controller) {
      navigator.serviceWorker.controller.postMessage(notification);
    } else {
      console.log('No service worker controller found. Try a soft reload.');
    }
  }
}

Działanie tego kodu:

• sendNotification jest funkcją asynchroniczną, więc możesz użyć await, aby uzyskać odniesienie do rejestracji skryptu service worker.

• Metoda postMessage skryptu service worker wysyła dane z aplikacji do skryptu service worker. Więcej informacji znajdziesz w dokumentacji MDN dotyczącej postMessage.

• Przed próbą uzyskania dostępu do funkcji postMessage kod sprawdza obecność właściwości navigator.serviceWorker.controller. navigator.serviceWorker.controller będzie mieć wartość null, jeśli nie będzie żadnego aktywnego skryptu service worker lub jeśli strona została wymuszona na odświeżeniu (Shift+Załaduj ponownie). Więcej informacji znajdziesz w dokumentacji kontrolera ServiceWorker w MDN.

Obsługa powiadomień w skrypcie service worker

W tym kroku napiszesz w skrypcie service worker, który będzie obsługiwać publikowane w nim wiadomości i wyświetlać użytkownikowi powiadomienia.

W osadzonym edytorze błędów otwórz public/service-worker.js. Dodaj ten kod na końcu pliku:

// Show notification when received
self.addEventListener('message', (event) => {
  let notification = event.data;
  self.registration.showNotification(
    notification.title,
    notification.options
  ).catch((error) => {
    console.log(error);
  });
});

Oto krótkie wyjaśnienie:

• self jest odwołaniem do skryptu service worker.

• Chociaż skrypt service worker obsługuje teraz wyświetlanie powiadomień, główny interfejs aplikacji nadal odpowiada za uzyskanie od użytkownika zgody na wyświetlanie powiadomień. Jeśli nie przyznasz uprawnień, obietnica zwrócona przez aplikację showNotification zostanie odrzucona. Powyższy kod używa bloku catch, aby uniknąć nieobsłużonego błędu odrzucenia Promise i lepiej rozwiązać ten problem.

Jeśli nie udało się rozwiązać problemu, otwórz stronę glitch.com/edit/#!/codelab-notifications-service-worker-completed, aby znaleźć kompletny kod.

Przejdź do następnego ćwiczenia z programowania w tej serii: Tworzenie serwera powiadomień push.