ট্রাস্টেড ওয়েব অ্যাক্টিভিটি সেট আপ করা বেশ কঠিন হতে পারে, বিশেষ করে যদি আপনি শুধু আপনার ওয়েবসাইটটি প্রদর্শন করতে চান। এই নির্দেশিকাটি আপনাকে শেখাবে কীভাবে ট্রাস্টেড ওয়েব অ্যাক্টিভিটি ব্যবহার করে একটি ছোট প্রজেক্ট তৈরি করতে হয়।
এই নির্দেশিকাটি শেষে আপনি যা জানতে পারবেন:
- Bubblewrap ব্যবহার করে এমন একটি অ্যাপ্লিকেশন তৈরি করা হয়েছে যা একটি Trusted Web Activity ব্যবহার করে এবং যাচাইকরণে উত্তীর্ণ হয়।
- আপনার সাইনিং কীগুলো কখন ব্যবহৃত হয় তা বুঝুন।
- আপনার অ্যান্ড্রয়েড অ্যাপ্লিকেশনটি যে সিগনেচার দিয়ে তৈরি করা হচ্ছে, তা নির্ধারণ করতে সক্ষম হন।
- একটি সাধারণ ডিজিটাল অ্যাসেট লিঙ্কস ফাইল কীভাবে তৈরি করতে হয় তা জেনে নিন।
এই নির্দেশিকাটি অনুসরণ করতে আপনার প্রয়োজন:
- নোড.জেএস ১০ বা উচ্চতর সংস্করণ।
- ডেভেলপমেন্টের জন্য সংযুক্ত ও সেট আপ করা একটি অ্যান্ড্রয়েড ফোন বা এমুলেটর। আপনি যদি একটি বাস্তব ফোন ব্যবহার করেন, তবে ইউএসবি ডিবাগিং সক্ষম করুন ।
- একটি মোবাইল ব্রাউজার যা ট্রাস্টেড ওয়েব অ্যাক্টিভিটি সমর্থন করে।
- একটি ওয়েবসাইট যা আপনি বিশ্বস্ত ওয়েব কার্যকলাপে (Trusted Web Activity) দেখতে চান।
আপনি আপনার অ্যান্ড্রয়েড অ্যাপের জন্য একটি ট্রাস্টেড ওয়েব অ্যাক্টিভিটি ব্যবহার করে কোনো ব্রাউজার UI ছাড়াই একটি পূর্ণ স্ক্রিনের ব্রাউজার ট্যাব চালু করতে পারেন। এই সুবিধাটি শুধুমাত্র আপনার মালিকানাধীন ওয়েবসাইটগুলির জন্য সীমাবদ্ধ। ডিজিটাল অ্যাসেট লিঙ্ক সেট আপ করার মাধ্যমে আপনি মালিকানা প্রমাণ করেন।
আপনি যখন কোনো বিশ্বস্ত ওয়েব কার্যকলাপ চালু করেন, তখন ব্রাউজারটি ডিজিটাল অ্যাসেট লিঙ্কগুলি যাচাই করে। যাচাইকরণ ব্যর্থ হলে, ব্রাউজারটি আপনার ওয়েবসাইটটিকে একটি কাস্টম ট্যাব হিসেবে প্রদর্শন করে।
বাবলর্যাপ ইনস্টল এবং কনফিগার করুন
বাবলর্যাপ হলো নোড.জেএস-এর জন্য একগুচ্ছ লাইব্রেরি এবং একটি কমান্ড লাইন টুল (সিএলআই), যা ডেভেলপারদের ট্রাস্টেড ওয়েব অ্যাক্টিভিটি ব্যবহার করে অ্যান্ড্রয়েড অ্যাপ্লিকেশনের ভেতরে প্রগ্রেসিভ ওয়েব অ্যাপ তৈরি, বিল্ড এবং রান করতে সাহায্য করে।
এই কমান্ডটি চালিয়ে CLI ইনস্টল করুন:
npm i -g @bubblewrap/cli
পরিবেশ স্থাপন করা
প্রথমবার Bubblewrap চালানোর সময়, এটি প্রয়োজনীয় এক্সটার্নাল ডিপেন্ডেন্সিগুলো স্বয়ংক্রিয়ভাবে ডাউনলোড এবং ইনস্টল করার প্রস্তাব দেয়। আমরা স্বয়ংক্রিয় ডাউনলোডের অনুমতি দেওয়ার পরামর্শ দিই, কারণ এটি ডিপেন্ডেন্সিগুলো সঠিকভাবে কনফিগার করা হয়েছে কিনা তা নিশ্চিত করতে সাহায্য করে। বিদ্যমান জাভা ডেভেলপমেন্ট কিট (JDK) বা অ্যান্ড্রয়েড কমান্ড লাইন টুলস ইনস্টলেশন ব্যবহার করার জন্য Bubblewrap ডকুমেন্টেশন দেখুন।
প্রকল্পটি শুরু করুন এবং তৈরি করুন
একটি PWA-কে ঘিরে থাকা একটি অ্যান্ড্রয়েড প্রজেক্ট শুরু করুন:
bubblewrap init --manifest=https://my-twa.com/manifest.json
বাবলর্যাপ ওয়েব ম্যানিফেস্টটি পড়ে, অ্যান্ড্রয়েড প্রজেক্টে ব্যবহৃতব্য ভ্যালুগুলো নিশ্চিত করার জন্য ডেভেলপারদের জিজ্ঞাসা করে এবং সেই ভ্যালুগুলো ব্যবহার করে প্রজেক্টটি তৈরি করে।
প্রজেক্টটি তৈরি হয়ে গেলে, নিম্নলিখিত কমান্ডটি চালিয়ে একটি APK তৈরি করুন:
bubblewrap build
দৌড়
বিল্ড ধাপটি app-release-signed.apk নামের একটি ফাইল তৈরি করে। এই ফাইলটি পরীক্ষার জন্য ডেভেলপমেন্ট ডিভাইসে ইনস্টল করা যেতে পারে অথবা প্রকাশের জন্য প্লে স্টোরে আপলোড করা যেতে পারে।
বাবলর্যাপ স্থানীয় ডিভাইসে অ্যাপ্লিকেশনটি ইনস্টল ও পরীক্ষা করার জন্য একটি কমান্ড প্রদান করে। ডেভেলপমেন্ট ডিভাইসটি কম্পিউটারের সাথে সংযুক্ত করে চালান:
bubblewrap install
বিকল্পভাবে, adb টুলটি ব্যবহার করা যেতে পারে।
adb install app-release-signed.apk
অ্যাপ্লিকেশনটি এখন ডিভাইস লঞ্চারে পাওয়া যাবে।
অ্যাপ্লিকেশনটি খোলার সময় আপনি লক্ষ্য করবেন যে, আপনার ওয়েবসাইটটি একটি ট্রাস্টেড ওয়েব অ্যাক্টিভিটি হিসেবে নয়, বরং একটি কাস্টম ট্যাব হিসেবে চালু হচ্ছে। এর কারণ হলো, আমরা এখনও আমাদের ডিজিটাল অ্যাসেট লিঙ্কগুলোর ভ্যালিডেশন সেট আপ করিনি।
বাবলর্যাপের জন্য গ্রাফিক্যাল ইউজার ইন্টারফেস (GUI) বিকল্প
PWA বিল্ডার একটি GUI ইন্টারফেস প্রদান করে যা ট্রাস্টেড ওয়েব অ্যাক্টিভিটি প্রজেক্ট তৈরির জন্য বাবলর্যাপ (Bubblewrap) লাইব্রেরি ব্যবহার করে। আপনার PWA খুলতে পারে এমন একটি অ্যান্ড্রয়েড অ্যাপ তৈরি করতে PWA বিল্ডার কীভাবে ব্যবহার করবেন , তার নির্দেশাবলী এখানে খুঁজুন।
স্বাক্ষর করার চাবি
ডিজিটাল অ্যাসেট লিঙ্কগুলো একটি APK যে কী দিয়ে সাইন করা হয়েছে তা বিবেচনা করে এবং ভেরিফিকেশন ব্যর্থ হওয়ার একটি সাধারণ কারণ হলো ভুল সিগনেচার ব্যবহার করা। (মনে রাখবেন, ভেরিফিকেশন ব্যর্থ হলে আপনার ওয়েবসাইটটি পেজের উপরে ব্রাউজার UI সহ একটি কাস্টম ট্যাব হিসেবে চালু হবে।) যখন Bubblewrap অ্যাপ্লিকেশনটি বিল্ড করে, তখন init ধাপে সেটআপ করা একটি কী দিয়ে একটি APK তৈরি করা হয়। তবে, আপনি যখন Google Play-তে আপনার অ্যাপটি পাবলিশ করবেন, তখন আপনার সাইনিং কী পরিচালনার পদ্ধতির উপর নির্ভর করে আরেকটি কী তৈরি হতে পারে। সাইনিং কী এবং Bubblewrap ও Google Play-এর সাথে এর সম্পর্ক নিয়ে আরও জানুন।
আপনার অ্যাসেট লিঙ্ক ফাইল সেট আপ করা
ডিজিটাল অ্যাসেট লিঙ্ক মূলত আপনার ওয়েবসাইটের একটি ফাইল নিয়ে গঠিত যা আপনার অ্যাপকে নির্দেশ করে এবং আপনার অ্যাপের কিছু মেটাডেটা নিয়ে গঠিত যা আপনার ওয়েবসাইটকে নির্দেশ করে।
আপনার assetlinks.json ফাইলটি তৈরি করার পর, সেটিকে আপনার ওয়েবসাইটের রুট-এর সাপেক্ষে .well-known/assetlinks.json ফোল্ডারে আপলোড করুন, যাতে ব্রাউজার আপনার অ্যাপটিকে সঠিকভাবে যাচাই করতে পারে। আপনার সাইনিং কী-এর সাথে এর সম্পর্ক বিষয়ে আরও তথ্যের জন্য ডিজিটাল অ্যাসেট লিঙ্কস-এর বিস্তারিত আলোচনা দেখুন।
আপনার ব্রাউজার পরীক্ষা করা হচ্ছে
একটি ট্রাস্টেড ওয়েব অ্যাক্টিভিটি ব্যবহারকারীর ডিফল্ট ব্রাউজারটি অনুসরণ করার চেষ্টা করবে। যদি ব্যবহারকারীর ডিফল্ট ব্রাউজার ট্রাস্টেড ওয়েব অ্যাক্টিভিটি সমর্থন করে, তবে সেটিই চালু করা হবে। তা না হলে, যদি ইনস্টল করা কোনো ব্রাউজার ট্রাস্টেড ওয়েব অ্যাক্টিভিটি সমর্থন করে, তবে সেটিই বেছে নেওয়া হবে। সবশেষে, ডিফল্ট আচরণ হলো কাস্টম ট্যাব মোডে ফিরে যাওয়া।
এর মানে হলো, আপনি যদি ট্রাস্টেড ওয়েব অ্যাক্টিভিটিজ (Trusted Web Activities) সম্পর্কিত কোনো কিছু ডিবাগ করেন, তবে আপনাকে নিশ্চিত করতে হবে যে আপনি সেই ব্রাউজারটিই ব্যবহার করছেন যা আপনি মনে করছেন। কোন ব্রাউজারটি ব্যবহৃত হচ্ছে তা পরীক্ষা করতে আপনি নিম্নলিখিত কমান্ডটি ব্যবহার করতে পারেন:
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
পরবর্তী পদক্ষেপ
আশা করি, আপনি যদি এই নির্দেশিকাটি অনুসরণ করে থাকেন, তবে আপনার একটি কার্যকর ট্রাস্টেড ওয়েব অ্যাক্টিভিটি আছে এবং ভেরিফিকেশন ব্যর্থ হলে ডিবাগ করার মতো যথেষ্ট জ্ঞানও রয়েছে। যদি তা না হয়, তবে ওয়েব ডেভেলপারদের জন্য আরও অ্যান্ড্রয়েড কনসেপ্টগুলো দেখে নিন।
পরবর্তী পদক্ষেপ হিসেবে, আপনার অ্যাপের জন্য একটি আইকন তৈরি করুন । এটি হয়ে গেলে, আপনি প্লে স্টোরে আপনার অ্যাপটি প্রকাশ করার কথা বিবেচনা করতে পারেন।