अगर डेवलपर से पूछा जाता है कि वेब पर मोबाइल डिवाइस की कौनसी सुविधाएं नहीं हैं, तो पुश नोटिफ़िकेशन हमेशा सूची में सबसे ऊपर होते हैं.
पुश नोटिफ़िकेशन की मदद से, आपके उपयोगकर्ता अपनी पसंद की साइटों से, अपडेट पाने के लिए समय-समय पर ऑप्ट-इन कर सकते हैं. साथ ही, आपकी पसंद के मुताबिक बनाए गए और दिलचस्प कॉन्टेंट बनाकर, उन्हें असरदार तरीके से फिर से जोड़ सकते हैं.
Chrome के वर्शन 42 से, Push API और सूचना API डेवलपर के लिए उपलब्ध हैं.
Chrome में Push API, टेक्नोलॉजी के कुछ अलग-अलग हिस्सों पर निर्भर करता है. इनमें वेब ऐप्लिकेशन मेनिफ़ेस्ट और सर्विस वर्कर शामिल हैं. इस पोस्ट में हम इन सभी तकनीकों के बारे में बात करेंगे, लेकिन पुश मैसेज भेजने और इस्तेमाल करने के लिए सिर्फ़ ज़रूरी है. मेनिफ़ेस्ट की कुछ दूसरी सुविधाओं और सर्विस वर्कर की ऑफ़लाइन सुविधाओं के बारे में बेहतर तरीके से समझने के लिए, कृपया ऊपर दिए गए लिंक पर जाएं.
हम यह भी देखेंगे कि Chrome के आने वाले वर्शन में, एपीआई में क्या जोड़ा जाएगा और आखिर में, हम अक्सर अक्सर पूछे जाने वाले सवाल पूछेंगे.
Chrome के लिए पुश मैसेज की सुविधा लागू करना
इस सेक्शन में ऐसे हर चरण के बारे में बताया गया है जिसे पूरा करना होगा, ताकि आपके वेब ऐप्लिकेशन में पुश मैसेज सेवा की सुविधा काम कर सके.
सर्विस वर्कर रजिस्टर करें
वेब के लिए पुश मैसेज लागू करने के लिए सर्विस वर्कर की ज़रूरत होती है. इसकी वजह यह है कि कोई पुश मैसेज मिलने पर, ब्राउज़र एक सर्विस वर्कर शुरू कर सकता है. यह सर्विस वर्कर, बैकग्राउंड में चलता है, लेकिन पेज नहीं खुलता. साथ ही, किसी इवेंट को डिस्पैच किया जा सकता है, ताकि आप तय कर सकें कि उस पुश मैसेज को कैसे हैंडल करना है.
नीचे एक उदाहरण दिया गया है कि अपने वेब ऐप्लिकेशन में सर्विस वर्कर को कैसे रजिस्टर किया जाता है. रजिस्ट्रेशन पूरा होने के बाद, हम initialiseState() को कॉल करते हैं. इसके बारे में हम जल्द ही बताएंगे.
var isPushEnabled = false;
…
window.addEventListener('load', function() {
var pushButton = document.querySelector('.js-push-button');
pushButton.addEventListener('click', function() {
if (isPushEnabled) {
unsubscribe();
} else {
subscribe();
}
});
// Check that service workers are supported, if so, progressively
// enhance and add push messaging support, otherwise continue without it.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(initialiseState);
} else {
console.warn('Service workers aren\'t supported in this browser.');
}
});
बटन क्लिक हैंडलर, मैसेज पुश करने के लिए उपयोगकर्ता की सदस्यता लेता है या उसकी सदस्यता छोड़ देता है. isPushEnabled एक ग्लोबल वैरिएबल है, जो बस ट्रैक करता है कि पुश मैसेज की सदस्यता फ़िलहाल ली गई है या नहीं. पूरे कोड स्निपेट में इनका रेफ़रंस दिया जाएगा.
इसके बाद, हम यह जांच करते हैं कि service-worker.js फ़ाइल को रजिस्टर करने से पहले, सर्विस वर्कर काम करते हैं या नहीं. इस फ़ाइल में पुश मैसेज को मैनेज करने का लॉजिक होता है. यहां हम ब्राउज़र को बस यह बता रहे हैं कि यह JavaScript फ़ाइल हमारी साइट का सर्विस वर्कर है.
शुरुआती स्थिति सेट अप करें
सर्विस वर्कर के रजिस्टर होने के बाद, हमें अपने यूज़र इंटरफ़ेस (यूआई) की स्थिति सेट अप करनी होगी.
उपयोगकर्ताओं को उम्मीद होगी कि आपकी साइट के लिए पुश मैसेज को चालू या बंद करने के लिए, एक आसान यूज़र इंटरफ़ेस (यूआई) मौजूद होगा. साथ ही, होने वाले किसी भी बदलाव के बारे में वे इस जानकारी के साथ अप-टू-डेट रहेंगे. दूसरे शब्दों में कहें, तो अगर यह सुविधा आपकी साइट के लिए पुश मैसेज चालू करती है, तो पेज से बाहर निकलें और एक हफ़्ते बाद वापस आएं. आपके यूज़र इंटरफ़ेस (यूआई) में यह हाइलाइट किया जाना चाहिए कि पुश मैसेज की सुविधा पहले से चालू है.
इस दस्तावेज़ में आपको UX से जुड़े कुछ दिशा-निर्देश मिलेंगे. इस लेख में हम तकनीकी पहलुओं पर फ़ोकस करेंगे.
इस समय, आपको लग सकता है कि काम करने के लिए सिर्फ़ दो स्थितियां हैं, चालू या बंद. हालांकि, सूचनाओं से जुड़ी कुछ अन्य स्थितियां भी हैं जिनका ध्यान रखना ज़रूरी है.
बटन को चालू करने से पहले हमें कई एपीआई की जांच करनी होती है. अगर हर चीज़ काम करती है, तो हम अपने यूज़र इंटरफ़ेस (यूआई) को चालू कर सकते हैं और शुरुआती स्थिति को सेट करके बता सकते हैं कि पुश मैसेज की सदस्यता ली गई है या नहीं.
इनमें से ज़्यादातर जांचों की वजह से हमारा यूज़र इंटरफ़ेस (यूआई) बंद हो जाता है. इसलिए, आपको शुरुआती स्थिति को 'बंद है' पर सेट करना चाहिए. इससे, आपके पेज के JavaScript में कोई समस्या होने पर भी भ्रम की स्थिति से बचा जा सकता है. उदाहरण के लिए, JS फ़ाइल डाउनलोड नहीं की जा सकती या उपयोगकर्ता ने JavaScript को बंद कर दिया है.
<button class="js-push-button" disabled>
Enable Push Messages
</button>
इस शुरुआती स्थिति में, हम initialiseState() तरीके से ऊपर बताई गई जांच कर सकते हैं. इसका मतलब है कि हमारे सर्विस वर्कर के रजिस्टर होने के बाद.
// Once the service worker is registered set the initial state
function initialiseState() {
// Are Notifications supported in the service worker?
if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
console.warn('Notifications aren\'t supported.');
return;
}
// Check the current Notification permission.
// If its denied, it's a permanent block until the
// user changes the permission
if (Notification.permission === 'denied') {
console.warn('The user has blocked notifications.');
return;
}
// Check if push messaging is supported
if (!('PushManager' in window)) {
console.warn('Push messaging isn\'t supported.');
return;
}
// We need the service worker registration to check for a subscription
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
// Do we already have a push message subscription?
serviceWorkerRegistration.pushManager.getSubscription()
.then(function(subscription) {
// Enable any UI which subscribes / unsubscribes from
// push messages.
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = false;
if (!subscription) {
// We aren't subscribed to push, so set UI
// to allow the user to enable push
return;
}
// Keep your server in sync with the latest subscriptionId
sendSubscriptionToServer(subscription);
// Set your UI to show they have subscribed for
// push messages
pushButton.textContent = 'Disable Push Messages';
isPushEnabled = true;
})
.catch(function(err) {
console.warn('Error during getSubscription()', err);
});
});
}
इन चरणों के बारे में खास जानकारी:
- हम यह जांच करते हैं कि
showNotification, ServiceWorker इलाज के प्रोटोटाइप में उपलब्ध है या नहीं. इसके बिना, हम पुश मैसेज मिलने पर अपने सर्विस वर्कर से सूचना नहीं दिखा पाएंगे. - हम जांच करते हैं कि मौजूदा
Notification.permissionक्या है, ताकि यह पक्का किया जा सके कि यह"denied"न हो. अस्वीकार की गई अनुमति का मतलब है कि जब तक उपयोगकर्ता ब्राउज़र में मैन्युअल रूप से अनुमति में बदलाव नहीं करता, तब तक सूचनाएं नहीं दिखाई जा सकतीं. - हम यह पता करते हैं कि पुश मैसेज की सुविधा काम करती है या नहीं, यह जानने के लिए कि विंडो ऑब्जेक्ट में
PushManagerमौजूद है या नहीं. - आखिर में, हमने
pushManager.getSubscription()का इस्तेमाल यह देखने के लिए किया कि हमारे पास पहले से सदस्यता है या नहीं. अगर हम ऐसा करते हैं, तो हम अपने सर्वर पर सदस्यता की जानकारी भेजते हैं, ताकि यह पक्का किया जा सके कि हमें सही जानकारी मिले. साथ ही, अपना यूज़र इंटरफ़ेस (यूआई) सेट करके यह बताते हैं कि पुश मैसेज सेवा पहले से चालू है या नहीं. इस लेख के बाद, हम देखेंगे कि सदस्यता ऑब्जेक्ट में कौनसी जानकारी मौजूद है.
सदस्यता की जांच करने और पुश बटन चालू करने के लिए, हम navigator.serviceWorker.ready के हल होने तक इंतज़ार करते हैं. ऐसा इसलिए होता है, क्योंकि सर्विस वर्कर के चालू होने के बाद ही, पुश मैसेज की सदस्यता ली जा सकती है.
अगले चरण में यह मैनेज करना है कि उपयोगकर्ता पुश मैसेज की सुविधा कब चालू करना चाहता है, लेकिन ऐसा करने से पहले, हमें Google Developer Console प्रोजेक्ट सेट अप करना होगा. साथ ही, Firebase क्लाउड से मैसेज (FCM) का इस्तेमाल करने के लिए हमारे मेनिफ़ेस्ट में कुछ पैरामीटर जोड़ने होंगे. जिसे पहले Google क्लाउड से मैसेज (GCM) नाम से जाना जाता था.
Firebase कंसोल पर प्रोजेक्ट बनाना
Chrome, पुश मैसेज भेजने और उनकी डिलीवरी को मैनेज करने के लिए, FCM का इस्तेमाल करता है. हालांकि, FCM API का इस्तेमाल करने के लिए, आपको Firebase कंसोल पर एक प्रोजेक्ट सेट अप करना होगा.
ये चरण खास तौर पर Chrome, Android के लिए Opera, और FCM का इस्तेमाल करने वाले Samsung ब्राउज़र के लिए हैं. अन्य ब्राउज़र में यह तरीका कैसे काम करेगा, इस पर बाद में लेख में चर्चा की जाएगी.
नया Firebase डेवलपर प्रोजेक्ट बनाएं
शुरुआत करने के लिए, आपको https://console.firebase.google.com/ पर 'नया प्रोजेक्ट बनाएं' पर क्लिक करके, एक नया प्रोजेक्ट बनाना होगा.
प्रोजेक्ट का नाम जोड़ें, प्रोजेक्ट बनाएं. इसके बाद, आपको प्रोजेक्ट के डैशबोर्ड पर ले जाया जाएगा:
इस डैशबोर्ड में, सबसे ऊपर बाएं कोने में अपने प्रोजेक्ट के नाम के बगल में मौजूद कॉग पर क्लिक करें. इसके बाद, 'प्रोजेक्ट सेटिंग' पर क्लिक करें.
सेटिंग पेज में, 'क्लाउड से मैसेज' टैब पर क्लिक करें.
इस पेज में पुश मैसेज सेवा के लिए एपीआई पासकोड मौजूद है, जिसका इस्तेमाल हम बाद में करेंगे. साथ ही, इसमें वह सेंडर आईडी भी है जिसे हमें अगले सेक्शन में वेब ऐप्लिकेशन मेनिफ़ेस्ट में डालना होगा.
वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ें
पुश के लिए, हमें gcm_sender_id फ़ील्ड के साथ एक मेनिफ़ेस्ट फ़ाइल जोड़नी होगी, ताकि पुश सदस्यता मिल सके. यह पैरामीटर सिर्फ़ Chrome, Android के लिए Opera, और Samsung ब्राउज़र के लिए ज़रूरी है, ताकि वे FCM / GCM का इस्तेमाल कर सकें.
ये ब्राउज़र gcm_sender_id का इस्तेमाल तब करते हैं, जब वह FCM वाले किसी उपयोगकर्ता के डिवाइस की सदस्यता लेता है. इसका मतलब है कि FCM, उपयोगकर्ता के डिवाइस की पहचान कर सकता है और यह पक्का कर सकता है कि आपका भेजने वाला आईडी, संबंधित एपीआई पासकोड से मेल खाता हो. साथ ही, यह भी पक्का करें कि उपयोगकर्ता ने आपके सर्वर को पुश मैसेज भेजने की अनुमति दी हो.
नीचे एक बेहद आसान मेनिफ़ेस्ट फ़ाइल दी गई है:
{
"name": "Push Demo",
"short_name": "Push Demo",
"icons": [{
"src": "images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}],
"start_url": "/index.html?homescreen=1",
"display": "standalone",
"gcm_sender_id": "<Your Sender ID Here>"
}
आपको अपने Firebase प्रोजेक्ट से, भेजने वाले के आईडी के लिए gcm_sender_id वैल्यू सेट करनी होगी.
अपने प्रोजेक्ट में मेनिफ़ेस्ट फ़ाइल सेव करने के बाद (manifest.json अच्छा नाम है), तो अपने एचटीएमएल से इसकी जानकारी दें. इसके लिए, अपने पेज में सबसे ऊपर मौजूद टैग का इस्तेमाल करें.
<link rel="manifest" href="/manifest.json">
अगर इन पैरामीटर के साथ कोई वेब मेनिफ़ेस्ट नहीं जोड़ा जाता, तो आपको एक अपवाद मिलेगा. ऐसा तब होगा, जब किसी उपयोगकर्ता की सदस्यता को पुश मैसेज भेजने की कोशिश की जाएगी और उसे
"Registration failed - no sender id provided" या "Registration failed -
permission denied" गड़बड़ी दिखेगी.
पुश मैसेज की सदस्यता लें
मेनिफ़ेस्ट का सेट अप पूरा हो जाने के बाद, अब अपनी साइटों की JavaScript पर वापस जाया जा सकता है.
सदस्यता लेने के लिए, आपको PushManager ऑब्जेक्ट पर subscribe() तरीके को कॉल करना होगा, जिसे ServiceWorkerRegistration के ज़रिए ऐक्सेस किया जा सकता है.
इससे उपयोगकर्ता से पुश नोटिफ़िकेशन भेजने के लिए, आपके ऑरिजिन को अनुमति देने के लिए कहा जाएगा. इस अनुमति के बिना, आपके पास सदस्यता लेने का विकल्प नहीं होगा.
अगर subscribe() तरीके से लौटाया गया promise सही हो जाता है, तो आपको एक PushSubscription ऑब्जेक्ट दिया जाएगा, जिसमें एक endpoint होगा.
हर उपयोगकर्ता के लिए, endpoint को सर्वर पर सेव किया जाना चाहिए. ऐसा इसलिए, क्योंकि आपको बाद में पुश मैसेज भेजने के लिए, उनकी ज़रूरत पड़ेगी.
नीचे दिया गया कोड, पुश मैसेज सेवा के लिए उपयोगकर्ता को सदस्यता देता है:
function subscribe() {
// Disable the button so it can't be changed while
// we process the permission request
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = true;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.subscribe()
.then(function(subscription) {
// The subscription was successful
isPushEnabled = true;
pushButton.textContent = 'Disable Push Messages';
pushButton.disabled = false;
// TODO: Send the subscription.endpoint to your server
// and save it to send a push message at a later date
return sendSubscriptionToServer(subscription);
})
.catch(function(e) {
if (Notification.permission === 'denied') {
// The user denied the notification permission which
// means we failed to subscribe and the user will need
// to manually change the notification permission to
// subscribe to push messages
console.warn('Permission for Notifications was denied');
pushButton.disabled = true;
} else {
// A problem occurred with the subscription; common reasons
// include network errors, and lacking gcm_sender_id and/or
// gcm_user_visible_only in the manifest.
console.error('Unable to subscribe to push.', e);
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
}
});
});
}
इस समय आपका वेब ऐप्लिकेशन पुश मैसेज पाने के लिए तैयार है. हालांकि, जब तक हम अपनी सर्विस वर्कर फ़ाइल में पुश इवेंट लिसनर नहीं जोड़ते, तब तक कुछ नहीं होगा.
सर्विस वर्कर पुश इवेंट लिसनर
कोई पुश मैसेज मिलने पर (हम अगले सेक्शन में पुश मैसेज भेजने के बारे में बात करेंगे), आपके सर्विस वर्कर में एक पुश इवेंट भेजा जाएगा. इस दौरान आपको एक सूचना दिखानी होगी.
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = '/images/icon-192x192.png';
var tag = 'simple-push-demo-notification-tag';
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
})
);
});
यह कोड, पुश इवेंट लिसनर को रजिस्टर करता है और पहले से तय किए गए टाइटल, मुख्य हिस्से, आइकॉन, और सूचना टैग के साथ एक सूचना दिखाता है.
इस उदाहरण से हाइलाइट करने के लिए, event.waitUntil() तरीका है. इस तरीके से
प्रॉमिस लिया जाता है और इवेंट हैंडलर की लाइफ़टाइम को बढ़ाया जाता है. इसके अलावा, ऐसा तब तक किया जा सकता है, जब तक प्रॉमिस
सेट नहीं किया जाता;
इस मामले में, event.waitUntil को किया गया प्रॉमिस, showNotification() से वापस किया गया प्रॉमिस होता है.
सूचना टैग खास सूचनाओं के लिए एक आइडेंटिफ़ायर के रूप में काम करता है. अगर हम एक ही एंडपॉइंट पर दो पुश मैसेज भेजते हैं और उनके बीच में कुछ समय के लिए देरी होती है, तो ब्राउज़र एक ही टैग वाली सूचना दिखाता है. इसके बाद, पुश मैसेज मिलने पर ब्राउज़र पहली सूचना दिखाएगा और दूसरी सूचना से बदल देगा.
अगर आपको एक साथ कई सूचनाएं दिखानी हैं, तो किसी दूसरे टैग का इस्तेमाल करें या कोई टैग न लगाएं. हम बाद में इस पोस्ट में सूचना दिखाने का ज़्यादा पूरा उदाहरण देखेंगे. अभी के लिए, चीज़ों को आसान रखते हैं और देखते हैं कि पुश मैसेज भेजने से यह सूचना दिखती है या नहीं.
पुश मैसेज भेजा जा रहा है
हमने पुश मैसेज की सदस्यता ली है और हमारा सर्विस वर्कर, सूचना दिखाने के लिए तैयार है. इसलिए, अब FCM के ज़रिए पुश मैसेज भेजने का समय आ गया है.
यह सिर्फ़ FCM का इस्तेमाल करने वाले ब्राउज़र पर लागू होता है.
जब आप अपने सर्वर पर PushSubscription.endpoint वैरिएबल भेजते हैं, तो
FCM के लिए एंडपॉइंट खास होता है. इसके यूआरएल के आखिर में एक पैरामीटर होता है, जो
registration_id होता है.
एंडपॉइंट का एक उदाहरण यह होगा:
https://fcm.googleapis.com/fcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP
FCM यूआरएल:
https://fcm.googleapis.com/fcm/send
registration_id होगा:
APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP
यह खास तौर पर, FCM का इस्तेमाल करने वाले ब्राउज़र के लिए है. सामान्य ब्राउज़र में आपको सिर्फ़ एक एंडपॉइंट मिलेगा और आप उस एंडपॉइंट को स्टैंडर्ड तरीके से कॉल करेंगे. यह यूआरएल पर ध्यान दिए बिना काम करेगा.
इसका मतलब यह है कि आपके सर्वर पर आपको यह देखना होगा कि एंडपॉइंट FCM के लिए है या नहीं. अगर है, तो रजिस्ट्रेशन_id निकालें. Python में ऐसा करने के लिए, कुछ ऐसा किया जा सकता है:
if endpoint.startswith('https://fcm.googleapis.com/fcm/send'):
endpointParts = endpoint.split('/')
registrationId = endpointParts[len(endpointParts) - 1]
endpoint = 'https://fcm.googleapis.com/fcm/send'
रजिस्ट्रेशन आईडी मिलने के बाद, आप FCM API को कॉल कर सकते हैं. आपको FCM एपीआई पर रेफ़रंस दस्तावेज़ यहां मिल सकते हैं.
FCM को कॉल करते समय याद रखने वाले मुख्य पहलू ये हैं:
- एपीआई को कॉल करते समय,
key=<YOUR_API_KEY>वैल्यू वाला ऑथराइज़ेशन हेडर सेट करना ज़रूरी है. इसमें<YOUR_API_KEY>, Firebase प्रोजेक्ट से एपीआई पासकोड होता है.- FCM, भेजने वाले का सही आईडी ढूंढने के लिए एपीआई पासकोड का इस्तेमाल करता है. इससे यह पक्का होता है कि उपयोगकर्ता ने आपके प्रोजेक्ट के लिए अनुमति दी है और आखिर में यह भी पक्का किया जाता है कि उस प्रोजेक्ट के लिए सर्वर के आईपी पते को अनुमति वाली सूची में शामिल किया जाए.
application/jsonयाapplication/x-www-form-urlencoded;charset=UTF-8का सहीContent-Typeहेडर, जो इस बात पर निर्भर करता है कि आप डेटा को JSON के तौर पर भेजते हैं या फ़ॉर्म के डेटा के तौर पर.registration_idsका कलेक्शन - ये रजिस्ट्रेशन आईडी हैं, जिन्हें आपको अपने उपयोगकर्ताओं के एंडपॉइंट से निकाला जाता है.
अपने सर्वर से पुश मैसेज भेजने के तरीके के बारे में कृपया दस्तावेज़ देखें. हालांकि, अपने सर्विस वर्कर की एक बार जांच करने के लिए, आप cURL का इस्तेमाल करके अपने ब्राउज़र को पुश मैसेज भेज सकते हैं.
इस cURL कमांड में <YOUR_API_KEY> और <YOUR_REGISTRATION_ID> को अपने
कमांड से स्वैप करें और इसे टर्मिनल से चलाएं.
आपको एक शानदार सूचना दिखेगी:
curl --header "Authorization: key=<YOUR_API_KEY>" --header
"Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d
"{\"registration_ids\":[\"<YOUR_REGISTRATION_ID>\"]}"
अपना बैकएंड लॉजिक बनाते समय, याद रखें कि पोस्ट के मुख्य हिस्से का ऑथराइज़ेशन हेडर और फ़ॉर्मैट, खास तौर पर FCM एंडपॉइंट के लिए होता है. इसलिए, पता लगाएं कि FCM के लिए एंडपॉइंट कब है. साथ ही, हेडर को शर्त के साथ जोड़ें और पोस्ट के मुख्य हिस्से को फ़ॉर्मैट करें. दूसरे ब्राउज़र (और उम्मीद है कि आने वाले समय में Chrome में) के लिए, आपको वेब पुश प्रोटोकॉल लागू करना होगा.
Chrome में Push API को मौजूदा लागू करने का एक नुकसान यह है कि आप पुश मैसेज के साथ कोई भी डेटा नहीं भेज सकते. नहीं, कुछ नहीं. इसकी वजह यह है कि आने वाले समय में, पेलोड डेटा को पुश मैसेजिंग एंडपॉइंट पर भेजे जाने से पहले, आपके सर्वर पर एन्क्रिप्ट (सुरक्षित) करना होगा. इस तरह एंडपॉइंट, पुश मैसेज की सामग्री को आसानी से नहीं देख पाएगा. भले ही, यह पुश सेवा देने वाली कोई भी कंपनी हो. यह दूसरे जोखिमों से भी सुरक्षा देता है. जैसे, एचटीटीपीएस सर्टिफ़िकेट की गलत पुष्टि और आपके सर्वर और पुश प्रोवाइडर के बीच होने वाले मैन इन द मिडल अटैक. हालांकि, यह एन्क्रिप्ट (सुरक्षित) करने का तरीका अभी तक काम नहीं करता. इसलिए, आपको किसी सूचना को अपने-आप भरने के लिए, ज़रूरी जानकारी पाने के लिए फ़ेच करना होगा.
ज़्यादा पूरे पुश इवेंट का उदाहरण
हमने अब तक जो सूचना देखी है वह काफ़ी बुनियादी है और जहां तक सैंपल की बात है, तो यह असल दुनिया में इस्तेमाल के उदाहरण को कवर करने के मामले में काफ़ी खराब है.
असल में, ज़्यादातर लोग सूचना दिखाने से पहले अपने सर्वर से कुछ जानकारी लेना चाहेंगे. यह सूचना के शीर्षक और मैसेज को किसी खास जानकारी से भरने के लिए या एक कदम आगे जाने और कुछ पेजों या डेटा को कैश मेमोरी में सेव करने के लिए हो सकता है. इससे, जब उपयोगकर्ता सूचना पर क्लिक करता है, तो ब्राउज़र के चालू होते ही सब कुछ तुरंत उपलब्ध हो जाता है. भले ही उस समय नेटवर्क उपलब्ध न हो.
यहां दिए गए कोड में, हम एपीआई से कुछ डेटा फ़ेच करते हैं. इसके बाद, रिस्पॉन्स को किसी ऑब्जेक्ट में बदला जाता है और उसका इस्तेमाल अपनी सूचना को दिखाने के लिए किया जाता है.
self.addEventListener('push', function(event) {
// Since there is no payload data with the first version
// of push messages, we'll grab some data from
// an API and use it to populate a notification
event.waitUntil(
fetch(SOME_API_ENDPOINT).then(function(response) {
if (response.status !== 200) {
// Either show a message to the user explaining the error
// or enter a generic message and handle the
// onnotificationclick event to direct the user to a web page
console.log('Looks like there was a problem. Status Code: ' + response.status);
throw new Error();
}
// Examine the text in the response
return response.json().then(function(data) {
if (data.error || !data.notification) {
console.error('The API returned an error.', data.error);
throw new Error();
}
var title = data.notification.title;
var message = data.notification.message;
var icon = data.notification.icon;
var notificationTag = data.notification.tag;
return self.registration.showNotification(title, {
body: message,
icon: icon,
tag: notificationTag
});
});
}).catch(function(err) {
console.error('Unable to retrieve data', err);
var title = 'An error occurred';
var message = 'We were unable to get the information for this push message';
var icon = URL_TO_DEFAULT_ICON;
var notificationTag = 'notification-error';
return self.registration.showNotification(title, {
body: message,
icon: icon,
tag: notificationTag
});
})
);
});
एक बार फिर से हाइलाइट करना ज़रूरी है कि event.waitUntil() में प्रॉमिस किया जाता है, जिसका नतीजा showNotification() से मिलता है. इसका मतलब है कि एसिंक्रोनस fetch() कॉल पूरा होने और सूचना दिखने तक, इवेंट लिसनर बाहर नहीं निकलेगा.
गड़बड़ी होने पर भी हम सूचना दिखाएंगे. ऐसा इसलिए है, क्योंकि अगर हम ऐसा नहीं करते, तो Chrome अपनी सामान्य सूचना दिखाएगा.
उपयोगकर्ता के किसी सूचना पर क्लिक करने पर यूआरएल खोलना
जब उपयोगकर्ता किसी सूचना पर क्लिक करता है, तो आपके सर्विस वर्कर में notificationclick इवेंट भेज दिया जाता है. अपने हैंडलर में आप उचित कार्रवाई कर सकते हैं,
जैसे कि किसी टैब पर फ़ोकस करना या किसी खास यूआरएल वाली विंडो खोलना:
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
// Android doesn't close the notification when you click on it
// See: http://crbug.com/463146
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(
clients.matchAll({
type: "window"
})
.then(function(clientList) {
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
if (client.url == '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow) {
return clients.openWindow('/');
}
})
);
});
यह उदाहरण ब्राउज़र को साइट के ऑरिजिन के रूट पर ले जाता है. इसके लिए, अगर मौजूदा ऑरिजिन टैब मौजूद होता है, तो उस पर फ़ोकस किया जाता है और नया टैब खोला जाता है.
यहां एक पोस्ट दी गई है, जिसमें बताया गया है कि सूचनाएं पाने वाले एपीआई की मदद से यहां क्या-क्या किया जा सकता है.
उपयोगकर्ता के डिवाइस की सदस्यता छोड़ना
आपने किसी उपयोगकर्ता के डिवाइस की सदस्यता ली है और उसे पुश मैसेज मिल रहे हैं, लेकिन उसकी सदस्यता कैसे छोड़ी जा सकती है?
किसी उपयोगकर्ता के डिवाइस की सदस्यता छोड़ने के लिए ज़रूरी है कि वह
PushSubscription
ऑब्जेक्ट पर unsubscribe() तरीके को कॉल करे और एंडपॉइंट को अपने सर्वर से हटा दे. ऐसा इसलिए, ताकि आप ऐसे पुश मैसेज न भेजें जो आपको नहीं मिलेंगे. नीचे दिया गया कोड,
बिलकुल यही करता है:
function unsubscribe() {
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = true;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
// To unsubscribe from push messaging, you need get the
// subscription object, which you can call unsubscribe() on.
serviceWorkerRegistration.pushManager.getSubscription().then(
function(pushSubscription) {
// Check we have a subscription to unsubscribe
if (!pushSubscription) {
// No subscription object, so set the state
// to allow the user to subscribe to push
isPushEnabled = false;
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
return;
}
var subscriptionId = pushSubscription.subscriptionId;
// TODO: Make a request to your server to remove
// the subscriptionId from your data store so you
// don't attempt to send them push messages anymore
// We have a subscription, so call unsubscribe on it
pushSubscription.unsubscribe().then(function(successful) {
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
isPushEnabled = false;
}).catch(function(e) {
// We failed to unsubscribe, this can lead to
// an unusual state, so may be best to remove
// the users data from your data store and
// inform the user that you have done so
console.log('Unsubscription error: ', e);
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
});
}).catch(function(e) {
console.error('Error thrown while unsubscribing from push messaging.', e);
});
});
}
सदस्यता को अप-टू-डेट रखना
ऐसा हो सकता है कि FCM और आपके सर्वर के बीच सदस्यताएं सिंक न हों. पक्का करें कि आपका सर्वर
error:NotRegistered और canonical_id के नतीजे खोजने के लिए, FCM एपीआई के 'पोस्ट करें' के रिस्पॉन्स बॉडी को पार्स करता हो, जैसा कि FCM के दस्तावेज़ में बताया गया है.
सदस्यताएं भी सर्विस वर्कर और आपके सर्वर के बीच सिंक से बाहर
हो सकती हैं. उदाहरण के लिए, सदस्यता लेने/सदस्यता छोड़ने के बाद, खराब नेटवर्क कनेक्शन आपको सर्वर अपडेट करने से रोक सकता है या कोई उपयोगकर्ता, सूचनाओं की अनुमति निरस्त कर सकता है, जिससे अपने-आप सदस्यता छोड़ने की सुविधा ट्रिगर हो जाती है. इन मामलों को हैंडल करने के लिए, समय-समय पर serviceWorkerRegistration.pushManager.getSubscription() के नतीजे की जांच करें (जैसे कि पेज लोड होने पर) और उसे सर्वर के साथ सिंक करें. अगर आपके पास सदस्यता नहीं है और
सूचना, अनुमति == 'मंज़ूरी दी गई है', तो
अपने-आप फिर से सदस्यता ली जा सकती है.
sendSubscriptionToServer() में, आपको यह देखना होगा कि endpoint को अपडेट करते समय, ऐसे नेटवर्क अनुरोधों को कैसे मैनेज करना है जो काम नहीं करते. इसका एक समाधान है कि
कुकी में endpoint की स्थिति को ट्रैक करके यह पता लगाया जा सकता है कि आपके सर्वर को नई जानकारी की ज़रूरत है या नहीं.
ऊपर दिए गए सभी चरणों से, Chrome 46 में वेब पर पुश मैसेज सेवा को पूरी तरह से लागू किया जा सकता है. ऐसी खास सुविधाएं हैं जो चीज़ों को आसान बना देंगी (जैसे कि पुश मैसेज ट्रिगर करने के लिए एक स्टैंडर्ड एपीआई), लेकिन इस रिलीज़ से आप आज से ही अपने वेब ऐप्लिकेशन में पुश मैसेज सेवा बनाना शुरू कर सकते हैं.
अपने वेब ऐप्लिकेशन को डीबग करने का तरीका
पुश मैसेज लागू करते समय, गड़बड़ियां इन दो में से किसी एक जगह पर रहेंगी: आपका पेज या आपका सर्विस वर्कर.
पेज में मौजूद गड़बड़ियों को DevTools का इस्तेमाल करके डीबग किया जा सकता है. सर्विस वर्कर से जुड़ी समस्याओं को डीबग करने के लिए, आपके पास दो विकल्प हैं:
- chrome://inspect > सर्विस वर्कर पर जाएं. इस व्यू में, मौजूदा समय में चल रहे सर्विस वर्कर के अलावा, ज़्यादा जानकारी नहीं मिलती.
- chrome://serviceworker-internals पर जाएं और यहां से सर्विस वर्कर की स्थिति देखी जा सकती है. साथ ही, कोई गड़बड़ी होने पर उसकी जानकारी भी देखी जा सकती है. यह पेज तब तक अस्थायी है, जब तक DevTools में मिलती-जुलती सुविधा का सेट नहीं है.
सर्विस वर्कर के लिए नए अनुभव में से एक यह चेकबॉक्स आपके सर्विस वर्कर की शुरुआत में ब्रेकपॉइंट जोड़ देगा और एक्ज़ीक्यूशन को रोक देगा. इससे आपको सर्विस वर्कर स्क्रिप्ट को फिर से चलाने या उसमें आगे बढ़ने में मदद मिलेगी.
अगर ऐसा लगता है कि FCM और आपके सर्विस वर्कर के पुश इवेंट के बीच कोई समस्या है, तो समस्या को डीबग करने के लिए आप ज़्यादा कुछ नहीं कर सकते. ऐसा इसलिए है, क्योंकि आपके पास यह देखने का कोई तरीका नहीं है कि Chrome को कुछ मिला है या नहीं. यह पक्का करना ज़रूरी है कि जब आपका सर्वर एपीआई कॉल करता है, तो FCM से मिलने वाला रिस्पॉन्स कामयाब हो. यह कुछ ऐसा दिखेगा:
{"multicast_id":1234567890,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1234567890"}]}
"success": 1 के जवाब पर ध्यान दें. अगर आपको गड़बड़ी दिखती है, तो इसका मतलब है कि FCM रजिस्ट्रेशन आईडी में कुछ गड़बड़ी है और Chrome को पुश
मैसेज नहीं भेजा जा रहा है.
Android के लिए Chrome पर सर्विस वर्कर को डीबग करना
इस समय, Android के लिए Chrome पर सर्विस वर्कर को डीबग करना साफ़ तौर पर नहीं बताया गया है. आपको chrome://inspect पर जाना होगा, अपने डिवाइस को ढूंढना होगा और "वर्कर pid:...." नाम वाले सूची आइटम को खोजना होगा, जिसमें आपके सर्विस वर्कर का यूआरएल होता है.
पुश नोटिफ़िकेशन के लिए UX
Chrome की टीम ने, पुश नोटिफ़िकेशन के UX के लिए सबसे सही तरीकों का एक दस्तावेज़ तैयार किया है. साथ ही, पुश नोटिफ़िकेशन के साथ काम करते समय, कुछ किनारों के मामलों को कवर करने वाला एक दस्तावेज़ भी तैयार किया है.
Chrome और ओपन वेब पर पुश मैसेज की सुविधा का आने वाला वर्शन
इस सेक्शन में, Chrome को लागू करने के तरीके के कुछ ऐसे हिस्सों के बारे में थोड़ी जानकारी दी गई है जिनके बारे में आपको पता होना चाहिए. साथ ही, यह भी बताया जाएगा कि यह ब्राउज़र पर लागू करने के दूसरे तरीकों से कैसे अलग होगा.
वेब पुश प्रोटोकॉल और एंडपॉइंट
Push API स्टैंडर्ड की खासियत यह है कि आपके पास एंडपॉइंट लेने, उन्हें अपने सर्वर पर भेजने, और वेब पुश प्रोटोकॉल लागू करके पुश मैसेज भेजने की सुविधा होनी चाहिए.
वेब पुश प्रोटोकॉल ऐसा नया मानक है जिसे पुश प्रोवाइडर लागू कर सकते हैं, इससे डेवलपर को इस बात की चिंता नहीं करनी पड़ती कि पुश प्रोवाइडर कौन है. इसका सुझाव यह है कि इससे एपीआई पासकोड के लिए साइन अप करने और खास फ़ॉर्मैट वाला डेटा भेजने की ज़रूरत नहीं पड़ती, जैसा कि आपको FCM के लिए करना पड़ता है.
Chrome पहला ब्राउज़र था जिसने Push API को लागू किया और FCM पर वेब पुश प्रोटोकॉल
का इस्तेमाल नहीं किया गया. इसी वजह से Chrome को
gcm_sender_id की ज़रूरत होती है. इसलिए, आपको FCM के लिए सुरक्षित एपीआई का इस्तेमाल करना होगा.
Chrome का आखिरी लक्ष्य, Chrome और FCM के साथ वेब पुश प्रोटोकॉल का इस्तेमाल करना है.
तब तक, आपको एंडपॉइंट "https://fcm.googleapis.com/fcm/send" का पता लगाना होगा और इसे अन्य एंडपॉइंट से अलग मैनेज करना होगा. इसका मतलब है कि पेलोड डेटा को एक खास तरीके से फ़ॉर्मैट करना होगा और ऑथराइज़ेशन कुंजी जोड़ना होगा.
वेब पुश प्रोटोकॉल कैसे लागू करें?
Firefox Nightly फ़िलहाल पुश पर काम कर रहा है और संभव है कि यह वेब पुश प्रोटोकॉल लागू करने वाला पहला ब्राउज़र हो.
अक्सर पूछे जाने वाले सवाल
विशेषताएं कहां हैं?
https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ https://w3c.github.io/push-api/ https://notifications.spec.whatwg.org/
अगर वेब पर मेरी मौजूदगी एक से ज़्यादा ऑरिजिन से जुड़ी है या वेब और नेटिव, दोनों मौजूद हैं, तो क्या डुप्लीकेट सूचनाओं को रोका जा सकता है?
फ़िलहाल, इसका कोई हल नहीं है. हालांकि, Chromium पर प्रोग्रेस को फ़ॉलो किया जा सकता है.
सबसे सही स्थिति यह होगी कि उपयोगकर्ताओं के डिवाइस के लिए किसी तरह का आईडी हो. इसके बाद, सर्वर साइड पर नेटिव ऐप्लिकेशन और वेब ऐप्लिकेशन के सदस्यता आईडी से मेल खाए और तय करें कि किसे पुश मैसेज भेजा जाए. ऐसा करने के लिए, स्क्रीन साइज़, डिवाइस मॉडल, और वेब ऐप्लिकेशन के बीच जनरेट की गई कुंजी शेयर करें. हालांकि, हर तरीके के अपने फ़ायदे और नुकसान होते हैं.
मुझे gcm_sender_id की ज़रूरत क्यों है?
यह इसलिए ज़रूरी है, ताकि Chrome, Android के लिए Opera, और Samsung ब्राउज़र Firebase क्लाउड से मैसेज (FCM) एपीआई का इस्तेमाल कर सके. लक्ष्य, वेब पुश प्रोटोकॉल का इस्तेमाल तब करना होगा, जब स्टैंडर्ड तय हो जाए और FCM प्रोटोकॉल के साथ काम कर सके.
वेब सॉकेट या सर्वर से भेजे गए इवेंट (EventSource) का इस्तेमाल क्यों नहीं करना चाहिए?
पुश मैसेज का इस्तेमाल करने का यह फ़ायदा यह है कि आपका पेज बंद होने पर भी, आपका सर्विस वर्कर चालू हो जाएगा और वह इसकी सूचना दिखा पाएगा. पेज या ब्राउज़र बंद होने पर, वेब सॉकेट और EventSource का कनेक्शन बंद हो जाता है.
अगर मुझे बैकग्राउंड में इवेंट की डिलीवरी की ज़रूरत नहीं है, तो क्या होगा?
अगर आपको बैकग्राउंड डिलीवरी की ज़रूरत नहीं है, तो Web Sockets एक अच्छा विकल्प है.
सूचनाओं को दिखाए बिना पुश नोटिफ़िकेशन (जैसे कि साइलेंट बैकग्राउंड पुश) का इस्तेमाल कब किया जा सकता है?
यह सुविधा कब उपलब्ध होगी, इसके लिए अभी कोई समयावधि तय नहीं है. हालांकि, बैकग्राउंड सिंक लागू करने की इच्छा है. हालांकि, अभी तक कोई फ़ैसला नहीं लिया गया है या इसके लिए कोई खास जानकारी नहीं दी गई है, लेकिन बैकग्राउंड सिंक की मदद से बिना आवाज़ पुश करने की सुविधा को चालू करने पर चर्चा हो रही है.
इसके लिए एचटीटीपीएस की ज़रूरत क्यों है? डेवलपमेंट के दौरान मैं इस समस्या को कैसे हल करूं?
सर्विस वर्कर को सुरक्षित ऑरिजिन की ज़रूरत होती है, ताकि यह पक्का किया जा सके कि सर्विस वर्कर स्क्रिप्ट, बताए गए ऑरिजिन से है और किसी मैन-इन-द-मिडल हमले की वजह से नहीं ली गई है. फ़िलहाल, इसका मतलब लाइव साइटों पर एचटीटीपीएस का इस्तेमाल करने से है. हालांकि, डेवलपमेंट के दौरान localhost काम करेगा.
ब्राउज़र के साथ काम करने की सुविधा कैसी दिखती है?
Chrome इसके स्टेबल वर्शन में काम करता है और Mozilla में Firefox Nightly ऐप्लिकेशन पर पुश करने की सुविधा काम करती है. ज़्यादा जानकारी के लिए, Push API लागू करना बग देखें. सूचना लागू करने के उनके तरीके को यहां ट्रैक किया जा सकता है.
क्या किसी तय समयावधि के बाद सूचना को हटाया जा सकता है?
फ़िलहाल, ऐसा नहीं किया जा सकता. हालांकि, हम इस सुविधा को और बेहतर बनाने पर काम कर रहे हैं, ताकि आपको इस समय दिखने वाली सूचनाओं की सूची मिल सके. अगर आपके पास सूचना दिखने के बाद उसकी समयसीमा सेट करने का कोई उदाहरण है, तो हम उसके बारे में जानना चाहेंगे. इसलिए, कृपया अपनी टिप्पणी जोड़ें और हम इसे Chrome टीम को भेज देंगे.
अगर आपको सिर्फ़ एक तय समयावधि के बाद, उपयोगकर्ता को पुश नोटिफ़िकेशन भेजे जाने से रोकना है और इस बात की परवाह नहीं है कि नोटिफ़िकेशन कितने समय तक दिखेगा, तो FCM के लाइव होने का समय (ttl) पैरामीटर का इस्तेमाल किया जा सकता है, यहां ज़्यादा जानें.
Chrome में पुश मैसेज की सीमाएं क्या हैं?
इस पोस्ट में, कुछ सीमाओं के बारे में बताया गया है:
- अगर Chrome में पुश सेवा के तौर पर CCM का इस्तेमाल किया जाता है, तो मालिकाना हक से जुड़ी कई ज़रूरी शर्तें पूरी होती हैं. हम साथ मिलकर यह देख रहे हैं कि क्या आने वाले समय में इनमें से कुछ सुविधाओं को हटा दिया जाएगा.
- पुश मैसेज मिलने पर आपको एक सूचना दिखानी होगी.
- डेस्कटॉप पर Chrome में चेतावनी है कि अगर Chrome नहीं चल रहा है, तो पुश मैसेज नहीं मिलेंगे. यह ChromeOS और Android से अलग है, जहां पुश मैसेज हमेशा मिलेंगे.
क्या हमें अनुमतियों के एपीआई का इस्तेमाल नहीं करना चाहिए?
अनुमति एपीआई को Chrome में लागू किया जाता है, लेकिन यह ज़रूरी नहीं है कि यह सभी ब्राउज़र में उपलब्ध हो. आपको यहां ज़्यादा जानकारी मिल सकती है.
किसी सूचना पर क्लिक करने पर, Chrome पिछला टैब क्यों नहीं खोलता?
यह समस्या सिर्फ़ उन पेजों पर असर डालती है जिन्हें फ़िलहाल किसी सेवा देने वाले से कंट्रोल नहीं किया जाता है. आपको यहां ज़्यादा जानकारी मिल सकती है.
अगर उपयोगकर्ता के डिवाइस पर पुश मिलने के बाद, कोई सूचना पुरानी हो, तो क्या होगा?
पुश मैसेज मिलने पर, आपको हमेशा एक सूचना दिखानी होगी. ऐसे मामले में, जहां आपको सूचना भेजना है, लेकिन यह सिर्फ़ कुछ समय के लिए काम का है, तो CCM पर 'time_to_live' पैरामीटर का इस्तेमाल किया जा सकता है. इससे FCM समयसीमा खत्म होने का समय बीत जाने पर पुश मैसेज नहीं भेजेगा.
ज़्यादा जानकारी यहां मिल सकती है.
अगर मैं 10 पुश मैसेज भेजूं, लेकिन सिर्फ़ डिवाइस पर एक मैसेज पाना हो, तो क्या होगा?
FCM में एक 'छोटा_की' पैरामीटर होता है. इसका इस्तेमाल FCM को यह बताने के लिए किया जा सकता है कि वह ऐसे किसी भी मैसेज को नए मैसेज से बदल दे जिसके लिए पहले 'FCM_key' जैसा नहीं था.