Chrome 48 में सूचना कार्रवाइयां

पॉल किनलन
पॉल किनलन

साल 2015 की शुरुआत में हमने Android और डेस्कटॉप के लिए, Chrome में पुश मैसेज सेवा और सूचना देने की सुविधा लॉन्च की. यह वेब पर आगे बढ़ने के लिए एक अच्छा कदम था. ब्राउज़र के बंद होने पर भी उपयोगकर्ता वेब पर मिलने वाले अनुभवों को गहराई से समझ सकते थे.

हालांकि, यह अच्छी बात है कि आप ये मैसेज भेज सकते हैं, लेकिन इस पर क्लिक करके आप किसी पेज को खोल सकते हैं या उसे पूरी तरह खारिज कर सकते हैं.

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

सूचना का स्क्रीनशॉट

इस एपीआई को जोड़ना बहुत आसान है. आपको सिर्फ़ सर्विस वर्कर रजिस्ट्रेशन से showNotification को कॉल करते समय, कार्रवाइयों की एक कैटगरी बनानी होगी और उन्हें NotificationOptions ऑब्जेक्ट में जोड़ना होगा (सीधे तौर पर ServiceWorker में या navigator.serviceWorker.ready के ज़रिए किसी पेज पर).

फ़िलहाल, Chrome पर हर सूचना पर सिर्फ़ दो कार्रवाइयां की जा सकती हैं. ऐसा हो सकता है कि कुछ प्लैटफ़ॉर्म पर ज़्यादा सुविधाएं काम करें, जबकि कुछ प्लैटफ़ॉर्म पर यह सुविधा कम हो या बिलकुल भी काम न करे. Notification.maxActions पर जाकर आप तय कर सकते हैं कि यह प्लैटफ़ॉर्म किन चीज़ों के साथ काम करता है. नीचे दिए गए उदाहरणों में, हम मान रहे हैं कि प्लैटफ़ॉर्म दो कार्रवाइयों के साथ काम करता है.

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like'},
    {action: 'reply', title: 'Reply'}]
});

इससे, दो बटन से एक सामान्य सूचना बन जाएगी. ध्यान दें, सिर्फ़ कार्रवाई में आइकॉन को सीधे तौर पर (अभी) जोड़ा नहीं जा सकता. हालांकि, अपने सूचना बटन में ज़्यादा संदर्भ जोड़ने के लिए, इमोजी और यूनिकोड के वर्ण सेट का इस्तेमाल किया जा सकता है.

उदाहरण के लिए:

self.registration.showNotification("New message from Alice", {
  actions: [
    {action: 'like', title: '👍Like'},
    {action: 'reply', title: '⤻ Reply'}]
});

अब जब आपने कोई सूचना बनाकर उसे देखा है 😻, तो उपयोगकर्ता आने वाले समय में कभी उस सूचना को बोलकर देख सकता है. फ़िलहाल, सूचना पर होने वाले इंटरैक्शन (Chrome 48 तक के वर्शन) आपके सर्विस वर्कर में रजिस्टर किए गए notificationclick इवेंट के ज़रिए होते हैं. ये इंटरैक्शन या तो सूचना पर सामान्य क्लिक या किसी एक ऐक्शन बटन पर कोई खास टैप हो सकते हैं. ध्यान दें कि आने वाले समय में, सूचना बंदइवेंट का जवाब भी दिया जा सकेगा.

यह समझने के लिए कि उपयोगकर्ता ने क्या कार्रवाई की है, आपको इवेंट की action प्रॉपर्टी की जांच करनी होगी. इसके बाद, आपके पास कोई नया पेज खोलने का विकल्प होगा, ताकि उपयोगकर्ता कोई कार्रवाई कर सके या बैकग्राउंड में टास्क कर सके.

self.addEventListener('notificationclick', function(event) {
  var messageId = event.notification.data;

  event.notification.close();

  if (event.action === 'like') {
    silentlyLikeItem();
  }
  else if (event.action === 'reply') {
    clients.openWindow("/messages?reply=" + messageId);
  }
  else {
    clients.openWindow("/messages?reply=" + messageId);
  }
}, false);

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

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

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