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

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 में यह ऐसा दिखेगा:

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

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 में (इस पर होवर करने पर) आपको यह मिलेगा:

वाइब्रेशन

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

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

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

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

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

कोड लैब

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