हाल ही में, मैं केवल वेब एपीआई का उपयोग करके जमीनी स्तर से निर्मित एक नए वेबपश पैकेज पर काम कर रहा हूं। इससे आपके ब्राउज़र से सीधे वेब पुश संदेश भेजना (सैद्धांतिक रूप से, कम से कम) संभव हो जाता है।

इस ब्लॉग पोस्ट का उद्देश्य यह बताना है कि वेब पुश प्रोटोकॉल क्या है, यह कैसे काम करता है
(आरएफसी 8291) और मेरी लाइब्रेरी का उपयोग करके वेब पुश संदेश कैसे भेजें।

वेब पुश प्रोटोकॉल क्या है?

वेब पुश प्रोटोकॉल एक मध्यवर्ती प्रोटोकॉल है जो किसी एप्लिकेशन को उपयोगकर्ता एजेंट (आमतौर पर एक ब्राउज़र) को संदेश भेजने की अनुमति देता है।

यह इस अर्थ में सर्वर-सेंटेड इवेंट्स (एसएसई) के समान है कि संदेश उपयोगकर्ता एजेंट को भेजे जाते हैं लेकिन यह एक अलग उद्देश्य पूरा करता है। वेब पुश संदेशों के लिए वेबसाइटों को सेवा कर्मियों के रूप में एक खुले टैब की आवश्यकता नहीं होती है
पुश संदेशों को सुन सकते हैं. यह पृष्ठभूमि में काम करता है।

वेब पुश प्रोटोकॉल कैसे काम करता है?

वेब पुश प्रोटोकॉल में तीन कलाकार शामिल हैं:

• उपयोगकर्ता-एजेंट: आपकी वेबसाइट विज़िटर ब्राउज़र आमतौर पर
• पुश सेवा: ब्राउज़र के आधार पर पुश सर्वर का रखरखाव और स्वामित्व Google, Mozilla या Apple द्वारा किया जाता है
• एप्लिकेशन सर्वर: आपका सर्वर

यहां उनके बीच बातचीत का अवलोकन दिया गया है:

     -------             --------------         ------------- 
    |  UA   |           | Push Service |       | Application |
     -------             --------------         ------------- 
        |                      |                      |
        |        Setup         |                      |
        ||                      |
        |           Provide Subscription              |
        |-------------------------------------------->|
        |                      |                      |
        :                      :                      :
        |                      |     Push Message     |
        |    Push Message      |



कई कारणों से एक मध्यवर्ती पुश सेवा की आवश्यकता है।

सबसे पहले, यह बैंडविड्थ और बैटरी के उपयोग को कम करता है क्योंकि उपयोगकर्ता एजेंट प्रति वेबसाइट एक के बजाय सभी वेबसाइटों के लिए केवल एक ही कनेक्शन बनाए रखते हैं।

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

अंत में, कस्टम पुश सेवा का निर्माण, तैनाती और रखरखाव अक्सर छोटी वेब कंपनियों के लिए बहुत जटिल और संसाधन-गहन होता है। इससे बड़े निगमों को अनुचित प्रतिस्पर्धात्मक लाभ मिलेगा, क्योंकि उनके पास अपनी स्वयं की पुश सेवाओं को विकसित और परिष्कृत करने के लिए आवश्यक संसाधन होंगे।

यदि आप मेरी तरह गोपनीयता के प्रति चिंतित उपयोगकर्ता हैं, तो एक मध्यस्थ सेवा देख रहे हैं

सभी संदेश प्राप्त करने पर लाल झंडे लहराए जाते हैं। इस चिंता का समाधान करने के लिए, वेब पुश

संदेश HTTP एन्क्रिप्टेड सामग्री-एन्कोडिंग के माध्यम से सुरक्षित हैं (मेरा 
 देखें)
http-ece पैकेज), यह सुनिश्चित करते हुए कि

संवेदनशील जानकारी किसी तीसरे पक्ष के लिए सुरक्षित और अपठनीय रहती है

पारगमन में सेवाएँ।

  
  
  स्थापित करना


आपने देखा होगा कि उपरोक्त ASCII ग्राफ़ में सेटअप तीर दूसरों से भिन्न है। ऐसा इसलिए है क्योंकि सेटअप चरण कार्यान्वयन पर निर्भर है। सभी प्रमुख ब्राउज़र जावास्क्रिप्ट लागू करते हैं

एपीआई को एक
 में पुश करें
अलग तरीका। एक PushManager.subscribe() विधि जो एक मानक लौटाती है

पुशसब्सक्रिप्शन उजागर हो गया है।

सब्सक्रिप्शन में हमेशा पुश सब्सक्रिप्शन से जुड़ा एक अद्वितीय यूआरएल एंडपॉइंट और संदेशों को एन्क्रिप्ट करने के लिए उपयोग की जाने वाली सार्वजनिक कुंजी होती है।

सदस्यता बनाते समय, संदेशों को पुश करने वाले एप्लिकेशन सर्वर की पहचान करने के लिए एक वैकल्पिक एप्लिकेशन सर्वरकी प्रदान की जा सकती है। यह स्वैच्छिक एप्लिकेशन सर्वर पहचान (वीएपीआईडी) प्रमाणीकरण विधि है

(आरएफसी 8292)। पुश सेवाओं पर DDOS हमलों को कम करने के लिए VAPID कुंजियों का उपयोग किया जाता है। साथ ही एप्लिकेशन सर्वर और पुश सेवा के बीच प्रमाणीकरण जोड़ने से सदस्यता समापन बिंदु के लीक होने का जोखिम कम हो जाता है। इन कारणों से, वे फ़ायरफ़ॉक्स में अनिवार्य हैं।

  
  
  सदस्यता प्रदान करें


दूसरा चरण सदस्यता को एप्लिकेशन सर्वर पर भेजना है ताकि वह संदेश भेजना शुरू कर सके।

एप्लिकेशन सर्वर आम तौर पर बाद में पुन: उपयोग के लिए डेटाबेस में सदस्यता संग्रहीत करेगा।

  
  
  संदेश पुश करें


अंत में, एक संदेश भेजने के लिए, एप्लिकेशन सर्वर एक अस्पष्ट प्रमाणीकरण योजना के साथ एक एन्क्रिप्टेड HTTP अनुरोध भेजता है यदि सदस्यता बनाने के लिए एप्लिकेशन सर्वरकी प्रदान की गई थी।

यदि पुश सेवा द्वारा संदेश प्राप्त होने पर उपयोगकर्ता एजेंट ऑनलाइन है, तो यह है

अग्रेषित. अन्यथा, इसे उपयोगकर्ता एजेंट के ऑनलाइन होने या संदेश समाप्त होने तक संग्रहीत किया जाता है।

जब उपयोगकर्ता एजेंट को एक संदेश प्राप्त होता है, तो यह पुश इवेंट हैंडलर को निष्पादित करता है जिसका उपयोग ज्यादातर अधिसूचना प्रदर्शित करने के लिए किया जाता है और बस इतना ही।

  
  
  वेबपश का उपयोग करके एप्लिकेशन सर्वर सेट करना


सबसे पहले आपको VAPID कुंजियाँ उत्पन्न करनी होंगी क्योंकि कुछ ब्राउज़र उन्हें अनिवार्य बनाते हैं:


$ deno run https://raw.githubusercontent.com/negrel/webpush/master/cmd/generate-vapid-keys.ts




आउटपुट को कॉपी करें और इसे एक फ़ाइल में सहेजें, आपको दोबारा VAPID कुंजी उत्पन्न करने की आवश्यकता नहीं है।

अपने एप्लिकेशन सर्वर कोड में, आप उन्हें निम्नानुसार लोड कर सकते हैं:


import * as webpush from "jsr:@negrel/webpush";

// Read generated VAPID file.
const vapidKeysJson = Deno.readTextFileSync("./path/to/vapid.json");

// Import VAPID keys.
webpush.importVapidKeys(JSON.parse(vapidKeysJson));




फिर, आपको एक एप्लिकेशन सर्वर ऑब्जेक्ट इंस्टेंस बनाना होगा।


// adminEmail is used by Push services maintainer to contact you in case there
// is problem with your application server.
const adminEmail = "[email protected]";

// Create an application server object.
const appServer = await webpush.ApplicationServer.new({
  contactInformation: "mailto:"   adminEmail,
  vapidKeys,
});




फिर पुश संदेश भेजने के लिए, बस एक पुशसब्सक्राइबर बनाएं और उसे कॉल करें

पुशमैसेज()/पुशटेक्स्टमैसेज() विधि इस प्रकार है:


const subsribers = [];

// HTTP handler for user agent sending their subscription.
function subscribeHandler(req) {
  // Extract subscription send by user agent.
  const subscription = await req.json();

  // Store subscription in db.
  // ...

  // Create a subscriber object.
  const sub = appServer.subscribe(subscription);

  // Store subscriber in memory.
  subscribers.push(sub);
}

// Helper method to send message to all subscribers.
function broadcastMessage(msg) {
  for (const sub of subscribes) {
    sub.pushTextMessage(msg, {});
  }
}




बस, आप अपने ग्राहकों को पुश संदेश भेज रहे हैं!

वेबपुश रिपॉजिटरी में समान कोड के साथ एक इंटरैक्टिव उदाहरण है जिसे आप स्थानीय रूप से चला सकते हैं। इसमें क्लाइंट साइड जावास्क्रिप्ट कोड भी शामिल है इसलिए इसे अवश्य जांच लें!