वेब पुश का इस्तेमाल करें

एक्सटेंशन में, पुश नोटिफ़िकेशन और मैसेज भेजने के लिए किसी भी पुश नोटिफ़िकेशन की सेवा देने वाली कंपनी का इस्तेमाल किया जा सकता है. आपका सर्विस वर्कर, पुश API को जल्द से जल्द प्रोसेस कर देगा. अगर सर्विस वर्कर को निलंबित कर दिया गया है, तो पुश नोटिफ़िकेशन उसे बैक अप कर देगा. एक्सटेंशन में इसका इस्तेमाल करने की प्रक्रिया ठीक वैसी ही है जैसी आप इसे ओपन वेब पर इस्तेमाल करेंगे.

Push API का इस्तेमाल करने की अनुमति लें

जब किसी सामान्य वेबसाइट पर पुश सर्वर रजिस्टर किया जाता है, तो उपयोगकर्ता को अनुमति देने या न देने के लिए, अनुमति का अनुरोध दिखाया जाता है. ऐसे एक्सटेंशन के साथ, प्रॉम्प्ट नहीं दिखाए जाएंगे. अपने एक्सटेंशन में Push API का इस्तेमाल करने के लिए, आपको अपनी Manifest.json में notifications अनुमति सेट करनी होगी

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

अगर आपके पास यह अनुमति नहीं है, तो registration.pushManager के साथ होने वाले किसी भी इंटरैक्शन से एक तुरंत गड़बड़ी हो जाएगी. यह गड़बड़ी तब ही होगी, जब उपयोगकर्ता ने अनुमति न दी हो. इसके अलावा, इस बात का ध्यान रखें कि notifications अनुमति की वजह से, ऐप्लिकेशन इंस्टॉल करने पर अनुमति से जुड़ी चेतावनी दिखेगी. जब तक उपयोगकर्ता नए अनुमति अनुरोध को स्वीकार नहीं करता, तब तक Chrome किसी भी मौजूदा इंस्टॉल के एक्सटेंशन को बंद रहेगा. इसे ठीक करने के तरीके के बारे में ज़्यादा जानने के लिए, अनुमति से जुड़ी चेतावनी की गाइड देखें.

पुश प्रोवाइडर और पुश सर्विस

अपनी Manifest.json में अनुमति जोड़ने के बाद, आपको अपने बैकएंड और एक्सटेंशन के बीच कनेक्शन को कॉन्फ़िगर करना होगा. इस कनेक्शन के बारे में दो हिस्सों में विचार किया जा सकता है - पुश प्रोवाइडर और पुश सेवा. प्रोवाइडर वह SDK टूल है जिसका इस्तेमाल, पुश सेवा को मैसेज भेजने के लिए किया जा रहा है. इसके कई अलग-अलग विकल्प हैं और कोई भी पुश प्रोवाइडर, Push API के लिए काम कर सकता है (हालांकि, ऐसा हो सकता है कि वह SDK टूल के लिए ऐसा कोई वर्शन न दे जो उसे आसानी से इंटिग्रेट करने की सुविधा देता हो). यह देखने के लिए कि क्या संभव है, आपको अपनी कंपनी के SDK टूल के साथ प्रयोग करना होगा. पुश सेवा, असली उपयोगकर्ता के डिवाइस पर रजिस्टर होती है. इसलिए, पुश की सेवा देने वाली कंपनी से भेजे गए किसी भी पुश मैसेज को इसकी सूचना दी जा सकती है. यह कुछ ऐसा है जिस पर आपका कोई नियंत्रण नहीं होता, क्योंकि इसे अलग-अलग ब्राउज़र में हार्डकोड किया जाता है. Chrome के लिए, Firebase क्लाउड से मैसेज एक पुश सेवा है. Chrome उपयोगकर्ता को पुश किया जा रहा कोई भी मैसेज इसके ज़रिए रूट हो जाएगा.

पुश प्रोवाइडर को खुद होस्ट करना

पुश की सेवा देने वाली कोई भी कंपनी काम कर सकती है. हालांकि, सभी प्रोवाइडर ऐसा SDK टूल नहीं देते जो सर्विस वर्कर के साथ काम करता है. अगर आपको इसे चलाने में कोई समस्या हो रही है, तो आपको अपने प्रोवाइडर से संपर्क करना होगा. हालांकि, आपको सेवा देने वाली किसी सार्वजनिक कंपनी का इस्तेमाल करने की ज़रूरत नहीं है. web-push जैसी लाइब्रेरी का इस्तेमाल करके, अपना बैकएंड होस्ट किया जा सकता है.

web-push-codelab.glitch.me इस्तेमाल करके इस लाइब्रेरी की जाँच करें. खास तौर पर, ब्राउज़र में पुश सदस्यता जनरेट करने के लिए, आपको पुश सर्वर की VAPID सार्वजनिक कुंजी को कॉपी करना होगा. यह सार्वजनिक कुंजी, असल में base64 एन्कोड की गई बाइनरी वैल्यू है. ब्राउज़र के पुश मैनेजर के साथ रजिस्टर करने के लिए, इसे डिकोड करके, Uint8Array में बदलना होगा. इस लॉजिक को लागू करने के लिए लाइब्रेरी उपलब्ध हैं, लेकिन इन सबकी ज़रूरत है.

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

दी गई वैल्यू, Push Manager में पास कर दी जाती है

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

subscribe फ़ंक्शन एक PushSubscription दिखाता है, जो ऐसा ऑब्जेक्ट है जिसमें पुश सर्वर का मेटाडेटा होता है. web-push-codelab.glitch.me वैल्यू का इस्तेमाल इसलिए किया जा रहा है, इसलिए इस वैल्यू को पेज के पुश सदस्यता वाले हिस्से में कॉपी करना होगा.

PushSubscription इंस्टॉल करने के बाद, हमारे एक्सटेंशन के सर्विस वर्कर में पुश मैसेज के लिए एक लिसनर रजिस्टर करने के लिए तैयार हो जाते हैं.

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

जब आपका लिसनर सही हो, तो web-push-codelab.glitch.me पर मैसेज सबमिट करें. इससे मैसेज सर्विस वर्कर के कंसोल में लॉग इन हो जाएंगे.

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

साइलेंट पुश

Chrome 88 में मेनिफ़ेस्ट v3 के लॉन्च होने की वजह से, आपको अपने मेनिफ़ेस्ट v3 एक्सटेंशन में पुश नोटिफ़िकेशन मिलने की सुविधा मिल रही है. हालांकि, हमेशा यह ज़रूरी था कि सूचना में उपयोगकर्ता को दिखने वाला कोई खास तरह का प्रॉम्प्ट दिखाया जाए, जैसे कि वेब सूचना. अगर आप उपयोगकर्ता को बेवजह जानकारी दिए बिना अपने एक्सटेंशन में निर्देश या डेटा अपडेट भेजना चाहते हैं, तो यह बहुत कम उपयोगी होता है. Chrome 121 से, एक्सटेंशन userVisibleOnly को false पर सेट कर सकते हैं. अब अपने उपयोगकर्ताओं को पुश नोटिफ़िकेशन भेजे जा सकते हैं, जो उन लोगों को नहीं भेजे जाते. इसका इस्तेमाल करने के लिए, pushManager.subscribe को कॉल करते समय userVisibleOnly को false पर सेट करें.

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});