ক্রোম এক্সটেনশনের মাধ্যমে PWA এবং IWA সংযুক্ত করুন

Demián Renzulli

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

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

যদি আপনার অ্যাপ্লিকেশনের এমন উন্নত সক্ষমতার প্রয়োজন হয় যা ক্রোম এক্সটেনশন এপিআই—যেমন কন্ট্রোলড ফ্রেম বা ডিরেক্ট সকেটস এপিআই —দিয়েও পাওয়া যায় না, তাহলে একটি আইসোলেটেড ওয়েব অ্যাপ (IWA)-এ স্থানান্তরিত হওয়াই আপনার জন্য সর্বোত্তম পথ। তবে, যদিও IWA-গুলো শক্তিশালী নতুন ওয়েব ফিচারগুলো ব্যবহারের সুযোগ করে দেয়, আপনার তখনও নির্দিষ্ট ডিভাইস-স্তরের এপিআই-এর প্রয়োজন হতে পারে যা শুধুমাত্র ক্রোম এক্সটেনশনের জন্য নির্দিষ্ট, যেমন কিয়স্ক মোডে একটি ChromeOS ডিভাইস রিবুট করার জন্য chrome.runtime.restart() । সৌভাগ্যবশত, আপনি একটি PWA-এর মতোই একই পদ্ধতি ব্যবহার করে একটি IWA-কে ক্রোম এক্সটেনশনের সাথে সংযুক্ত করতে পারেন। এই কৌশলটি নিম্নলিখিত ধাপগুলোতে আলোচনা করা হয়েছে।

ধাপে ধাপে বাস্তবায়ন

কম্প্যানিয়ন এক্সটেনশনটি স্থাপন করুন

এক্সটেনশনগুলো ক্রোম অ্যাডমিন কনসোলের মাধ্যমে স্থাপন করা হয়। আপনার কাঙ্ক্ষিত পরিবেশের ওপর নির্ভর করে, আপনি সংশ্লিষ্ট বিভাগে এটি কনফিগার করবেন (উদাহরণস্বরূপ, কিয়স্ক মোডের জন্য Devices > Chrome > Apps & Extensions > Kiosks- এ যান, অথবা Users & Browsers বা Managed Guest Sessions-এর জন্য সংশ্লিষ্ট ট্যাবগুলোতে যান)। আপনি এক্সটেনশনটি একটি সর্বজনীনভাবে অ্যাক্সেসযোগ্য লিঙ্কে সেলফ-হোস্ট করতে পারেন অথবা সরাসরি ক্রোম ওয়েব স্টোরে হোস্ট করতে পারেন। এক্সটেনশন পরিচালনার বিষয়ে আরও বিস্তারিত নির্দেশাবলীর জন্য অফিসিয়াল ডকুমেন্টেশন দেখুন।

বার্তা প্রেরণ বাস্তবায়ন করুন

এক্সটেনশন সেটআপ

আপনার ওয়েব অ্যাপ থেকে মেসেজ গ্রহণ ও তার উত্তর দেওয়ার জন্য, এমন একটি ব্যাকগ্রাউন্ড স্ক্রিপ্ট রাখুন যা ক্লায়েন্ট (আপনার ওয়েব অ্যাপ) থেকে আসা মেসেজ শোনে এবং তারপর সেই অনুরোধগুলোকে একটি সংশ্লিষ্ট এপিআই কলে প্রক্সি করে। নিম্নলিখিত উদাহরণে, যখন ওয়েব অ্যাপটি callRestart methodName একটি কাস্টম মেসেজ অবজেক্ট পাঠায়, তখন ChromeOS ডিভাইসটি রিস্টার্ট করার জন্য একটি অনুরোধ প্রক্সি করা হয়।

ব্যাকগ্রাউন্ড.জেএস

// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
  if (request.methodName == 'callRestart') {
    chrome.runtime.restart();
  }
});

এক্সটেনশনের ম্যানিফেস্টটি externally_connectable⁠⁠ কী ব্যবহার করে কনফিগার করা যেতে পারে, যা নির্দিষ্ট করে দেয় কোন কোন সাইট এবং এক্সটেনশন এক্সটেনশনটির মেথডগুলো কল করতে পারবে। ক্রোম এক্সটেনশন এবং ম্যানিফেস্ট v3 সম্পর্কে আরও তথ্য অফিসিয়াল ডকুমেন্টেশনে পাওয়া যাবে।

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

Manifest.json

{
  "manifest_version": 3,
  "name": "Restart your kiosk app",
  "version": "1.0",
  "description": "This restarts your ChromeOS device.",
  "background": {
    "service_worker": "background.js"
  },
  "externally_connectable": {
    "accepts_tls_channel_id": false,
    "matches": [
      "*://developer.chrome.com/*"
    ]
  }
}

আপনি যদি একটি আইসোলেটেড ওয়েব অ্যাপ (IWA) থেকে সংযোগ করেন, তাহলে পদ্ধতিটি হুবহু একই, কিন্তু ইউআরএল স্কিমটি পরিবর্তিত হয়। যেহেতু IWA-গুলো সুরক্ষিতভাবে প্যাকেজ করা থাকে এবং সাধারণ ওয়েব সার্ভারে চলে না, তাই এগুলো নিজস্ব প্রোটোকল ব্যবহার করে। আপনাকে অবশ্যই isolated-app:// স্কিমটি ব্যবহার করে IWA-টির অরিজিন যোগ করতে হবে।

Manifest.json

{
  "manifest_version": 3,
  "name": "IWA Companion Extension",
  "version": "1.1",
  "description": "Companion extension for the IWA",
  "background": {
    "service_worker": "/scripts/background.js"
  },
  "externally_connectable": {
    "matches": [
      "isolated-app://*/*"
    ]
  }
}

একটি PWA বা IWA থেকে বার্তা শোনার জন্য কোনো এক্সটেনশনে এটাই ন্যূনতম প্রয়োজনীয় কোড।

PWA এবং IWA সেটআপ

একটি ওয়েব অ্যাপ থেকে এক্সটেনশনটি কল করতে, আপনাকে এর স্ট্যাটিক এক্সটেনশন আইডি জানতে হবে। এই আইডিটি আপনার ক্রোম এক্সটেনশন ইনস্টল করার সময় দেখানো chrome://extensions পেজে, অথবা এক্সটেনশনটি আপলোড হয়ে যাওয়ার পর ক্রোম ওয়েব স্টোর থেকে পাওয়া যাবে। এটি আপনার ওয়েব অ্যাপকে যোগাযোগের জন্য সুনির্দিষ্ট এক্সটেনশনটি উল্লেখ করতে সাহায্য করে। এরপর, chrome.runtime.sendMessage কল করুন এবং এক্সটেনশনটিতে পাঠানোর জন্য একটি মেসেজের সাথে এক্সটেনশন আইডিটি পাস করুন।

const STATIC_EXTENSION_ID = 'abcdefghijklmnopqrstuvwxyz';
// found from chrome extensions page of chrome web store.
const callExtensionAPI = function (method) {
  chrome.runtime.sendMessage(STATIC_EXTENSION_ID, {
    methodName: method,
  });
};
callExtensionAPI('callRestart');

মেসেজ পাসিংয়ের জন্য ওয়েব অ্যাপকে এক্সটেনশনের সাথে সংযুক্ত করার বিষয়ে আরও তথ্যের জন্য, এক্সটেনশন ডকুমেন্টেশন দেখুন।

ডেমো

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

উপসংহার

আপনার ওয়েব অ্যাপ্লিকেশনগুলিকে একটি ক্রোম এক্সটেনশনের সাথে সংযুক্ত করা ডিভাইসের নেটিভ-সদৃশ ক্ষমতাগুলি আনলক করার একটি নিরাপদ ও প্রগতিশীল পথ প্রদান করে। আপনার অ্যাপের আর্কিটেকচার ডিজাইন করার সময়, এই মূল বিষয়গুলি মনে রাখবেন:

1. ওয়েব দিয়ে শুরু করুন: সর্বাধিক প্রসার এবং সর্বনিম্ন নিরাপত্তা ঝুঁকির জন্য ডিফল্ট হিসেবে একটি PWA ব্যবহার করুন।
2. এক্সটেনশনের মাধ্যমে ব্যবধান দূর করুন: গভীরভাবে সমন্বিত, ওএস-স্তরের বৈশিষ্ট্যগুলির (যেমন কিয়স্ক মোডে ডিভাইস রিবুট করা) জন্য, একটি সহযোগী ক্রোম এক্সটেনশন স্থাপন করুন এবং সুরক্ষিত বার্তা আদান-প্রদানের মাধ্যমে এটিকে আপনার অ্যাপ্লিকেশনের সাথে সংযুক্ত করুন।
3. শুধুমাত্র প্রয়োজন হলেই IWA-তে আপগ্রেড করুন: যখন আপনার ডিরেক্ট সকেটস, কন্ট্রোলড ফ্রেম বা অন্য কোনো IWA-অনলি API-এর মতো উচ্চ-বিশ্বস্ত API-এর প্রয়োজন হয়, তখন আইসোলেটেড ওয়েব অ্যাপস ব্যবহার করুন।