वेब पुश इंटरऑपरेबिलिटी जीत

Joe Medley
Joe Medley
GitHub

जब Chrome में पहली बार वेब पुश एपीआई का इस्तेमाल किया गया था, तब यह Firebase Cloud Messaging (FCM) पर निर्भर था. इसे पहले Google Cloud Messaging (GCM) कहा जाता था. यह पुश सेवा है. इसके लिए, आपको इसके मालिकाना एपीआई का इस्तेमाल करना होगा. इसकी मदद से, Chrome ने डेवलपर के लिए Web Push API को तब उपलब्ध कराया, जब वेब पुश प्रोटोकॉल के स्पेसिफ़िकेशन को अभी लिखा जा रहा था. बाद में, जब वेब पुश प्रोटोकॉल में पुष्टि करने की सुविधा नहीं थी, तब भी Chrome ने पुष्टि करने की सुविधा उपलब्ध कराई. अच्छी खबर: अब इनमें से कोई भी बात सही नहीं है.

FCM / GCM और Chrome अब स्टैंडर्ड वेब पुश प्रोटोकॉल के साथ काम करते हैं. साथ ही, VAPID को लागू करके, ईमेल भेजने वाले की पुष्टि की जा सकती है. इसका मतलब है कि अब आपके वेब ऐप्लिकेशन को 'gcm_sender_id' की ज़रूरत नहीं है.

इस लेख में, हम सबसे पहले आपको अपने मौजूदा सर्वर कोड को बदलने का तरीका बताएंगे, ताकि FCM के साथ वेब पुश प्रोटोकॉल का इस्तेमाल किया जा सके. इसके बाद, हम आपको अपने क्लाइंट और सर्वर कोड, दोनों में VAPID को लागू करने का तरीका बताएंगे.

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

आइए, थोड़ा कॉन्टेक्स्ट से शुरू करते हैं. जब आपका वेब ऐप्लिकेशन पुश सदस्यता के लिए रजिस्टर करता है, तो उसे पुश सेवा का यूआरएल दिया जाता है. आपका सर्वर, आपके वेब ऐप्लिकेशन के ज़रिए उपयोगकर्ता को डेटा भेजने के लिए, इस एंडपॉइंट का इस्तेमाल करेगा. अगर आपने किसी उपयोगकर्ता को VAPID के बिना सदस्यता दी है, तो आपको Chrome में FCM एंडपॉइंट दिया जाएगा. (हम बाद में VAPID के बारे में बताएंगे). FCM के साथ काम करने वाले वेब पुश प्रोटोकॉल से पहले, आपको यूआरएल के आखिर से FCM रजिस्ट्रेशन आईडी निकालना पड़ता था. साथ ही, FCM API का अनुरोध करने से पहले, उसे हेडर में डालना पड़ता था. उदाहरण के लिए, https://android.googleapis.com/gcm/send/ABCD1234 के FCM एंडपॉइंट का रजिस्ट्रेशन आईडी 'ABCD1234' होगा.

अब FCM, वेब पुश प्रोटोकॉल के साथ काम करता है. इसलिए, एंडपॉइंट में कोई बदलाव किए बिना, यूआरएल को वेब पुश प्रोटोकॉल एंडपॉइंट के तौर पर इस्तेमाल किया जा सकता है. (इससे यह Firefox और आने वाले समय में लॉन्च होने वाले हर ब्राउज़र के साथ काम करेगा.)

VAPID के बारे में जानने से पहले, हमें यह पक्का करना होगा कि हमारा सर्वर कोड, FCM एंडपॉइंट को सही तरीके से मैनेज करता हो. Node में पुश सेवा के लिए अनुरोध करने का उदाहरण यहां दिया गया है. ध्यान दें कि FCM के लिए, हम अनुरोध के हेडर में एपीआई पासकोड जोड़ रहे हैं. पुश सेवा के अन्य एंडपॉइंट के लिए, इसकी ज़रूरत नहीं होगी. Chrome के 52 से पहले के वर्शन, Opera Android, और Samsung Browser के लिए, आपको अब भी अपने वेब ऐप्लिकेशन के manifest.json में 'gcm_sender_id' शामिल करना होगा. एपीआई कुंजी और ईमेल भेजने वाले व्यक्ति के आईडी का इस्तेमाल, यह जांचने के लिए किया जाता है कि अनुरोध करने वाले सर्वर को, ईमेल पाने वाले व्यक्ति को मैसेज भेजने की अनुमति है या नहीं.

const headers = new Headers();
// 12-hour notification time to live.
headers.append('TTL', 12 * 60 * 60);
// Assuming no data is going to be sent
headers.append('Content-Length', 0);

// Assuming you're not using VAPID (read on), this
// proprietary header is needed
if(subscription.endpoint
    .indexOf('https://android.googleapis.com/gcm/send/') === 0) {
    headers.append('Authorization', 'GCM_API_KEY');
}

fetch(subscription.endpoint, {
    method: 'POST',
    headers: headers
})
.then(response => {
    if (response.status !== 201) {
    throw new Error('Unable to send push message');
    }
});

याद रखें, यह FCM / GCM के एपीआई में हुआ बदलाव है. इसलिए, आपको अपनी सदस्यताओं को अपडेट करने की ज़रूरत नहीं है. ऊपर दिखाए गए हेडर को तय करने के लिए, बस अपने सर्वर कोड में बदलाव करें.

सर्वर की पहचान करने के लिए VAPID का इस्तेमाल करना

VAPID, "Voluntary Application Server Identification" का छोटा और नया नाम है. इस नए स्पेसिफ़िकेशन में, आपके ऐप्लिकेशन सर्वर और पुश सेवा के बीच हैंडशेक की जानकारी दी गई है. साथ ही, पुश सेवा को यह पुष्टि करने की अनुमति दी गई है कि मैसेज कौनसी साइट भेज रही है. VAPID की मदद से, पुश मैसेज भेजने के लिए FCM के खास चरणों को छोड़ा जा सकता है. अब आपको Firebase प्रोजेक्ट, gcm_sender_id या Authorization हेडर की ज़रूरत नहीं है.

यह प्रोसेस बहुत आसान है:

  1. आपका ऐप्लिकेशन सर्वर, सार्वजनिक/निजी कुंजी का जोड़ा बनाता है. सार्वजनिक कुंजी, आपके वेब ऐप्लिकेशन को दी जाती है.
  2. जब उपयोगकर्ता पुश नोटिफ़िकेशन पाने का विकल्प चुनता है, तो subscribe() कॉल के विकल्प ऑब्जेक्ट में सार्वजनिक पासकोड जोड़ें.
  3. जब आपका ऐप्लिकेशन सर्वर कोई पुश मैसेज भेजता है, तो सार्वजनिक पासकोड के साथ हस्ताक्षर किया गया JSON वेब टोकन शामिल करें.

आइए, इन चरणों के बारे में ज़्यादा जानें.

सार्वजनिक/निजी कुंजी का जोड़ा बनाना

मैं एन्क्रिप्शन के बारे में बहुत कम जानता/जानती हूं. इसलिए, यहां VAPID की सार्वजनिक/निजी कुंजियों के फ़ॉर्मैट के बारे में खास जानकारी वाला सेक्शन दिया गया है:

ऐप्लिकेशन सर्वर को साइनिंग पासकोड का एक ऐसा जोड़ा जनरेट और मैनेज करना चाहिए जिसका इस्तेमाल, P-256 कर्व पर मौजूद एलिपटिक कर्व डिजिटल हस्ताक्षर (ईसीएसडीए) के साथ किया जा सके.

वेब-पुश नोड लाइब्रेरी में जाकर, यह तरीका देखा जा सकता है:

function generateVAPIDKeys() {
    var curve = crypto.createECDH('prime256v1');
    curve.generateKeys();

    return {
    publicKey: curve.getPublicKey(),
    privateKey: curve.getPrivateKey(),
    };
}

सार्वजनिक पासकोड की मदद से सदस्यता लेना

VAPID की सार्वजनिक कुंजी का इस्तेमाल करके, Chrome उपयोगकर्ता को पुश नोटिफ़िकेशन की सदस्यता देने के लिए, आपको subscribe() तरीके के applicationServerKey पैरामीटर का इस्तेमाल करके, सार्वजनिक कुंजी को Uint8Array के तौर पर पास करना होगा.

const publicKey = new Uint8Array([0x4, 0x37, 0x77, 0xfe, …. ]);
serviceWorkerRegistration.pushManager.subscribe(
    {
    userVisibleOnly: true,
    applicationServerKey: publicKey
    }
);

आपको यह पता चल जाएगा कि यह काम कर रहा है या नहीं. इसके लिए, सदस्यता ऑब्जेक्ट में मौजूद एंडपॉइंट की जांच करें. अगर ऑरिजिन fcm.googleapis.com है, तो इसका मतलब है कि यह काम कर रहा है.

https://fcm.googleapis.com/fcm/send/ABCD1234

पुश मैसेज भेजना

VAPID का इस्तेमाल करके मैसेज भेजने के लिए, आपको दो अतिरिक्त एचटीटीपी हेडर के साथ सामान्य वेब पुश प्रोटोकॉल का अनुरोध करना होगा: अनुमति हेडर और क्रिप्टो-की हेडर.

अनुमति हेडर

Authorization हेडर, हस्ताक्षर किया गया JSON वेब टोकन (JWT) है. इसके आगे 'WebPush ' है.

JWT, किसी दूसरे पक्ष के साथ JSON ऑब्जेक्ट को इस तरह शेयर करने का एक तरीका है कि भेजने वाला पक्ष उस पर हस्ताक्षर कर सके और पाने वाला पक्ष पुष्टि कर सके कि हस्ताक्षर, ईमेल भेजने वाले व्यक्ति का ही है. JWT का स्ट्रक्चर तीन एन्क्रिप्ट की गई स्ट्रिंग होता है, जो एक बिंदु से जुड़ी होती हैं.

<JWTHeader>.<Payload>.<Signature>

JWT हेडर

JWT हेडर में, हस्ताक्षर करने के लिए इस्तेमाल किए गए एल्गोरिदम का नाम और टोकन का टाइप शामिल होता है. VAPID के लिए, यह होना चाहिए:

{
    "typ": "JWT",
    "alg": "ES256"
}

इसके बाद, इसे base64 यूआरएल कोड में बदला जाता है और यह JWT का पहला हिस्सा बन जाता है.

पेलोड

पेलोड एक और JSON ऑब्जेक्ट है, जिसमें ये चीज़ें शामिल होती हैं:

  • ऑडियंस ("aud")
    • यह पुश सेवा का ऑरिजिन है, नहीं आपकी साइट का ऑरिजिन. JavaScript में, ऑडियंस पाने के लिए ये काम किए जा सकते हैं: const audience = new URL(subscription.endpoint).origin
  • समयसीमा खत्म होने का समय ("exp")
    • अनुरोध को एक्सपायर होने के तौर पर तब माना जाएगा, जब यह समयसीमा खत्म हो जाएगी. यह ज़रूरी है कि अनुरोध करने के 24 घंटे के अंदर, यूटीसी में यह जानकारी दी जाए.
  • विषय ("sub")
    • विषय में यूआरएल या mailto: यूआरएल होना चाहिए. अगर पुश सेवा को मैसेज भेजने वाले व्यक्ति से संपर्क करना पड़ता है, तो यह संपर्क करने का एक तरीका उपलब्ध कराता है.

पेलोड का उदाहरण कुछ ऐसा दिख सकता है:

{
    "aud": "http://push-service.example.com",
    "exp": Math.floor((Date.now() / 1000) + (12 * 60 * 60)),
    "sub": "mailto: my-email@some-url.com"
}

यह JSON ऑब्जेक्ट, base64 यूआरएल में एन्कोड किया गया है और यह JWT का दूसरा हिस्सा होता है.

हस्ताक्षर

एन्क्रिप्ट (सुरक्षित) किए गए हेडर और पेलोड को बिंदु के साथ जोड़ने पर सिग्नेचर बनता है. इसके बाद, उस VAPID निजी कुंजी का इस्तेमाल करके नतीजे को एन्क्रिप्ट (सुरक्षित) किया जाता है जिसे आपने पहले बनाया था. नतीजे को हेडर में बिंदु के साथ जोड़ा जाना चाहिए.

हम इसके लिए कोड का सैंपल नहीं दिखाएंगे, क्योंकि कई लाइब्रेरी हैं जो हेडर और पेलोड के JSON ऑब्जेक्ट लेंगी और आपके लिए यह हस्ताक्षर जनरेट करेंगी.

हस्ताक्षर किए गए JWT का इस्तेमाल, अनुमति वाले हेडर के तौर पर किया जाता है. साथ ही, इसके आगे 'WebPush ' जोड़ा जाता है. यह कुछ ऐसा दिखेगा:

WebPush eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJhdWQiOiJodHRwczovL2ZjbS5nb29nbGVhcGlzLmNvbSIsImV4cCI6MTQ2NjY2ODU5NCwic3ViIjoibWFpbHRvOnNpbXBsZS1wdXNoLWRlbW9AZ2F1bnRmYWNlLmNvLnVrIn0.Ec0VR8dtf5qb8Fb5Wk91br-evfho9sZT6jBRuQwxVMFyK5S8bhOjk8kuxvilLqTBmDXJM5l3uVrVOQirSsjq0A

इस बारे में कुछ बातों पर ध्यान दें. सबसे पहले, अनुमति वाले हेडर में 'WebPush' शब्द होता है. इसके बाद, एक स्पेस और फिर JWT होना चाहिए. JWT हेडर, पेलोड, और हस्ताक्षर को अलग करने वाले बिंदुओं पर भी ध्यान दें.

क्रिप्टो-की हेडर

अनुमति वाले हेडर के साथ-साथ, आपको अपनी VAPID सार्वजनिक कुंजी को Crypto-Key हेडर में, p256ecdsa= के साथ शुरू होने वाली, base64 यूआरएल से कोड में बदली गई स्ट्रिंग के तौर पर जोड़ना होगा.

p256ecdsa=BDd3_hVL9fZi9Ybo2UUzA284WG5FZR30_95YeZJsiApwXKpNcF1rRPF3foIiBHXRdJI2Qhumhf6_LFTeZaNndIo

एन्क्रिप्ट (सुरक्षित) किए गए डेटा के साथ सूचना भेजने पर, आपके पास पहले से ही Crypto-Key हेडर का इस्तेमाल करने का विकल्प होता है. इसलिए, ऐप्लिकेशन सर्वर की कुंजी जोड़ने के लिए, आपको ऊपर दिए गए कॉन्टेंट को जोड़ने से पहले सेमीकोलन जोड़ना होगा. इससे, आपको यह नतीजा मिलेगा:

dh=BGEw2wsHgLwzerjvnMTkbKrFRxdmwJ5S_k7zi7A1coR_sVjHmGrlvzYpAT1n4NPbioFlQkIrTNL8EH4V3ZZ4vJE;
p256ecdsa=BDd3_hVL9fZi9Ybo2UUzA284WG5FZR30_95YeZJsiApwXKpNcF1rRPF3foIiBHXRdJI2Qhumhf6_LFTeZaN

इन बदलावों की असल स्थिति

VAPID की मदद से, अब आपको Chrome में पुश नोटिफ़िकेशन का इस्तेमाल करने के लिए, GCM खाते के लिए साइन अप करने की ज़रूरत नहीं है. साथ ही, किसी उपयोगकर्ता की सदस्यता लेने और Chrome और Firefox, दोनों में उपयोगकर्ता को मैसेज भेजने के लिए, एक ही कोड पाथ का इस्तेमाल किया जा सकता है. दोनों, स्टैंडर्ड का पालन कर रहे हैं.

आपको यह ध्यान रखना होगा कि Chrome 51 और उससे पहले के वर्शन, Android के लिए Opera, और Samsung ब्राउज़र में आपको अब भी अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट में gcm_sender_id को तय करना होगा. साथ ही, आपको रिटर्न किए जाने वाले FCM एंडपॉइंट में Authorization हेडर जोड़ना होगा.

VAPID, इन मालिकाना ज़रूरी शर्तों से बचने का विकल्प देता है. अगर आपने VAPID को लागू किया है, तो यह वेब पुश की सुविधा वाले सभी ब्राउज़र पर काम करेगा. ज़्यादा से ज़्यादा ब्राउज़र के VAPID के साथ काम करने पर, आपके पास यह तय करने का विकल्प होता है कि अपने मेनिफ़ेस्ट से gcm_sender_id को कब हटाना है.