Interfejs API rozszerzonych powiadomień

Różnica między platformami: w Chrome w wersji 59 powiadomienia wyświetlają się inaczej w przypadku użytkowników Mac OS X. Zamiast powiadomień Chrome użytkownicy widzą natywne powiadomienia macOS X. Więcej informacji znajdziesz w tym artykule

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

Powiadomienia w systemowym pasku zadań

Wygląd

Powiadomienia rozszerzone 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 jest wyświetlane jako trzecie pole tekstowe jaśniejszą czcionką.

Podstawowy obraz:

Podstawowe powiadomienie

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

Powiadomienie dotyczące listy

Powiadomienia o obrazach obejmują podgląd obrazu:

Powiadomienie o obrazie

W powiadomieniach o postępach widoczny jest pasek postępu:

Powiadomienie o postępach

jak się zachowują.

W ChromeOS powiadomienia są wyświetlane w obszarze powiadomień użytkownika i pozostają w tym obszarze, dopóki użytkownik ich nie zamknie. W obszarze powiadomień znajdują się wszystkie nowe powiadomienia. Gdy użytkownik zobaczy powiadomienie w obszarze powiadomień, licznik jest wyzerowany.

Powiadomienia mogą mieć priorytet z zakresu od -2 do 2. Priorytety < 0 są wyświetlane w centrum powiadomień ChromeOS, a na innych platformach powoduje wystąpienie błędu. Domyślny priorytet 0. Priorytety > 0 są wyświetlane przy wydłużonym czasie trwania, a w obszarze powiadomień można wyświetlać więcej powiadomień o wysokim priorytecie.

Wszystkie typy powiadomień nie tylko wyświetlają informacje, ale mogą też zawierać maksymalnie 2 działania. Gdy użytkownik kliknie działanie, aplikacja może zareagować w ten sposób. Jeśli na przykład użytkownik kliknie „Odpowiedz”, otworzy się aplikacja do poczty e-mail i będzie mógł odpowiedzieć na wiadomość:

Działanie w powiadomieniu

Jak je tworzyć

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

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

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

Utwórz podstawowe powiadomienie

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"
}

Utwórz powiadomienie o obrazie

Szablon image zawiera też element imageUrl, czyli link do obrazu wyświetlanego w powiadomieniu na podglądzie:

Różnica między platformami: obrazy nie będą wyświetlane użytkownikom korzystającym z Chrome w wersji 59 lub nowszej na urządzeniach z systemem macOS X.
var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  imageUrl: "url_to_preview_image"
}

Ze względu na ścisłą politykę bezpieczeństwa treści w aplikacjach Chrome adresy URL muszą wskazywać zasób lokalny albo korzystać z adresu URL obiektu blob lub danych. Zastosuj współczynnik proporcji obrazu 3:2. W przeciwnym razie obraz będzie otoczony czarnym obramowaniem.

Utwórz powiadomienie dotyczące listy

Szablon list wyświetla wartość items w formacie listy:

Różnica między platformami: w Chrome w wersji 59 lub nowszej na urządzeniach z Mac OS X jest wyświetlany tylko pierwszy element listy.
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."}]
}

Utwórz powiadomienie o postępach

Szablon progress wyświetla pasek postępu z bieżącym zakresem postępu od 0 do 100:

Różnica między platformą
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ć detektory zdarzeń i moduły obsługi zdarzeń, które reagują na działania użytkownika (patrz chrome.events). Możesz na przykład utworzyć moduł obsługi zdarzeń, który będzie reagował 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ż umieszczenie detektorów i modułów obsługi zdarzeń na stronie zdarzenia, dzięki czemu powiadomienia będą mogły pojawiać się nawet wtedy, gdy aplikacja lub rozszerzenie nie są uruchomione.