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

Joe Medley
Joe Medley
GitHub

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

FCM / GCM और Chrome अब स्टैंडर्ड वेब पुश प्रोटोकॉल के साथ काम करते हैं. हालांकि, भेजने वाले की पुष्टि करने के लिए, VAPID का इस्तेमाल किया जा सकता है. इसका मतलब है कि आपके वेब ऐप्लिकेशन को अब 'gcm_send_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 हेडर में भी जोड़ना होगा. इसे base64 यूआरएल कोड में बदली गई स्ट्रिंग के तौर पर p256ecdsa= से पहले जोड़ना होगा.

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 को कब हटाना है.