Korzystanie z interfejsu Notification API

Interfejs API chrome.notifications umożliwia tworzenie powiadomień za pomocą szablonów i wyświetlanie użytkownikom tych powiadomień w obszarze powiadomień użytkownika:

Wygląd

Szczegółowe powiadomienia są dostępne na 4 różne rodzaje: podstawowe, graficzne, listy i postępy. Wszystkie powiadomienia zawierają tytuł, wiadomość, małą ikonę wyświetlaną po lewej stronie wiadomości oraz pole contextMessage, które wyświetla się jako trzecie pole tekstowe, ale jest wyróżnione jaśniejszą czcionką.

Podstawowe powiadomienie:

W powiadomieniach o liście wyświetlana jest dowolna liczba elementów listy:

Powiadomienia o obrazach obejmują podgląd obrazu:

Powiadomienia o postępach pokazują pasek postępu:

jak się zachowują.

W ChromeOS powiadomienia są wyświetlane w obszarze powiadomień użytkownika i pozostają w obszarze powiadomień, dopóki użytkownik ich nie zamknie. W obszarze powiadomień są zapisane wszystkie nowe powiadomienia. Gdy użytkownik zobaczy powiadomienia w obszarze powiadomień, licznik jest resetowany do zera.

Powiadomieniam można przypisać priorytet z zakresu od -2 do 2. Priorytety mniejsze niż 0 są wyświetlane w Centrum powiadomień ChromeOS, a na innych platformach powodują wystąpienie błędu. Domyślnym priorytetem jest 0. Priorytety większe niż 0 są wyświetlane przy dłuższym czasie trwania, a w obszarze powiadomień może być wyświetlanych więcej powiadomień o wysokim priorytecie.

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

Poza wyświetlaniem informacji wszystkie typy powiadomień mogą zawierać maksymalnie 2 działania. Gdy użytkownik kliknie określone działanie, rozszerzenie może zareagować w ten sposób. Gdy na przykład użytkownik kliknie Odpowiedz, otworzy się aplikacja do poczty e-mail i będzie mógł odpowiedzieć:

Jak je tworzyć

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

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

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

Tworzenie podstawowego powiadomienia

Wszystkie typy szablonów (basic, image, list i progress) muszą zawierać powiadomienie title i message, a także element iconUrl będący linkiem do małej ikony wyświetlanej po lewej stronie wiadomości 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

Typ szablonu image zawiera też element imageUrl, czyli link do obrazu wyświetlanego w powiadomieniu. Pamiętaj, że obrazy nie są wyświetlane użytkownikom korzystającym z systemu macOS.

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

Utwórz powiadomienia z listą

Szablon list wyświetla items w formacie listy. Pamiętaj, że w systemie macOS użytkownicy widzą 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
}

Wysłuchiwanie zdarzeń i odpowiadanie na nie

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

Detektor zdarzeń:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

Moduł obsługi zdarzeń:

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

Rozważ dodanie detektorów i modułów obsługi zdarzeń do skryptu service worker, co umożliwi wyświetlanie powiadomień nawet wtedy, gdy rozszerzenie nie jest uruchomione.