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

Alexey Rodionov

Matt Gaunt

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

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

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

इस सेक्शन में हम जानेंगे कि अलग-अलग विकल्पों का इस्तेमाल करके, अकेले. इन्हें आसानी से लागू किया जा सकता है और इनका फ़ायदा लिया जा सकता है.

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

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

किसी सूचना पर होने वाले क्लिक का सामान्य तरीका यह है कि उसे बंद कर दिया जाए और कोई दूसरा लॉजिक किया जाए (जैसे, कोई विंडो खोलें या ऐप्लिकेशन के लिए कुछ API कॉल करें).

इसे पाने के लिए, आपको हमारे सर्विस वर्कर में '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() तरीके को कॉल करते हैं और अतिरिक्त काम करते हैं.

कार्रवाइयां

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

बटन

पिछले सेक्शन में, आपने 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 और true के लिए renotify.

const title = 'Notification 2 of 2';

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

registration.showNotification(title, options);

साइलेंट

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

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

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

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

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

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

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

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

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

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

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

कोड लैब

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