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

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

उपयोगकर्ता को बड़ी इमेज दिखाने के लिए, 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 और उसके बाद के वर्शन पर, ऐक्शन आइकॉन बिलकुल नहीं दिखते.

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

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

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

इन अंतरों के आधार पर, इनसे जुड़ा सबसे सही तरीका अपनाया जा सकता है:

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

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

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

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

उपयोगकर्ता अनुभव को बेहतर बनाने के सबसे सही तरीके

सूचना पाने की सुविधा में, UX से जुड़ी सबसे बड़ी गड़बड़ी देखी गई है. यह है, सूचना में दिखाई गई जानकारी में सही जानकारी न होना.

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

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

कुछ सामान्य गलतियां करने से बचें:

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

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

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

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

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

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

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

दूसरे विकल्पों के साथ, बस ऊपर जैसा ही करें, 'actions' को अपनी पसंद के पैरामीटर के नाम से बदलें.

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

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

कोड लैब

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