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

इस कोडलैब में, Notifications API की बुनियादी सुविधाओं का इस्तेमाल करके ये काम किए जाएंगे:

• सूचनाएं भेजने की अनुमति का अनुरोध करना
• सूचनाएं भेजना
• सूचनाओं से जुड़े विकल्पों के साथ एक्सपेरिमेंट करना

स्टार्टिंग ऐप्लिकेशन और उसके कोड के बारे में जानें

सबसे पहले, Chrome के नए टैब में लाइव ऐप्लिकेशन देखें:

1. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं. कंसोल टैब पर क्लिक करें.

   आपको कंसोल में यह मैसेज दिखेगा:

   Notification permission is default
   

   अगर आपको इसका मतलब नहीं पता है, तो चिंता न करें. जल्द ही आपको इसके बारे में पता चल जाएगा!

2. लाइव ऐप्लिकेशन में मौजूद इन बटन पर क्लिक करें: सूचनाएं भेजने की अनुमति का अनुरोध करें और सूचना भेजें.

   कंसोल, फ़ंक्शन स्टब requestPermission और sendNotification से "TODO" मैसेज प्रिंट करता है. इस कोडलैब में, आपको इन फ़ंक्शन को लागू करना होगा.

अब सैंपल ऐप्लिकेशन का कोड देखते हैं. public/index.js खोलें और मौजूदा कोड के कुछ ज़रूरी हिस्सों पर नज़र डालें:

• showPermission फ़ंक्शन, Notifications API का इस्तेमाल करके साइट की अनुमति की मौजूदा स्थिति का पता लगाता है और उसे कंसोल में लॉग करता है:

  // Print current permission state to console;
  // update onscreen message.
  function showPermission() {
    let permission = Notification.permission;
    console.log('Notification permission is ' + permission);
    let p = document.getElementById('permission');
    p.textContent = 'Notification permission is ' + permission;
  }
  

  अनुमति का अनुरोध करने से पहले, अनुमति की स्थिति default होती है. default अनुमति की स्थिति में, किसी साइट को सूचनाएं भेजने से पहले अनुमति का अनुरोध करना होगा और उसे अनुमति मिलनी चाहिए.

• requestPermission फ़ंक्शन एक स्टब है:

  // Use the Notification API to request permission to send notifications.
  function requestPermission() {
    console.log('TODO: Implement requestPermission()');
  }
  

  अगले चरण में, इस फ़ंक्शन को लागू किया जाएगा.

• sendNotification फ़ंक्शन एक स्टब है:

  // Use the Notification constructor to create and send a new Notification.
  function sendNotification() {
    console.log('TODO: Implement sendNotification()');
  }
  

  requestPermission लागू करने के बाद, इस फ़ंक्शन को लागू करें.

• window.onload इवेंट लिसनर, पेज लोड होने पर showPermission फ़ंक्शन को कॉल करता है. इससे, कंसोल और पेज पर अनुमति की मौजूदा स्थिति दिखती है:

  window.onload = () => { showPermission(); };
  

सूचनाएं भेजने की अनुमति का अनुरोध करना

इस चरण में, सूचनाएं भेजने के लिए उपयोगकर्ता से अनुमति मांगने की सुविधा जोड़ी जाएगी.

आपको Notification.requestPermission() तरीके का इस्तेमाल करके एक पॉप-अप ट्रिगर करना होगा. इसमें उपयोगकर्ता से आपकी साइट से सूचनाएं पाने की अनुमति देने या उन्हें ब्लॉक करने के लिए कहा जाएगा.

1. public/index.js में मौजूद requestPermission फ़ंक्शन स्टब को इस कोड से बदलें:

   // Use the Notification API to request permission to send notifications.
   function requestPermission() {
     Notification.requestPermission()
       .then((permission) => {
         console.log('Promise resolved: ' + permission);
         showPermission();
       })
       .catch((error) => {
         console.log('Promise was rejected');
         console.log(error);
       });
   }
   

2. उस Chrome टैब को फिर से लोड करें जिसमें लाइव ऐप्लिकेशन देखा जा रहा है.

3. लाइव ऐप्लिकेशन इंटरफ़ेस पर, सूचनाएं भेजने की अनुमति का अनुरोध करें पर क्लिक करें. आपको एक पॉप-अप दिखेगा.

उपयोगकर्ता, अनुमति के लिए दिखने वाले पॉप-अप में तीन तरह से जवाब दे सकता है.

अगर उपयोगकर्ता 'अनुमति दें' पर क्लिक करता है, तो:

• Notification.permission को granted पर सेट किया गया है.

• साइट, सूचनाएं दिखा पाएगी.

• इसके बाद, Notification.requestPermission को कॉल करने पर, पॉप-अप के बिना granted पर कॉल किया जाएगा.

अगर उपयोगकर्ता 'ब्लॉक करें' पर क्लिक करता है, तो:

• Notification.permission को denied पर सेट किया गया है.

• साइट, उपयोगकर्ता को सूचनाएं नहीं दिखा पाएगी.

• इसके बाद, Notification.requestPermission को कॉल करने पर, पॉप-अप के बिना denied पर कॉल किया जाएगा.

अगर उपयोगकर्ता पॉप-अप को खारिज करता है, तो:

• Notification.permission default तक रहेगा.

• साइट, उपयोगकर्ता को सूचनाएं नहीं दिखा पाएगी.

• इसके बाद, Notification.requestPermission को कॉल करने पर ज़्यादा पॉप-अप दिखेंगे.

  हालांकि, अगर उपयोगकर्ता पॉप-अप को खारिज करता रहता है, तो ब्राउज़र साइट को ब्लॉक कर सकता है. साथ ही, Notification.permission को denied पर सेट कर सकता है. इसके बाद, न तो अनुमति का अनुरोध करने वाले पॉप-अप और न ही सूचनाएं उपयोगकर्ता को दिखाई जा सकती हैं.

  यह लेख लिखते समय, सूचनाएं पाने की अनुमति के लिए दिखने वाले पॉप-अप को खारिज करने पर, ब्राउज़र के व्यवहार में अब भी बदलाव हो सकता है. इस समस्या को हल करने का सबसे अच्छा तरीका यह है कि उपयोगकर्ता की किसी कार्रवाई के जवाब में, सूचना पाने की अनुमति का अनुरोध किया जाए. इससे उपयोगकर्ता को पता चल जाता है कि क्या हो रहा है.

कोई सूचना भेजें

इस चरण में, आपको उपयोगकर्ता को एक सूचना भेजनी होगी.

नई सूचना बनाने और उसे दिखाने के लिए, Notification constructor का इस्तेमाल किया जाएगा. अगर अनुमति की स्थिति granted है, तो आपको सूचना दिखेगी.

1. index.js में मौजूद sendNotification फ़ंक्शन स्टब की जगह यह कोड डालें:

   // Use the Notification constructor to create and send a new Notification.
   function sendNotification() {
     let title = 'Test';
     let options = {
       body: 'Test body',
       // Other options can go here
     };
     console.log('Creating new notification');
     let notification = new Notification(title, options);
   }
   

   Notification कंस्ट्रक्टर में दो पैरामीटर होते हैं: title और options. options एक ऑब्जेक्ट है. इसमें ऐसी प्रॉपर्टी होती हैं जो विज़ुअल सेटिंग और उस डेटा को दिखाती हैं जिसे सूचना में शामिल किया जा सकता है. ज़्यादा जानकारी के लिए, सूचना पैरामीटर के बारे में MDN दस्तावेज़ देखें.

2. उस Chrome टैब को रीफ़्रेश करें जिसमें आपको लाइव ऐप्लिकेशन दिख रहा है और सूचना भेजें बटन पर क्लिक करें. आपको Test body टेक्स्ट वाली सूचना दिखेगी.

अनुमति के बिना सूचनाएं भेजने पर क्या होता है?

इस चरण में, आपको कोड की कुछ लाइनें जोड़नी होंगी. इससे आपको यह पता चलेगा कि उपयोगकर्ता की अनुमति के बिना सूचना दिखाने की कोशिश करने पर क्या होता है.

• public/index.js में, sendNotification फ़ंक्शन के आखिर में, नई सूचना के onerror इवेंट हैंडलर को तय करें:

// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
  notification.onerror = (event) => {
    console.log('Could not send notification');
    console.log(event);
  };
}

सूचना पाने की अनुमति से जुड़ी गड़बड़ी देखने के लिए:

1. Chrome के यूआरएल बार के बगल में मौजूद लॉक आइकॉन पर क्लिक करें. इसके बाद, साइट के लिए सूचनाएं पाने की अनुमति की सेटिंग को डिफ़ॉल्ट पर रीसेट करें.

2. सूचनाएं भेजने की अनुमति का अनुरोध करें पर क्लिक करें. इसके बाद, पॉप-अप में ब्लॉक करें को चुनें.

3. सूचना भेजें पर क्लिक करें और देखें कि क्या होता है. गड़बड़ी का टेक्स्ट (Could not send notification) और इवेंट ऑब्जेक्ट, कंसोल में लॉग किए जाते हैं.

इसके अलावा, साइट के लिए सूचनाएं पाने की अनुमतियों को फिर से रीसेट करें. अनुमति का अनुरोध करने और पॉप-अप को कई बार खारिज करने की कोशिश करें, ताकि आपको पता चल सके कि क्या होता है.

सूचनाओं से जुड़े विकल्पों के साथ एक्सपेरिमेंट करना

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

अब सूचना बनाते समय, विज़ुअल और डेटा के कई विकल्पों का इस्तेमाल किया जा सकता है. उपलब्ध विकल्पों का पूरा सेट यहां दिया गया है. (इन विकल्पों के बारे में ज़्यादा जानने के लिए, MDN पर सूचना से जुड़ा दस्तावेज़ देखें.)

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

let options = {
  dir: 'auto',              // Text direction
  lang: 'en-US',            // A language tag
  badge: '/orange-cat.png', // Display when insufficient room
  body: 'Hello World',      // Body text
  tag: 'mytag',             // Tag for categorization
  icon: '/line-cat.png',    // To display in the notification
  image: '/orange-cat.png', // To display in the notification
  data: {                   // Arbitrary data; any data type
    cheese: 'I like cheese',
    pizza: 'Excellent cheese delivery mechanism',
    arbitrary: {
      faveNumber: 42,
      myBool: true
    }},
  vibrate: [200, 100, 200], // Vibration pattern for hardware
  renotify: false,          // Notify if replaced? Default false
  requireInteraction: false,// Active until click? Default false
  /*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */
}

कुछ और आइडिया पाने के लिए, Peter Beverloo का सूचना जनरेटर देखें!

ज़्यादा जानने के लिए, इस सीरीज़ का अगला कोडलैब, सर्विस वर्कर की मदद से सूचनाएं मैनेज करना देखें!