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

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

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

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

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

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

पुश नोटिफ़िकेशन की सेवा देने वाली कंपनियां और पुश नोटिफ़िकेशन की सेवाएं

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

पुश नोटिफ़िकेशन की सेवा देने वाली कंपनी को खुद होस्ट करना

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

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

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 पर कोई मैसेज सबमिट किया जा सकता है. इसके बाद, मैसेज को सर्विस वर्कर के कंसोल में लॉग किया जाएगा.

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

साइलेंट पुश

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

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