कोई सूचना दिखाई जा रही है

Alexey Rodionov

Matt Gaunt

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

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

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

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

<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 पिक्सल x डिवाइस पिक्सल रेशियो है.

इसका मतलब है कि 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' डिफ़ॉल्ट वैल्यू है.

फ़िलहाल, सिर्फ़ Chrome और Opera for Android पर कार्रवाइयां की जा सकती हैं.

ऊपर दिए गए उदाहरण में चार कार्रवाइयां तय की गई हैं. इससे पता चलता है कि आपके पास, दिखाए जाने से ज़्यादा कार्रवाइयां तय करने का विकल्प है. अगर आपको यह जानना है कि ब्राउज़र से कितनी कार्रवाइयां दिखाई जाएंगी, तो 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 में, इस पर कर्सर घुमाने पर आपको यह दिखेगा:

वाइब्रेशन

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

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

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 में, 00:00:00 यूटीसी (1 जनवरी, 1970) से लेकर अब तक के मिलीसेकंड की संख्या होनी चाहिए. इसे यूनिक्स इकोपॉच भी कहा जाता है.

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' को अपने पसंदीदा पैरामीटर के नाम से बदलें.

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

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

कोड लैब

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