Met de chrome.notifications API kunt u meldingen maken met behulp van sjablonen en deze meldingen aan gebruikers weergeven in het systeemvak van de gebruiker:
Hoe ze eruitzien
Uitgebreide meldingen zijn er in vier verschillende smaken: basis, afbeelding, lijst en voortgang. Alle meldingen bevatten een titel, bericht, een klein pictogram dat links van het meldingsbericht wordt weergegeven, en een contextMessage , dat wordt weergegeven als een derde tekstveld in een lichter kleurenlettertype.
Een basismelding:
Lijstmeldingen geven een willekeurig aantal lijstitems weer:
Afbeeldingsmeldingen bevatten een afbeeldingsvoorbeeld:
Voortgangsmeldingen tonen een voortgangsbalk:
Hoe ze zich gedragen
Op ChromeOS verschijnen meldingen in het systeemvak van een gebruiker en blijven in het systeemvak totdat de gebruiker ze sluit. Het systeemvak houdt een telling bij van alle nieuwe meldingen. Zodra een gebruiker de meldingen in het systeemvak ziet, wordt de telling op nul gezet.
Aan meldingen kan een prioriteit tussen -2 en 2 worden toegewezen. Prioriteiten kleiner dan 0 worden weergegeven in het ChromeOS-meldingscentrum en veroorzaken een fout op andere platforms. De standaardprioriteit is 0. Prioriteiten groter dan 0 worden weergegeven voor een langere duur en er kunnen meer meldingen met hoge prioriteit worden weergegeven in het systeemvak.
De priority heeft geen invloed op de volgorde van meldingen op macOS.
Naast het weergeven van informatie kunnen alle meldingstypen maximaal twee actie-items bevatten. Wanneer gebruikers op een actie-item klikken, kan uw extensie reageren met de juiste actie. Wanneer de gebruiker bijvoorbeeld op Beantwoorden klikt, wordt de e-mailapp geopend en kan de gebruiker het antwoord voltooien:
Hoe je ze kunt ontwikkelen
Om deze API te gebruiken, roept u de notifications.create() -methode aan en geeft u de meldingsdetails door met behulp van de options :
await chrome.notifications.create(id, options);
De notifications.NotificationOptions moeten een notifications.TemplateType bevatten, waarin de beschikbare meldingsdetails worden gedefinieerd en hoe deze details worden weergegeven.
Maak een basismelding
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"
}
Gebruik een afbeelding
Het image bevat ook een imageUrl , een link naar een afbeelding waarvan een voorbeeld in de melding wordt weergegeven. Houd er rekening mee dat afbeeldingen niet worden getoond aan gebruikers op macOS.
var opt = {
type: "image",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
imageUrl: "url_to_preview_image"
}
Maak een lijstmelding
De list geeft items weer in een lijstindeling. Houd er rekening mee dat alleen het eerste item wordt weergegeven voor gebruikers op macOS.
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
}
Luister naar en reageer op gebeurtenissen
Alle meldingen kunnen gebeurtenislisteners en gebeurtenishandlers bevatten die reageren op gebruikersacties (zie chrome.events ). U kunt bijvoorbeeld een gebeurtenishandler schrijven om te reageren op een notifications.onButtonClicked gebeurtenis.
Gebeurtenisluisteraar:
chrome.notifications.onButtonClicked.addListener(replyBtnClick);
Gebeurtenishandler:
function replyBtnClick {
//Write function to respond to user action.
}
Overweeg om gebeurtenislisteners en handlers op te nemen in de servicemedewerker, zodat er ook meldingen kunnen verschijnen als de extensie niet actief is.