ওয়েব পুশ ইন্টারঅপারেবিলিটি জয়

জো মেডলি
Joe Medley
GitHub

যখন ক্রোম প্রথম ওয়েব পুশ এপিআই সমর্থন করেছিল, তখন এটি ফায়ারবেস ক্লাউড মেসেজিং (এফসিএম), পূর্বে গুগল ক্লাউড মেসেজিং (জিসিএম) নামে পরিচিত, পুশ পরিষেবার উপর নির্ভর করেছিল। এটি এর মালিকানাধীন API ব্যবহার করে প্রয়োজন। এটি ক্রোমকে এমন একটি সময়ে ডেভেলপারদের কাছে ওয়েব পুশ এপিআই উপলব্ধ করার অনুমতি দেয় যখন ওয়েব পুশ প্রোটোকল স্পেকটি এখনও লেখা ছিল এবং পরে প্রমাণীকরণ প্রদান করা হয়েছিল (অর্থাৎ বার্তা প্রেরক তারা কে বলেছে) এমন একটি সময়ে যখন ওয়েব পুশ প্রোটোকল এটার অভাব ছিল। সুসংবাদ: এগুলোর কোনোটিই আর সত্য নয়।

FCM / GCM এবং Chrome এখন স্ট্যান্ডার্ড ওয়েব পুশ প্রোটোকল সমর্থন করে, যখন প্রেরক প্রমাণীকরণ VAPID প্রয়োগ করে অর্জন করা যেতে পারে, যার অর্থ আপনার ওয়েব অ্যাপের আর 'gcm_sender_id'-এর প্রয়োজন নেই৷

এই নিবন্ধে, আমি প্রথমে বর্ণনা করতে যাচ্ছি কিভাবে আপনার বিদ্যমান সার্ভার কোডকে FCM এর সাথে ওয়েব পুশ প্রোটোকল ব্যবহার করতে রূপান্তর করতে হয়। এর পরে, আমি আপনাকে দেখাব কিভাবে আপনার ক্লায়েন্ট এবং সার্ভার কোড উভয় ক্ষেত্রে VAPID প্রয়োগ করতে হয়।

FCM ওয়েব পুশ প্রোটোকল সমর্থন করে

একটু প্রসঙ্গ দিয়ে শুরু করা যাক। যখন আপনার ওয়েব অ্যাপ্লিকেশন একটি পুশ সাবস্ক্রিপশনের জন্য নিবন্ধন করে তখন এটিকে একটি পুশ পরিষেবার URL দেওয়া হয়। আপনার ওয়েব অ্যাপের মাধ্যমে আপনার ব্যবহারকারীর কাছে ডেটা পাঠাতে আপনার সার্ভার এই এন্ডপয়েন্ট ব্যবহার করবে। ক্রোমে আপনাকে একটি FCM এন্ডপয়েন্ট দেওয়া হবে যদি আপনি VAPID ছাড়া কোনো ব্যবহারকারীর সদস্যতা নেন। (আমরা পরে VAPID কভার করব)। এফসিএম সমর্থিত ওয়েব পুশ প্রোটোকলের আগে আপনাকে ইউআরএলের শেষ থেকে এফসিএম রেজিস্ট্রেশন আইডি বের করতে হবে এবং একটি এফসিএম এপিআই অনুরোধ করার আগে হেডারে রাখতে হবে। উদাহরণস্বরূপ, https://android.googleapis.com/gcm/send/ABCD1234 এর একটি FCM এন্ডপয়েন্ট, 'ABCD1234'-এর একটি রেজিস্ট্রেশন আইডি থাকবে৷

এখন যেহেতু এফসিএম ওয়েব পুশ প্রোটোকল সমর্থন করে আপনি এন্ডপয়েন্টটিকে অক্ষত রাখতে পারেন এবং URLটিকে ওয়েব পুশ প্রোটোকল এন্ডপয়েন্ট হিসাবে ব্যবহার করতে পারেন৷ (এটি এটিকে ফায়ারফক্সের সাথে সঙ্গতিপূর্ণ করে এবং আশা করি ভবিষ্যতের প্রতিটি ব্রাউজার।)

আমরা VAPID-এ ডুব দেওয়ার আগে, আমাদের সার্ভার কোড সঠিকভাবে FCM এন্ডপয়েন্ট পরিচালনা করে তা নিশ্চিত করতে হবে। নীচে নোডে একটি পুশ পরিষেবার জন্য একটি অনুরোধ করার একটি উদাহরণ। লক্ষ্য করুন যে FCM-এর জন্য আমরা অনুরোধ শিরোনামে API কী যোগ করছি। অন্যান্য পুশ সার্ভিস এন্ডপয়েন্টের জন্য এটির প্রয়োজন হবে না। সংস্করণ 52, Opera Android এবং Samsung Browser-এর আগে Chrome-এর জন্য, আপনাকে এখনও আপনার ওয়েব অ্যাপের 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');
    }
});

মনে রাখবেন, এটি এফসিএম/জিসিএম-এর এপিআই-তে একটি পরিবর্তন, তাই আপনাকে আপনার সদস্যতা আপডেট করতে হবে না, উপরে দেখানো হেডারগুলিকে সংজ্ঞায়িত করতে আপনার সার্ভার কোড পরিবর্তন করুন।

সার্ভার সনাক্তকরণের জন্য VAPID প্রবর্তন করা হচ্ছে

VAPID হল " স্বেচ্ছাসেবী অ্যাপ্লিকেশন সার্ভার আইডেন্টিফিকেশন " এর জন্য একটি দুর্দান্ত নতুন সংক্ষিপ্ত নাম। এই নতুন বৈশিষ্ট্যটি মূলত আপনার অ্যাপ সার্ভার এবং পুশ পরিষেবার মধ্যে একটি হ্যান্ডশেককে সংজ্ঞায়িত করে এবং কোন সাইটটি বার্তা পাঠাচ্ছে তা নিশ্চিত করতে পুশ পরিষেবাটিকে অনুমতি দেয়৷ VAPID এর মাধ্যমে আপনি একটি পুশ বার্তা পাঠানোর জন্য FCM-নির্দিষ্ট পদক্ষেপগুলি এড়াতে পারেন। আপনার আর একটি Firebase প্রকল্প, একটি gcm_sender_id বা একটি Authorization শিরোনামের প্রয়োজন নেই৷

প্রক্রিয়াটি বেশ সহজ:

  1. আপনার অ্যাপ্লিকেশন সার্ভার একটি পাবলিক/প্রাইভেট কী জোড়া তৈরি করে। সর্বজনীন কী আপনার ওয়েব অ্যাপে দেওয়া হয়।
  2. যখন ব্যবহারকারী পুশ গ্রহণ করতে নির্বাচন করেন, তখন subscribe() কলের অপশন অবজেক্টে পাবলিক কী যোগ করুন।
  3. যখন আপনার অ্যাপ সার্ভার একটি পুশ বার্তা পাঠায়, তখন সর্বজনীন কী সহ একটি স্বাক্ষরিত JSON ওয়েব টোকেন অন্তর্ভুক্ত করুন৷

আসুন বিস্তারিতভাবে এই ধাপগুলি তাকান.

একটি পাবলিক/প্রাইভেট কী জোড়া তৈরি করুন

আমি এনক্রিপশনে ভয়ানক, তাই এখানে VAPID পাবলিক/প্রাইভেট কীগুলির বিন্যাস সম্পর্কিত স্পেস থেকে প্রাসঙ্গিক বিভাগটি রয়েছে:

অ্যাপ্লিকেশন সার্ভারগুলিকে P-256 বক্ররেখার উপরে উপবৃত্তাকার বক্ররেখা ডিজিটাল স্বাক্ষর (ECDSA) সহ ব্যবহারযোগ্য একটি সাইনিং কী জোড়া তৈরি এবং বজায় রাখা উচিত।

আপনি ওয়েব-পুশ নোড লাইব্রেরিতে এটি কীভাবে করবেন তা দেখতে পারেন: 

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 ব্যবহার করে একটি বার্তা পাঠাতে, আপনাকে দুটি অতিরিক্ত HTTP শিরোনাম সহ একটি সাধারণ ওয়েব পুশ প্রোটোকল অনুরোধ করতে হবে: একটি অনুমোদন শিরোনাম এবং একটি ক্রিপ্টো-কী শিরোনাম৷

অনুমোদন হেডার

Authorization শিরোনাম হল একটি স্বাক্ষরিত JSON ওয়েব টোকেন (JWT) যার সামনে 'WebPush' রয়েছে।

একটি JWT হল একটি JSON অবজেক্ট একটি দ্বিতীয় পক্ষের সাথে এমনভাবে ভাগ করার একটি উপায় যাতে প্রেরণকারী পক্ষ এতে স্বাক্ষর করতে পারে এবং গ্রহণকারী পক্ষ প্রত্যাশিত প্রেরকের কাছ থেকে স্বাক্ষরটি যাচাই করতে পারে। একটি JWT-এর গঠন হল তিনটি এনক্রিপ্ট করা স্ট্রিং, তাদের মধ্যে একটি একক বিন্দু দিয়ে যুক্ত। 

<JWTHeader>.<Payload>.<Signature>

JWT হেডার

JWT হেডারে স্বাক্ষর করার জন্য ব্যবহৃত অ্যালগরিদম নাম এবং টোকেনের ধরন রয়েছে। VAPID এর জন্য এটি হতে হবে:

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

এটি তখন base64 url ​​এনকোড করা হয় এবং JWT এর প্রথম অংশ গঠন করে।

পেলোড

পেলোড হল আরেকটি JSON অবজেক্ট যাতে নিম্নলিখিতগুলি রয়েছে:

  • শ্রোতা ("aud")
    • এটি পুশ পরিষেবার উত্স (আপনার সাইটের উত্স নয় )৷ জাভাস্ক্রিপ্টে, দর্শক পেতে আপনি নিম্নলিখিতগুলি করতে পারেন: const audience = new URL(subscription.endpoint).origin
  • মেয়াদ শেষ হওয়ার সময় ("এক্সপেয়ার")
    • এটি সেকেন্ডের সংখ্যা যতক্ষণ না অনুরোধটির মেয়াদ শেষ বলে গণ্য করা উচিত। এটি UTC-তে অনুরোধ করার 24 ঘন্টার মধ্যে হওয়া আবশ্যক ৷
  • বিষয় ("সাব")
    • বিষয় একটি URL বা একটি mailto: URL হতে হবে. পুশ পরিষেবার বার্তা প্রেরকের সাথে যোগাযোগ করার প্রয়োজন হলে এটি যোগাযোগের একটি বিন্দু প্রদান করে।

একটি উদাহরণ পেলোড নিম্নলিখিত মত দেখতে পারে:

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

এই JSON অবজেক্টটি base64 url ​​এনকোড করা এবং JWT এর দ্বিতীয় অংশ গঠন করে।

স্বাক্ষর

স্বাক্ষর হল এনকোড করা হেডারে যোগদানের ফলাফল এবং একটি ডট সহ পেলোড তারপর আপনার আগে তৈরি করা VAPID ব্যক্তিগত কী ব্যবহার করে ফলাফল এনক্রিপ্ট করা। ফলাফল নিজেই একটি বিন্দু সহ হেডারে যুক্ত করা উচিত।

আমি এটির জন্য একটি কোড নমুনা দেখাতে যাচ্ছি না কারণ এখানে অনেকগুলি লাইব্রেরি রয়েছে যা হেডার এবং পেলোড JSON অবজেক্টগুলি গ্রহণ করবে এবং আপনার জন্য এই স্বাক্ষর তৈরি করবে।

স্বাক্ষরিত JWT অনুমোদন শিরোনাম হিসাবে ব্যবহার করা হয় 'WebPush' এর সাথে এটির সাথে প্রিপেন্ড করা হয় এবং নিচের মত কিছু দেখাবে:

WebPush eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJhdWQiOiJodHRwczovL2ZjbS5nb29nbGVhcGlzLmNvbSIsImV4cCI6MTQ2NjY2ODU5NCwic3ViIjoibWFpbHRvOnNpbXBsZS1wdXNoLWRlbW9AZ2F1bnRmYWNlLmNvLnVrIn0.Ec0VR8dtf5qb8Fb5Wk91br-evfho9sZT6jBRuQwxVMFyK5S8bhOjk8kuxvilLqTBmDXJM5l3uVrVOQirSsjq0A

এই বিষয়ে কয়েকটি বিষয় লক্ষ্য করুন। প্রথমে, অথরাইজেশন হেডারে আক্ষরিক অর্থে 'ওয়েবপুশ' শব্দটি থাকে এবং তার পরে একটি স্পেস অনুসরণ করা উচিত তারপর JWT। এছাড়াও জেডব্লিউটি হেডার, পেলোড এবং স্বাক্ষরকে আলাদা করে বিন্দুগুলি লক্ষ্য করুন।

ক্রিপ্টো-কী হেডার

অনুমোদনের শিরোনামের পাশাপাশি, আপনাকে Crypto-Key শিরোলেখের সাথে আপনার VAPID সর্বজনীন কী যোগ করতে হবে একটি base64 url ​​এনকোড করা স্ট্রিং হিসাবে 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 এন্ডপয়েন্টে অনুমোদন হেডার যোগ করতে হবে ফেরত দেওয়া হবে।

VAPID এই মালিকানার প্রয়োজনীয়তা থেকে একটি বন্ধ র‌্যাম্প প্রদান করে। আপনি VAPID প্রয়োগ করলে এটি ওয়েব পুশ সমর্থন করে এমন সমস্ত ব্রাউজারে কাজ করবে। যেহেতু আরও ব্রাউজার VAPID সমর্থন করে আপনি সিদ্ধান্ত নিতে পারেন কখন আপনার ম্যানিফেস্ট থেকে gcm_sender_id ড্রপ করবেন।