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

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

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

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

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

एपीआई में इसे जोड़ना बहुत आसान है. आपको सिर्फ़ कार्रवाइयों का ऐरे बनाना होगा और उन्हें NotificationOptions ऑब्जेक्ट में जोड़ना होगा. ऐसा तब करें, जब किसी ServiceWorker रजिस्टरेशन से showNotification को कॉल किया जाए. showNotification को सीधे 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 इवेंट के ज़रिए होते हैं. ये इंटरैक्शन, सूचना पर सामान्य क्लिक या कार्रवाई करने वाले किसी बटन पर टैप करके किए जा सकते हैं. आने वाले समय में, notificationcloseevent पर भी जवाब दिया जा सकेगा.

यह समझने के लिए कि उपयोगकर्ता ने कौनसी कार्रवाई की है, आपको इवेंट पर 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);

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

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

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