Korzystanie z interfejsu Notification API

browser.notificationsInterfejs API umożliwia tworzenie powiadomień za pomocą szablonów i wyświetlanie ich użytkownikom w obszarze powiadomień:

Wygląd

Powiadomienia z elementami rozszerzonymi występują w 4 wariantach: podstawowym, z obrazem, z listą i z postępem. Wszystkie powiadomienia zawierają tytuł, wiadomość, małą ikonę wyświetlaną po lewej stronie wiadomości powiadomienia i pole contextMessage, które jest wyświetlane jako trzecie pole tekstowe w jaśniejszym kolorze czcionki.

Podstawowe powiadomienie:

Powiadomienia w formie listy mogą zawierać dowolną liczbę elementów:

Powiadomienia z obrazami zawierają podgląd obrazu:

Powiadomienia o postępie zawierają pasek postępu:

jak się zachowują.

W ChromeOS powiadomienia pojawiają się w obszarze powiadomień użytkownika i pozostają tam, dopóki użytkownik ich nie zamknie. W obszarze powiadomień wyświetlana jest liczba wszystkich nowych powiadomień. Gdy użytkownik zobaczy powiadomienia w obszarze powiadomień, licznik zostanie zresetowany do zera.

Powiadomieniom można przypisać priorytet od -2 do 2. Priorytety mniejsze niż 0 są wyświetlane w centrum powiadomień ChromeOS i powodują błąd na innych platformach. Domyślny priorytet to 0. Priorytety większe niż 0 są wyświetlane przez dłuższy czas, a w obszarze powiadomień może się pojawiać więcej powiadomień o wysokim priorytecie.

Ustawienie priority nie wpływa na kolejność powiadomień w systemie macOS.

Oprócz wyświetlania informacji wszystkie typy powiadomień mogą zawierać maksymalnie 2 elementy działania. Gdy użytkownicy klikną element działania, rozszerzenie może zareagować odpowiednim działaniem. Gdy na przykład użytkownik kliknie Odpowiedz, otworzy się aplikacja do poczty e-mail i użytkownik będzie mógł dokończyć odpowiedź:

Jak je rozwijać

Aby użyć tego interfejsu API, wywołaj metodę notifications.create(), przekazując szczegóły powiadomienia za pomocą parametru options:

await browser.notifications.create(id, options);

notifications.NotificationOptions musi zawierać element notifications.TemplateType, który określa dostępne szczegóły powiadomienia i sposób ich wyświetlania.

Tworzenie podstawowego powiadomienia

Wszystkie typy szablonów (basic, image, list i progress) muszą zawierać powiadomienie title i message oraz atrybut iconUrl, czyli link do małej ikony wyświetlanej po lewej stronie komunikatu powiadomienia.

Oto przykład szablonu basic:

var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon"
}

Używanie obrazu

Typ szablonu image zawiera też element imageUrl, czyli link do obrazu, który jest wyświetlany w podglądzie w powiadomieniu. Pamiętaj, że obrazy nie są wyświetlane użytkownikom systemu macOS.

var opt = {
  type: "image",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  imageUrl: "url_to_preview_image"
}

Tworzenie powiadomienia w formie listy

Szablon list wyświetla items w formacie listy. Pamiętaj, że użytkownikom systemu macOS wyświetlany jest tylko pierwszy element.

var opt = {
  type: "list",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  items: [{ title: "Item1", message: "This is item 1."},
          { title: "Item2", message: "This is item 2."},
          { title: "Item3", message: "This is item 3."}]
}```

### Create progress notification {: #progress }

The `progress` template displays a progress bar where current progress ranges from 0 to 100. On macOS the progress bar displays as a percentage value in the notification title instead of in the progress bar.

```js
var opt = {
  type: "progress",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  progress: 42
}

Nasłuchiwanie zdarzeń i odpowiadanie na nie

Wszystkie powiadomienia mogą zawierać odbiorniki i moduły obsługi zdarzeń, które reagują na działania użytkownika (patrz browser.events). Możesz na przykład napisać moduł obsługi zdarzeń, który będzie reagować na zdarzenie notifications.onButtonClicked.

Detektor zdarzeń:

browser.notifications.onButtonClicked.addListener(replyBtnClick);

Moduł obsługi zdarzeń:

function replyBtnClick {
    //Write function to respond to user action.
}

Rozważ umieszczenie detektorów zdarzeń i procedur obsługi w skrypcie service worker, aby powiadomienia mogły się pojawiać nawet wtedy, gdy rozszerzenie nie jest uruchomione.