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

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

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

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

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

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

पुश प्रोवाइडर और पुश सेवाएं

Manifest.json में अनुमति जोड़ने के बाद, आपको ये काम करने होंगे अपने बैकएंड और एक्सटेंशन के बीच कनेक्शन को कॉन्फ़िगर करें. यह कनेक्शन इसके बारे में दो भाग में बताया जा सकता है - पुश प्रोवाइडर और पुश सेवा. ऐप्लिकेशन provider वह SDK टूल है जिसका इस्तेमाल आपने पुश सेवा को मैसेज भेजने के लिए किया है. कई अलग-अलग विकल्प मौजूद हैं. साथ ही, पुश की सुविधा देने वाली कोई भी कंपनी पुश के लिए काम कर सकती है एपीआई (हालांकि, हो सकता है कि वे ऐसा 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;
}

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

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, इस वैल्यू को पेज के पुश सदस्यता वाले हिस्से में.

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

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

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

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

साइलेंट पुश

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

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