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

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);

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

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

आगे कहां जाना है

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

कोड लैब

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