Sposób działania powiadomień

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

Do tej pory omówiliśmy opcje, które zmieniają wygląd powiadomienia. Dostępne są też opcje, które zmieniają sposób działania powiadomień.

Domyślnie wywołanie showNotification() tylko z opcjami wizualnymi będzie miało te zachowania:

  • Kliknięcie powiadomienia nic nie daje.
  • Każde nowe powiadomienie jest wyświetlane po kolei. Przeglądarka nie będzie w żaden sposób zwijać powiadomień.
  • Platforma może odtworzyć dźwięk lub wywołać wibracje urządzenia użytkownika (w zależności od platformy).
  • Na niektórych platformach powiadomienie zniknie po krótkim czasie, a na innych będzie widoczne, dopóki użytkownik nie wejdzie z nim w interakcję. (Możesz na przykład porównać powiadomienia na Androidzie i komputerze).

W tej sekcji przyjrzymy się, jak można zmienić te domyślne działania, używając samych opcji. Są one stosunkowo łatwe do wdrożenia i wykorzystania.

Zdarzenie kliknięcia powiadomienia

Gdy użytkownik kliknie powiadomienie, domyślnie nic się nie dzieje. Nie powoduje to nawet zamknięcia ani usunięcia powiadomienia.

Zwykle kliknięcie powiadomienia powoduje jego zamknięcie i wykonanie innej czynności (np. otwarcie okna lub wywołanie interfejsu API aplikacji).

Aby to zrobić, musisz dodać detektor zdarzeń 'notificationclick' do skryptu service worker. Ta funkcja będzie wywoływana po kliknięciu powiadomienia.

self.addEventListener('notificationclick', (event) => {
  const clickedNotification = event.notification;
  clickedNotification.close();

  // Do something as the result of the notification click
  const promiseChain = doSomething();
  event.waitUntil(promiseChain);
});

Jak widać w tym przykładzie, kliknięte powiadomienie jest dostępne jako event.notification. Dzięki temu możesz uzyskać dostęp do właściwości i metod powiadomienia. W tym przypadku wywołujesz metodę close() i wykonujesz dodatkowe czynności.

Działania

Działania umożliwiają utworzenie kolejnego poziomu interakcji z użytkownikami, który wykracza poza kliknięcie powiadomienia.

Przyciski

W poprzedniej sekcji pokazaliśmy, jak zdefiniować przyciski poleceń podczas wywoływania showNotification():

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      title: 'Coffee',
      type: 'button',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

Jeśli użytkownik kliknie przycisk polecenia, sprawdź wartość event.action w zdarzeniu noticationclick, aby dowiedzieć się, który przycisk polecenia został kliknięty.

event.action będzie zawierać wartość action ustawioną w opcjach. W powyższym przykładzie wartości event.action mogą być następujące: 'coffee-action', 'doughnut-action', 'gramophone-action' lub 'atom-action'.

Dzięki temu możemy wykrywać kliknięcia powiadomień lub działań w ten sposób:

self.addEventListener('notificationclick', (event) => {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'coffee-action':
      console.log("User ❤️️'s coffee.");
      break;
    case 'doughnut-action':
      console.log("User ❤️️'s doughnuts.");
      break;
    case 'gramophone-action':
      console.log("User ❤️️'s music.");
      break;
    case 'atom-action':
      console.log("User ❤️️'s science.");
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});

Odpowiedzi w tekście

W poprzedniej sekcji pokazaliśmy, jak dodać do powiadomienia odpowiedź w wątku:

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

event.reply będzie zawierać wartość wpisaną przez użytkownika w polu do wprowadzania danych:

self.addEventListener('notificationclick', (event) => {
  const reply = event.reply;

  // Do something with the user's reply
  const promiseChain = doSomething(reply);
  event.waitUntil(promiseChain);
});

Tag

Opcja tag to zasadniczo identyfikator ciągu znaków, który „grupuje” powiadomienia, co ułatwia określenie, jak wiele powiadomień jest wyświetlanych użytkownikowi. Najłatwiej wyjaśnić to na przykładzie.

Wyświetlmy powiadomienie i dodajmy do niego tag 'message-group-1'. Powiadomienie wyświetlimy za pomocą tego kodu:

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

Wyświetli się pierwsze powiadomienie.

Pierwsze powiadomienie z tagiem grupy wiadomości 1.

Wyświetlmy drugie powiadomienie z nowym tagiem 'message-group-2', na przykład tak:

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

Spowoduje to wyświetlenie użytkownikowi drugiego powiadomienia.

2 powiadomienia, w których drugi tag należy do grupy wiadomości 2.

Teraz wyświetlimy trzecie powiadomienie, ale ponownie użyjemy pierwszego tagu 'message-group-1'. Spowoduje to zamknięcie pierwszego powiadomienia i zastąpienie go nowym.

const title = 'Notification 3 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

Teraz mamy 2 powiadomienia, mimo że metoda showNotification() została wywołana 3 razy.

Dwa powiadomienia, z których pierwsze jest zastępowane przez trzecie.

Opcja tag to po prostu sposób grupowania wiadomości, dzięki któremu wszystkie wyświetlane obecnie stare powiadomienia zostaną zamknięte, jeśli mają ten sam tag co nowe powiadomienie.

Ważnym szczegółem dotyczącym używania tag jest to, że gdy zastępuje powiadomienie, robi to bez dźwięku i wibracji.

W takiej sytuacji przydaje się opcja renotify.

Powiadom ponownie

W momencie pisania tego artykułu dotyczy to głównie urządzeń mobilnych. Ustawienie tej opcji powoduje, że nowe powiadomienia wibrują i odtwarzają dźwięk systemowy.

W niektórych sytuacjach możesz chcieć, aby powiadomienie zastępujące powiadomiło użytkownika, a nie aktualizowało się bez powiadomienia. Dobrym przykładem są aplikacje do obsługi czatu. W takim przypadku należy ustawić tag i renotify na true.

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);

Tryb cichy

Ta opcja umożliwia wyświetlanie nowego powiadomienia, ale zapobiega działaniu domyślnemu, czyli wibracjom, dźwiękowi i włączeniu wyświetlacza urządzenia.

To idealne rozwiązanie, jeśli powiadomienia nie wymagają natychmiastowej uwagi użytkownika.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

Wymaga interakcji

Chrome na komputerze będzie wyświetlać powiadomienia przez określony czas, a potem je ukryje. Chrome na Androidzie nie zachowuje się w ten sposób. Powiadomienia są wyświetlane, dopóki użytkownik nie wejdzie z nimi w interakcję.

Aby powiadomienie było widoczne, dopóki użytkownik nie wejdzie z nim w interakcję, dodaj opcję requireInteraction. Powiadomienie będzie wyświetlane, dopóki użytkownik go nie zamknie lub nie kliknie.

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

Używaj tej opcji z rozwagą. Wyświetlanie powiadomienia i zmuszanie użytkownika do przerwania wykonywanej czynności, aby je zamknąć, może być frustrujące.

W następnej sekcji przyjrzymy się niektórym typowym wzorcom używanym w internecie do zarządzania powiadomieniami i wykonywania działań, takich jak otwieranie stron po kliknięciu powiadomienia.

Co dalej

Ćwiczenia w Codelabs