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

इस कोडलैब में, आप Notifications API से:

  • सूचनाएं भेजने के लिए अनुमति का अनुरोध करें
  • सूचनाएं भेजें
  • सूचना के विकल्पों को आज़माकर देखें

ब्राउज़र सहायता

  • Chrome: 20. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 14. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 22. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 7. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

सैंपल ऐप्लिकेशन को रीमिक्स करें और इसे नए टैब में देखें

एम्बेड किए गए Glitch ऐप्लिकेशन पर सूचनाएं पाने की सुविधा अपने-आप ब्लॉक हो जाती है. इसलिए, आपको इस पेज पर ऐप्लिकेशन की झलक नहीं दिखेगी. इसके बजाय, यहां बताया गया है कि क्या करना है:

  1. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
  2. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन.

Glitch को एक नए Chrome टैब में खोलना चाहिए:

रीमिक्स किए गए लाइव ऐप्लिकेशन को नए टैब में दिखाने वाला स्क्रीनशॉट

इस कोडलैब पर काम करते समय, इस पेज पर एम्बेड किए गए Glitch के कोड में बदलाव करें. बदलाव देखने के लिए, लाइव ऐप्लिकेशन को नए टैब पर रीफ़्रेश करें.

शुरुआती ऐप्लिकेशन और उसके कोड के बारे में जानें

Chrome के नए टैब में लाइव ऐप्लिकेशन देखने के बाद शुरू करें:

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

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

    Notification permission is default
    

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

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

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

आइए, अब इस पेज पर एम्बेड किए गए Glitch में जाकर, ऐप्लिकेशन के सैंपल कोड को देखते हैं. 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. लाइव ऐप्लिकेशन के इंटरफ़ेस पर, सूचनाएं भेजने के लिए अनुमति मांगें पर क्लिक करें. आपको एक पॉप-अप दिखेगा.

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

उपयोगकर्ता का जवाब सूचना की अनुमति की स्थिति
उपयोगकर्ता ने अनुमति दें चुना है granted
उपयोगकर्ता ने ब्लॉक करें चुना है denied
उपयोगकर्ता बिना कोई विकल्प चुने पॉप-अप को खारिज कर देता है default

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

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

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

  • Notification.requestPermission को बाद में किए जाने वाले कॉल, पॉप-अप के बिना ही granted में बदल जाएंगे.

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

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

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

  • Notification.requestPermission को बाद में किए जाने वाले कॉल, पॉप-अप के बिना ही denied में बदल जाएंगे.

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

  • Notification.permission default रहेगी.

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

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

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

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

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

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

आपको नई सूचना बनाने और उसे दिखाने के लिए, Notification कंस्ट्रक्टर का इस्तेमाल करना होगा. अगर अनुमति की स्थिति 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) और इवेंट ऑब्जेक्ट को कंसोल में लॉग किया जाता है.

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

सूचना के विकल्पों को आज़माकर देखें

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

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

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

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'
    },],
  */
}

ज़्यादा जानकारी के लिए, पीटर बेवरलू का नोटिफ़िकेशन जनरेटर देखें!

अगर आपको कोई समस्या हो गई है, तो यहां इस कोडलैब के लिए पूरा कोड दिया गया है: glitch.com/edit/#!/codelab-notifications-get-started-completed

इसके बारे में और जानने के लिए, इस सीरीज़ की अगली कोडलैब (कोड बनाना सीखना) सुविधा देखें. जैसे, सर्विस वर्कर के साथ सूचनाएं मैनेज करना!