Korzystanie z interfejsu Notification API

chrome.notifications API umożliwia tworzenie i wyświetlanie powiadomień za pomocą szablonów. powiadomienia wysyłane do użytkowników w obszarze powiadomień:

Jak wyglądają

Rozszerzone powiadomienia są dostępne w 4 wariantach: podstawowych, graficznych, list i postępach. Wszystkie powiadomienia obejmują tytuł, wiadomość oraz małą ikonę wyświetlaną po lewej stronie powiadomienia; wiadomość oraz pole contextMessage, które jest wyświetlane jako trzecie pole tekstowe zapisane jaśniejszą czcionką.

Podstawowe powiadomienie:

Powiadomienia o listach zawierają dowolną liczbę elementów listy:

Powiadomienia dotyczące obrazów obejmują podgląd obrazu:

W powiadomieniach o postępach widać pasek postępu:

jak się zachowują.

W ChromeOS powiadomienia są wyświetlane w obszarze powiadomień użytkownika i pozostają w tym obszarze do momentu, odrzuca reklamy. W tym obszarze znajdują się wszystkie nowe powiadomienia. Gdy użytkownik wyświetli w obszarze powiadomień, licznik zostanie zresetowany.

Powiadomieniam można przypisać priorytet z zakresu od -2 do 2. W ChromeOS wyświetlane są priorytety mniejsze niż 0 i powodować błąd na innych platformach. Domyślny priorytet to 0. Priorytety większe niż 0 są wyświetlane w przypadku wydłużenia czasu trwania. W przypadku przekroczenia większej liczby powiadomień o wysokim priorytecie można wysłać więcej powiadomień w obszarze powiadomień.

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

Wszystkie typy powiadomień oprócz wyświetlania informacji mogą zawierać maksymalnie dwa działania. Gdy użytkownik kliknie działanie, rozszerzenie może zareagować odpowiednim działaniem. Przykład: gdy użytkownik kliknie Odpowiedz, otworzy się aplikacja do poczty e-mail, w której użytkownik będzie mógł dokończyć odpowiedź:

Jak je tworzyć

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

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

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

Tworzenie powiadomienia podstawowego

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

Oto przykład szablonu basic:

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

Użyj obrazu

Szablon typu image zawiera też element imageUrl, który jest linkiem do obrazu widocznego na podglądzie. w powiadomieniu. Pamiętaj, że obrazy nie są wyświetlane użytkownikom systemów macOS.

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

Powiadomienie o tworzeniu 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
}

Wykrywaj zdarzenia i reaguj na nie

Wszystkie powiadomienia mogą zawierać detektory zdarzeń i moduły obsługi zdarzeń, które reagują na działania użytkowników (zobacz chrome.events). Możesz na przykład napisać moduł obsługi zdarzeń, który odpowie na notifications.onButtonClicked.

Detektor zdarzeń:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

Moduł obsługi zdarzeń:

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

Rozważ uwzględnienie detektorów i modułów obsługi zdarzeń w mechanizmie Service Worker, aby powiadomienia mogą pojawiać się nawet wtedy, gdy rozszerzenie nie jest uruchomione.