Notifications API का इस्तेमाल करना

chrome.notifications एपीआई की मदद से, टेंप्लेट का इस्तेमाल करके सूचनाएं बनाई जा सकती हैं और उन्हें दिखाया जा सकता है उपयोगकर्ता की सिस्टम ट्रे में उपयोगकर्ताओं को सूचनाएं भेजने के लिए:

सिस्टम उपयोगकर्ता ट्रे में सूचनाएं

स्ट्रक्चर्ड स्निपेट कैसे दिखते हैं

बेहतर सूचनाएं चार अलग-अलग फ़्लेवर में आती हैं: बेसिक, इमेज, लिस्ट, और प्रोग्रेस. सभी सूचनाओं में टाइटल, मैसेज, और सूचना की बाईं ओर दिखने वाला छोटा आइकॉन शामिल होता है मैसेज और contextMessage फ़ील्ड शामिल हैं, जो हल्के रंग के फ़ॉन्ट में तीसरे टेक्स्ट फ़ील्ड के तौर पर दिखते हैं.

बुनियादी सूचना:

सामान्य सूचना

सूची की सूचनाएं, सूची में आइटम की संख्या दिखाती हैं:

सूची की सूचना

इमेज की सूचनाओं में इमेज की झलक शामिल होती है:

इमेज की सूचना

प्रोग्रेस की सूचनाओं में प्रोग्रेस बार दिखता है:

प्रोग्रेस की सूचना

उनका व्यवहार कैसा है

ChromeOS पर, सूचनाएं उपयोगकर्ता के सिस्टम ट्रे में दिखती हैं. साथ ही, ये सूचनाएं सिस्टम ट्रे में तब तक रहती हैं, जब तक उपयोगकर्ता उन्हें खारिज कर देता है. सिस्टम ट्रे, सभी नई सूचनाओं की गिनती रखती है. जब कोई उपयोगकर्ता सूचनाएं मिलने पर, संख्या शून्य पर रीसेट हो जाती है.

सूचनाओं के लिए, प्राथमिकता को दो से दो के बीच रखा जा सकता है. ChromeOS में, 0 से कम प्राथमिकताएं दिखाई जाती हैं सूचना केंद्र पर जाकर, अन्य प्लैटफ़ॉर्म पर गड़बड़ी का मैसेज दिखा सकता है. डिफ़ॉल्ट प्राथमिकता 0 है. अवधि बढ़ाने के लिए, प्राथमिकता 0 से ज़्यादा दिखाई जाती है. साथ ही, ज़्यादा प्राथमिकता वाली सूचनाएं जो सिस्टम ट्रे में दिखती है.

macOS पर सूचनाओं के क्रम पर, priority सेटिंग का कोई असर नहीं पड़ता.

जानकारी दिखाने के अलावा, सभी सूचनाओं में ज़्यादा से ज़्यादा दो ऐक्शन आइटम शामिल हो सकते हैं. जब उपयोगकर्ता किसी ऐक्शन आइटम पर क्लिक करते हैं, तो आपका एक्सटेंशन सही कार्रवाई के साथ जवाब दे सकता है. उदाहरण के लिए, जब उपयोगकर्ता जवाब दें पर क्लिक करता है, तो ईमेल ऐप्लिकेशन खुल जाता है और उपयोगकर्ता जवाब दे सकता है:

सूचना में कार्रवाई

उन्हें कैसे डेवलप करें

इस एपीआई का इस्तेमाल करने के लिए, notifications.create() तरीके को कॉल करें. इसके लिए, आपको सूचना देने की सुविधा चालू करनी होगी. इसके लिए, options पैरामीटर:

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

notifications.NotificationOptions में notifications.TemplateType शामिल होना चाहिए, जो सूचना की उपलब्ध जानकारी और उसे दिखाने के तरीके के बारे में बताता है.

बुनियादी सूचना बनाना

सभी तरह के टेंप्लेट (basic, image, list, और progress) में सूचना title और message और iconUrl होते हैं, जो एक छोटे आइकॉन का लिंक होता है जो बाईं ओर दिखाई देता है उस ईमेल पते से,

यहां basic टेंप्लेट का एक उदाहरण दिया गया है:

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

इमेज का इस्तेमाल करें

image टेंप्लेट में एक imageUrl भी शामिल होता है. यह उस इमेज का लिंक होता है जिसकी झलक देखी जा चुकी है को भी शामिल किया जाएगा. ध्यान दें कि macOS पर इमेज उपयोगकर्ताओं को नहीं दिखाई जाती हैं.

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

सूची बनाने की सूचना

list टेंप्लेट, items को सूची के फ़ॉर्मैट में दिखाता है. ध्यान दें कि 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
}

इवेंट सुनें और उनका जवाब दें

सभी सूचनाओं में इवेंट लिसनर और इवेंट हैंडलर शामिल हो सकते हैं जो उपयोगकर्ता की कार्रवाइयों का जवाब देते हैं (देखें chrome.events). उदाहरण के लिए, notifications.onButtonClicked इवेंट.

इवेंट लिसनर:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

इवेंट हैंडलर:

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

सर्विस वर्कर में इवेंट लिसनर और हैंडलर को शामिल करने के बारे में सोचें, ताकि सूचनाएं मिल सकें एक्सटेंशन न चलने पर भी पॉप-अप हो सकता है.