इस कोडलैब में, Notifications API की बुनियादी सुविधाओं का इस्तेमाल करके ये काम किए जा सकते हैं:
- सूचनाएं भेजने के लिए अनुमति का अनुरोध करना
- सूचनाएं भेजें
- सूचना के विकल्पों को आज़माएं
सैंपल ऐप्लिकेशन को रीमिक्स करें और इसे नए टैब में देखें
एम्बेड किए गए Glitch ऐप्लिकेशन से सूचनाएं अपने-आप ब्लॉक हो जाती हैं. इसलिए, इस पेज पर ऐप्लिकेशन की झलक नहीं देखी जा सकती. इसके बजाय, यहां बताया गया है कि क्या करना है:
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
ग्लिच को नए Chrome टैब में खुलना चाहिए:
इस कोडलैब पर काम करते समय, इस पेज पर एम्बेड किए गए ग्लिच के कोड में बदलाव करें. बदलाव देखने के लिए, अपने लाइव ऐप्लिकेशन के नए टैब को रीफ़्रेश करें.
शुरुआती ऐप्लिकेशन और उसके कोड के बारे में जानें
सबसे पहले, Chrome के नए टैब में लाइव ऐप्लिकेशन देखें:
DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं. कंसोल टैब पर क्लिक करें.
आपको कंसोल में यह मैसेज दिखेगा:
Notification permission is default
अगर आपको नहीं पता कि इसका क्या मतलब है, तो चिंता न करें. आपको जल्द ही सब कुछ पता चल जाएगा!
लाइव ऐप्लिकेशन में दिए गए बटन पर क्लिक करें: सूचनाएं भेजने की अनुमति का अनुरोध करें और सूचना भेजें.
कंसोल कुछ फ़ंक्शन स्टब से "TODO" मैसेज प्रिंट करता है:
requestPermission
औरsendNotification
. ये वे फ़ंक्शन हैं जिन्हें आपको इस कोडलैब में लागू करना है.
अब इस पेज पर एम्बेड किए गए ग्लिच में सैंपल ऐप्लिकेशन के कोड को देखते हैं.
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()
तरीके का इस्तेमाल किया जाएगा.
सार्वजनिक/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); }); }
जिस Chrome टैब में आपको अपना लाइव ऐप्लिकेशन देखा जा रहा है उसे फिर से लोड करें.
लाइव ऐप्लिकेशन के इंटरफ़ेस पर, सूचनाएं भेजने के लिए अनुमति का अनुरोध करें पर क्लिक करें. एक पॉप-अप दिखेगा.
उपयोगकर्ता, अनुमति के पॉप-अप के लिए, तीन में से कोई एक जवाब दे सकता है.
उपयोगकर्ता का जवाब | सूचना की अनुमति की स्थिति |
---|---|
उपयोगकर्ता अनुमति दें को चुनता है | 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
है, तो आपकी सूचना दिखेगी.
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
एक ऑब्जेक्ट है, जिसमें विज़ुअल सेटिंग और डेटा दिखाने वाली प्रॉपर्टी होती हैं. इन्हें सूचना में शामिल किया जा सकता है. ज़्यादा जानकारी के लिए, सूचना पैरामीटर के बारे में एमडीएन दस्तावेज़ देखें.जिस 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);
};
}
सूचना की अनुमति से जुड़ी गड़बड़ी का पता लगाने के लिए:
Chrome यूआरएल बार के आगे मौजूद लॉक आइकॉन पर क्लिक करें. इसके बाद, साइट की सूचना अनुमति की सेटिंग को डिफ़ॉल्ट पर रीसेट करें.
सूचनाएं भेजने के लिए अनुमति का अनुरोध करें पर क्लिक करें और इस बार पॉप-अप से ब्लॉक करें को चुनें.
सूचना भेजें पर क्लिक करें और देखें कि क्या होता है. गड़बड़ी वाला टेक्स्ट (
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'
},],
*/
}
कुछ और आइडिया के लिए, पीटर बेवरलू का नोटिफ़िकेशन जनरेटर देखें!
अगर आपको कोई समस्या आ गई है, तो यहां इस कोडलैब के लिए पूरा कोड दिया गया है: glitch.com/edit/#!/codelab-notifications-get-started-completed
इस सीरीज़ के अगले कोडलैब पर एक नज़र डालें. इस सीरीज़ के बारे में ज़्यादा जानने के लिए, सर्विस वर्कर के साथ सूचनाएं मैनेज करना लेख पढ़ें!