सूचना दिखाना

Alexey Rodionov

Matt Gaunt

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

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

विज़ुअल के विकल्प

सूचना दिखाने के लिए एपीआई का इस्तेमाल करना आसान है:

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

title और options, दोनों आर्ग्युमेंट ज़रूरी नहीं हैं.

टाइटल एक स्ट्रिंग है और विकल्प इनमें से कोई भी हो सकता है:

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  "timestamp": "<Long>"

  "//": "Both visual & behavioral options",
  "actions": "<Array of Strings>",
  "data": "<Anything>",

  "//": "Behavioral Options",
  "tag": "<String>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "silent": "<Boolean>",
}

आइए, विज़ुअल के विकल्पों पर नज़र डालते हैं:

टाइटल और मुख्य हिस्से के विकल्प

Windows पर Chrome में, बिना टाइटल और विकल्पों वाली सूचना इस तरह दिखती है:

जैसा कि आप देख सकते हैं, ब्राउज़र के नाम का इस्तेमाल टाइटल के तौर पर किया जाता है. साथ ही, "नई सूचना" प्लेसहोल्डर का इस्तेमाल, सूचना के मुख्य हिस्से के तौर पर किया जाता है.

अगर डिवाइस पर कोई प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल है, तो ब्राउज़र के नाम के बजाय वेब ऐप्लिकेशन के नाम का इस्तेमाल किया जाएगा:

अगर हम यह कोड चलाएं:

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

हमें Linux पर Chrome में यह सूचना मिलेगी:

Linux पर Firefox में यह कुछ ऐसा दिखेगा:

Linux पर Chrome में, टाइटल और मुख्य हिस्से में ज़्यादा टेक्स्ट वाली सूचना इस तरह दिखती है:

Linux पर Firefox, मुख्य टेक्स्ट को तब तक छोटा करके दिखाता है, जब तक सूचना पर कर्सर न ले जाया जाए. कर्सर ले जाने पर, सूचना बड़ी हो जाती है:

Windows पर Firefox में यही सूचनाएं इस तरह दिखती हैं:

जैसा कि आप देख सकते हैं, एक ही सूचना अलग-अलग ब्राउज़र में अलग-अलग दिख सकती है. यह भी हो सकता है कि अलग-अलग प्लैटफ़ॉर्म पर एक ही ब्राउज़र में, यह अलग-अलग दिखे.

Chrome और Firefox, उन प्लैटफ़ॉर्म पर सिस्टम की सूचनाओं और सूचना केंद्र का इस्तेमाल करते हैं जहां ये उपलब्ध हैं.

उदाहरण के लिए, macOS पर सिस्टम की सूचनाओं में इमेज और कार्रवाइयां (बटन और इनलाइन जवाब) काम नहीं करतीं.

Chrome में सभी डेस्कटॉप प्लैटफ़ॉर्म के लिए, पसंद के मुताबिक सूचनाएं पाने की सुविधा भी है. इसे चालू करने के लिए, chrome://flags/#enable-system-notifications फ़्लैग को Disabled स्थिति पर सेट करें.

आइकॉन

icon विकल्प, एक छोटी इमेज होती है. इसे टाइटल और मुख्य टेक्स्ट के बगल में दिखाया जा सकता है.

आपको अपने कोड में उस इमेज का यूआरएल देना होगा जिसे आपको लोड करना है:

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

Linux पर Chrome में आपको यह सूचना मिलती है:

Linux पर Firefox में:

आइकॉन के लिए किस साइज़ की इमेज इस्तेमाल करनी चाहिए, इसके लिए कोई ठोस दिशा-निर्देश नहीं हैं.

ऐसा लगता है कि Android को 64dp वाली इमेज चाहिए (यह डिवाइस के पिक्सल अनुपात से 64 पिक्सल को गुणा करने पर मिलता है).

अगर किसी डिवाइस के लिए पिक्सल का सबसे ज़्यादा अनुपात 3 है, तो 192 पिक्सल या उससे ज़्यादा साइज़ का आइकॉन इस्तेमाल करना सही रहेगा.

ध्यान दें: कुछ ब्राउज़र में, इमेज को एचटीटीपीएस पर ऐक्सेस करना ज़रूरी हो सकता है. अगर आपको तीसरे पक्ष की इमेज का इस्तेमाल करना है, तो इस बात का ध्यान रखें.

बैज

badge एक छोटा मोनोक्रोम आइकॉन होता है. इसका इस्तेमाल, उपयोगकर्ता को यह बताने के लिए किया जाता है कि सूचना कहां से मिली है:

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

यह लेख लिखे जाने के समय, बैज का इस्तेमाल सिर्फ़ Android पर Chrome में किया जाता है.

अन्य ब्राउज़र (या बिना बैज वाले Chrome) पर, आपको ब्राउज़र का आइकॉन दिखेगा.

icon विकल्प की तरह ही, इसमें भी साइज़ को लेकर कोई खास दिशा-निर्देश नहीं हैं.

Android के दिशा-निर्देशों के मुताबिक, सुझाया गया साइज़ 24 पिक्सल को डिवाइस के पिक्सल अनुपात से गुणा करके निकाला जाता है.

इसका मतलब है कि 72 पिक्सल या इससे ज़्यादा साइज़ की इमेज सही होनी चाहिए. हालांकि, इसके लिए डिवाइस के पिक्सल का अनुपात ज़्यादा से ज़्यादा 3 होना चाहिए.

इमेज

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

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

Linux पर Chrome में सूचना कुछ इस तरह दिखेगी:

Android पर Chrome में, इमेज को काटने और उसके आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के लिए अलग-अलग विकल्प होते हैं:

डेस्कटॉप और मोबाइल के बीच अनुपात में अंतर होने की वजह से, दिशा-निर्देशों का सुझाव देना बेहद मुश्किल है.

डेस्कटॉप पर Chrome, उपलब्ध जगह को नहीं भरता और इसका अनुपात 4:3 होता है. इसलिए, शायद सबसे सही तरीका यह है कि इस अनुपात वाली इमेज दिखाई जाए और Android को इमेज काटने की अनुमति दी जाए. हालांकि, image विकल्प अब भी बदल सकता है.

Android पर, सिर्फ़ 450dp की चौड़ाई वाली गाइडलाइन है.

इस दिशा-निर्देश के मुताबिक, 1350 पिक्सल या इससे ज़्यादा चौड़ाई वाली इमेज का इस्तेमाल करना बेहतर होगा.

कार्रवाइयां (बटन)

सूचना के साथ बटन दिखाने के लिए, actions को तय किया जा सकता है:

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      type: 'button',
      title: 'Coffee',
      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);

हर कार्रवाई के लिए, title, action (जो कि एक आईडी होता है), icon, और type तय किया जा सकता है. टाइटल और आइकॉन, सूचना में दिखते हैं. आईडी का इस्तेमाल तब किया जाता है, जब यह पता लगाना हो कि ऐक्शन बटन पर क्लिक किया गया था या नहीं. इसके बारे में ज़्यादा जानकारी अगले सेक्शन में दी गई है. टाइप को छोड़ा जा सकता है, क्योंकि 'button' डिफ़ॉल्ट वैल्यू है.

फ़िलहाल, Android के लिए सिर्फ़ Chrome और Opera में कार्रवाइयां करने की सुविधा उपलब्ध है.

ऊपर दिए गए उदाहरण में, चार कार्रवाइयां तय की गई हैं. इससे यह पता चलता है कि आपके पास, दिखाई जाने वाली कार्रवाइयों से ज़्यादा कार्रवाइयां तय करने का विकल्प है. अगर आपको यह जानना है कि ब्राउज़र कितनी कार्रवाइयां दिखाएगा, तो window.Notification?.maxActions देखें:

const maxVisibleActions = window.Notification?.maxActions;

if (maxVisibleActions) {
  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
  options.body = 'Notification actions are not supported.';
}

डेस्कटॉप पर, ऐक्शन बटन के आइकॉन अपने रंग दिखाते हैं (गुलाबी डोनट देखें):

Android 6 और इससे पहले के वर्शन पर, आइकॉन का रंग सिस्टम की कलर स्कीम के हिसाब से होता है:

Android 7 और इसके बाद के वर्शन पर, कार्रवाई करने से जुड़े आइकॉन बिलकुल नहीं दिखते.

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

यह भी ध्यान देने वाली बात है कि आइकॉन, Android पर साफ़ तौर पर दिखते हैं, लेकिन डेस्कटॉप पर नहीं.

डेस्कटॉप Chrome पर काम करने के लिए, मुझे 24 पिक्सल x 24 पिक्सल का सबसे सही साइज़ मिला. यह Android पर अजीब लगता है.

इन अंतरों से हम यह सबसे सही तरीका अपना सकते हैं:

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

सूचना की खास जानकारी में, आइकॉन के कई साइज़ तय करने का तरीका खोजा जा रहा है. हालांकि, ऐसा लगता है कि इस पर सहमति बनने में कुछ समय लगेगा.

कार्रवाइयां (इनलाइन जवाब)

'text' टाइप के साथ कोई कार्रवाई तय करके, सूचना में इनलाइन जवाब जोड़ा जा सकता है:

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  image: '/images/demos/avatar-512x512.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
    }
  ],
};

registration.showNotification(title, options);

Android पर यह कुछ ऐसा दिखेगा:

ऐक्शन बटन पर क्लिक करने से, टेक्स्ट इनपुट फ़ील्ड खुलता है:

टेक्स्ट इनपुट फ़ील्ड के लिए प्लेसहोल्डर को पसंद के मुताबिक बनाया जा सकता है:

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  icon: '/images/demos/avatar-512x512.jpg',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
      placeholder: 'Type text here',
    }
  ],
};

registration.showNotification(title, options);

Windows पर Chrome में, टेक्स्ट इनपुट फ़ील्ड हमेशा दिखता है. इसके लिए, ऐक्शन बटन पर क्लिक करने की ज़रूरत नहीं होती:

एक से ज़्यादा इनलाइन जवाब जोड़े जा सकते हैं या बटन और इनलाइन जवाबों को जोड़ा जा सकता है:

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

दिशा

dir पैरामीटर की मदद से, यह तय किया जा सकता है कि टेक्स्ट किस दिशा में दिखेगा. जैसे, दाएं से बाएं या बाएं से दाएं.

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

अगर हो सके, तो इसे तय करना सबसे सही रहेगा. ऐसा न करने पर, ब्राउज़र को दिए गए टेक्स्ट के हिसाब से सही काम करना चाहिए.

पैरामीटर को auto, ltr या rtl पर सेट किया जाना चाहिए.

Linux पर Chrome में, दाएं से बाएं लिखी जाने वाली भाषा कुछ इस तरह दिखती है:

Firefox में, इस पर कर्सर घुमाने पर आपको यह दिखेगा:

वाइब्रेशन

चेतावनी: Android 8 और इसके बाद के वर्शन पर, vibrate के लिए सहायता बंद कर दी गई है.

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

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

const title = 'Vibrate Notification';

const options = {
  // Star Wars shamelessly taken from the awesome Peter Beverloo
  // https://tests.peter.sh/notification-generator/
  vibrate: [
    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
    40, 500,
  ],
};

registration.showNotification(title, options);

इसका असर सिर्फ़ उन डिवाइसों पर पड़ता है जिनमें वाइब्रेशन की सुविधा काम करती है.

आवाज़

साउंड पैरामीटर की मदद से, सूचना मिलने पर सुनाई देने वाली आवाज़ तय की जा सकती है.

यह लेख लिखे जाने के समय, किसी भी ब्राउज़र में यह विकल्प काम नहीं करता था.

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

टाइमस्टैम्प

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

timestamp, 1 जनवरी, 1970 को 00:00:00 यूटीसी (जो कि UNIX epoch है) के बाद से मिलीसेकंड की संख्या होनी चाहिए.

const title = 'Timestamp Notification';

const options = {
  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
  timestamp: Date.parse('01 Jan 2000 00:00:00'),
};

registration.showNotification(title, options);

उपयोगकर्ता अनुभव (यूएक्स) के लिए सबसे सही तरीके

मैंने सूचनाओं के साथ यूएक्स की सबसे बड़ी गड़बड़ी देखी है. वह यह है कि सूचना में दिखाई गई जानकारी में खास जानकारी नहीं होती.

आपको यह सोचना चाहिए कि आपने पुश मैसेज क्यों भेजा. साथ ही, यह पक्का करें कि सूचना के सभी विकल्पों का इस्तेमाल किया गया हो, ताकि उपयोगकर्ताओं को यह समझने में मदद मिल सके कि उन्हें वह सूचना क्यों मिल रही है.

ईमानदारी से कहें, तो उदाहरणों को देखकर यह सोचना आसान है कि "मैं कभी ऐसी गलती नहीं करूंगा". लेकिन इस जाल में फंसना आपकी सोच से ज़्यादा आसान है.

अक्सर होने वाली कुछ गलतियों से बचें:

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

ब्राउज़र और सुविधाओं का पता लगाना

इस लेख को लिखे जाने के समय, सूचनाओं की सुविधा के मामले में Chrome और Firefox के बीच काफ़ी अंतर है.

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

मान लें कि हमें यह जानना है कि किसी सूचना में ऐक्शन बटन काम करते हैं या नहीं, तो हम यह तरीका अपनाएंगे:

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

इससे हम अपने उपयोगकर्ताओं को दिखने वाली सूचना में बदलाव कर सकते हैं.

अन्य विकल्पों के लिए, ऊपर बताए गए तरीके का ही इस्तेमाल करें. इसके लिए, 'actions' को अपनी पसंद के पैरामीटर के नाम से बदलें.

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

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

कोड लैब

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