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

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

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

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

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

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

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

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

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

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

इस लाइब्रेरी को आज़माने के लिए web-push-codelab.glitch.me का इस्तेमाल करें. खास तौर पर, ब्राउज़र में Push सदस्यता जनरेट करने के लिए, आपको Push सर्वर की 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;
}

दी गई वैल्यू को पुश मैनेजर में भेजा जाता है

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
});