सूचना का व्यवहार

Alexey Rodionov

Matt Gaunt

अब तक, हमने उन विकल्पों के बारे में जाना है जिनसे सूचना के विज़ुअल अपियरेंस में बदलाव किया जा सकता है. सूचनाओं के व्यवहार में बदलाव करने के लिए भी विकल्प मौजूद हैं.

डिफ़ॉल्ट रूप से, सिर्फ़ विज़ुअल विकल्पों के साथ showNotification() को कॉल करने पर, ये व्यवहार होंगे:

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

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

सूचना पर क्लिक करने का इवेंट

जब कोई उपयोगकर्ता किसी सूचना पर क्लिक करता है, तो डिफ़ॉल्ट रूप से कुछ नहीं होता. इससे सूचना बंद भी नहीं होती और न ही हटती है.

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

इसके लिए, आपको हमारे सर्विस वर्कर में 'notificationclick' इवेंट लिसनर जोड़ना होगा. जब भी किसी सूचना पर क्लिक किया जाएगा, तब इसे कॉल किया जाएगा.

self.addEventListener('notificationclick', (event) => {
  const clickedNotification = event.notification;
  clickedNotification.close();

  // Do something as the result of the notification click
  const promiseChain = doSomething();
  event.waitUntil(promiseChain);
});

जैसा कि इस उदाहरण में देखा जा सकता है, जिस सूचना पर क्लिक किया गया था उसे event.notification के तौर पर ऐक्सेस किया जा सकता है. इससे, सूचना की प्रॉपर्टी और तरीकों को ऐक्सेस किया जा सकता है. इस मामले में, इसके close() तरीके को कॉल करें और अतिरिक्त काम करें.

चेतावनी: जब आपका कोड काम कर रहा हो, तब सर्विस वर्कर को चालू रखने के लिए, आपको event.waitUntil() का इस्तेमाल करना होगा.

कार्रवाइयां

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

बटन

पिछले सेक्शन में, आपने showNotification() को कॉल करते समय ऐक्शन बटन तय करने का तरीका देखा:

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      title: 'Coffee',
      type: 'button',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

अगर उपयोगकर्ता किसी ऐक्शन बटन पर क्लिक करता है, तो noticationclick इवेंट में event.action वैल्यू देखें. इससे पता चलेगा कि किस ऐक्शन बटन पर क्लिक किया गया था.

event.action में, विकल्पों में सेट की गई action वैल्यू शामिल होगी. ऊपर दिए गए उदाहरण में, event.action की वैल्यू इनमें से कोई एक होगी: 'coffee-action', 'doughnut-action', 'gramophone-action' या 'atom-action'.

इसकी मदद से, हम सूचना पर होने वाले क्लिक या कार्रवाई पर होने वाले क्लिक का पता लगा सकते हैं:

self.addEventListener('notificationclick', (event) => {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'coffee-action':
      console.log("User ❤️️'s coffee.");
      break;
    case 'doughnut-action':
      console.log("User ❤️️'s doughnuts.");
      break;
    case 'gramophone-action':
      console.log("User ❤️️'s music.");
      break;
    case 'atom-action':
      console.log("User ❤️️'s science.");
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});

इनलाइन जवाब

पिछले सेक्शन में, आपने सूचना में इनलाइन जवाब जोड़ने का तरीका भी देखा:

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

event.reply में वह वैल्यू होगी जो उपयोगकर्ता ने इनपुट फ़ील्ड में टाइप की है:

self.addEventListener('notificationclick', (event) => {
  const reply = event.reply;

  // Do something with the user's reply
  const promiseChain = doSomething(reply);
  event.waitUntil(promiseChain);
});

टैग

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

चलिए, एक सूचना दिखाते हैं और उसे 'message-group-1' टैग देते हैं. हम इस कोड के साथ सूचना दिखाएंगे:

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

इससे हमारी पहली सूचना दिखेगी.

आइए, 'message-group-2' के नए टैग के साथ दूसरी सूचना दिखाएं. जैसे:

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

इससे उपयोगकर्ता को दूसरी सूचना दिखेगी.

अब तीसरी सूचना दिखाएं, लेकिन 'message-group-1' के पहले टैग का फिर से इस्तेमाल करें. ऐसा करने से पहली सूचना बंद हो जाएगी और उसकी जगह हमारी नई सूचना दिखेगी.

const title = 'Notification 3 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

अब हमारे पास दो सूचनाएं हैं, भले ही showNotification() को तीन बार कॉल किया गया हो.

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

tag का इस्तेमाल करने का एक फ़ायदा यह है कि जब यह किसी सूचना को बदलता है, तो यह आवाज़ या वाइब्रेशन के बिना ऐसा करता है.

ऐसे में, renotify विकल्प काम आता है.

फिर से सूचना दें

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

कुछ मामलों में, हो सकता है कि आप उपयोगकर्ता को सूचना देने के लिए, सूचना को चुपचाप अपडेट करने के बजाय, उसे बदलने वाली सूचना दिखाना चाहें. चैट ऐप्लिकेशन इसका एक अच्छा उदाहरण हैं. इस मामले में, आपको tag और renotify को true पर सेट करना चाहिए.

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);

चेतावनी: अगर आपने tag के बिना किसी सूचना पर renotify को true पर सेट किया है, तो आपको यह गड़बड़ी दिखेगी: TypeError: Failed to execute 'showNotification' on 'ServiceWorkerRegistration': Notifications which set the renotify flag must specify a non-empty tag

साइलेंट

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

यह तरीका तब सबसे सही होता है, जब आपकी सूचनाओं पर उपयोगकर्ता को तुरंत ध्यान देने की ज़रूरत न हो.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

ध्यान दें: अगर आपने silent और renotify, दोनों को तय किया है, तो silent को प्राथमिकता दी जाएगी.

इंटरैक्शन ज़रूरी है

डेस्कटॉप पर Chrome, सूचनाओं को छिपाने से पहले उन्हें तय समयावधि के लिए दिखाएगा. Android पर Chrome में यह सुविधा नहीं है. सूचनाएं तब तक दिखती हैं, जब तक उपयोगकर्ता उन पर कोई कार्रवाई नहीं करता.

किसी सूचना को तब तक स्क्रीन पर दिखाने के लिए जब तक उपयोगकर्ता उस पर कोई कार्रवाई नहीं करता, requireInteraction विकल्प जोड़ें. इससे सूचना तब तक दिखेगी, जब तक उपयोगकर्ता उसे खारिज नहीं करता या उस पर क्लिक नहीं करता.

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

इस विकल्प का इस्तेमाल सोच-समझकर करें. उपयोगकर्ता को सूचना दिखाना और उसे खारिज करने के लिए, उपयोगकर्ता को अपना काम रोकने के लिए मजबूर करना, उसे परेशान कर सकता है.

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

आगे क्या करना है

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

कोड लैब

• पुश नोटिफ़िकेशन क्लाइंट बनाना
• पुश नोटिफ़िकेशन सर्वर बनाना