Uitgebreide meldingen-API

Platformverschil: In Chrome versie 59 worden meldingen anders weergegeven voor Mac OS X-gebruikers. In plaats van de eigen meldingen van Chrome zien gebruikers de native Mac OS X-meldingen. Lees meer in dit artikel .

Met de uitgebreide notificatie-API kunt u notificaties maken met behulp van sjablonen en deze notificaties aan gebruikers tonen in hun systeemvak:

Meldingen in het systeemvak

Hoe ze eruitzien

Uitgebreide meldingen zijn er in vier verschillende varianten: basis, afbeelding, lijst en voortgang. Alle meldingen bevatten een titel, een bericht, een klein pictogram links van het bericht en een contextMessage-veld, dat als een derde tekstveld in een lichter lettertype wordt weergegeven.

Een eenvoudige afbeelding:

Basismelding

Lijstmeldingen tonen een willekeurig aantal lijstitems:

Lijstmelding

Afbeeldingsmeldingen bevatten een voorbeeldweergave van de afbeelding:

Afbeeldingsmelding

Voortgangsmeldingen tonen een voortgangsbalk:

Voortgangsmelding

Hoe ze zich gedragen

Op ChromeOS verschijnen meldingen in het systeemvak van de gebruiker en blijven daar staan ​​totdat de gebruiker ze sluit. Het systeemvak houdt een teller bij van alle nieuwe meldingen. Zodra een gebruiker de meldingen in het systeemvak heeft gezien, wordt de teller gereset naar nul.

Aan meldingen kan een prioriteit tussen -2 en 2 worden toegekend. Prioriteiten < 0 worden weergegeven in het ChromeOS-meldingencentrum en veroorzaken een foutmelding op andere platforms. Prioriteit 0 is de standaardprioriteit. Prioriteiten > 0 worden steeds langer weergegeven en meldingen met een hogere prioriteit kunnen in het systeemvak worden getoond.

Naast het weergeven van informatie kunnen alle notificatietypen maximaal twee actie-items bevatten. Wanneer gebruikers op een actie-item klikken, kan uw app reageren met de bijbehorende actie. Als de gebruiker bijvoorbeeld op 'Beantwoorden' klikt, wordt de e-mailapp geopend en kan de gebruiker het antwoord voltooien.

Actie in melding

Hoe ontwikkel je ze?

Om deze API te gebruiken, roept u de methode notifications.create aan en geeft u de notificatiegegevens door via de parameter options :

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

De parameter notifications.NotificationOptions moet een parameter notifications.TemplateType bevatten, die de beschikbare notificatiegegevens definieert en hoe deze gegevens worden weergegeven.

Maak een eenvoudige melding aan.

Alle sjabloontypen ( basic , image , list en progress ) moeten een title en message bevatten, evenals een iconUrl , een link naar een klein pictogram dat links van het meldingsbericht wordt weergegeven.

Hier is een voorbeeld van een basic :

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

Maak een melding met afbeelding

Het sjabloontype voor image bevat ook een imageUrl , een link naar een afbeelding die in de melding wordt weergegeven:

Platformverschil: Afbeeldingen worden niet weergegeven aan gebruikers die Chrome versie 59 of hoger gebruiken op Mac OS X. 
var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  imageUrl: "url_to_preview_image"
}

In Chrome-apps moeten deze URL's, vanwege een strikt Content Security Policy, verwijzen naar een lokale bron of een blob- of data-URL gebruiken. Gebruik een beeldverhouding van 3:2; anders wordt de afbeelding omlijst door een zwarte rand.

Maak een lijstmelding aan

De list geeft items weer in een lijstformaat:

Platformverschil: In Chrome versie 59 en hoger op Mac OS X wordt alleen het eerste lijstitem weergegeven. 
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."}]
}

Voortgangsmelding maken

De progress toont een voortgangsbalk waarbij de huidige voortgang varieert van 0 tot 100:

Platformverschil: In Chrome versie 59+ op Mac OS X wordt de voortgangsbalk weergegeven als een percentage in de titel van de melding in plaats van een voortgangsbalk. 
var opt = {
  type: "progress",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  progress: 42
}

Luisteren naar en reageren op gebeurtenissen

Alle notificaties kunnen gebeurtenislisteners en gebeurtenisafhandelaars bevatten die reageren op gebruikersacties (zie chrome.events ). U kunt bijvoorbeeld een gebeurtenisafhandelaar schrijven om te reageren op een notifications.onButtonClicked -gebeurtenis.

Gebeurtenisluisteraar:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

Gebeurtenisafhandelaar:

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

Overweeg om gebeurtenislisteners en -handlers op te nemen in de gebeurtenispagina , zodat meldingen kunnen verschijnen, zelfs wanneer de app of extensie niet actief is.