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

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

वे कैसी दिखती हैं

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

एक सामान्य सूचना:

सूची से जुड़ी सूचनाएं, सूची में मौजूद आइटम की किसी भी संख्या को दिखाती हैं:

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

प्रोग्रेस नोटिफ़िकेशन में एक प्रोग्रेस बार दिख रहा है:

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

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

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

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

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

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

इस एपीआई का इस्तेमाल करने के लिए, 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.
}

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