বাবল র‍্যাপ সহ আপনার ওয়েবসাইটটিকে একটি নেটিভ অ্যান্ড্রয়েড অ্যাপে রূপান্তর করুন - ধাপে ধাপে নির্দেশিকা

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

প্রথমে, আমরা আপনার ওয়েবসাইটটিকে একটি প্রগ্রেসিভ ওয়েব অ্যাপে (PWA) পরিণত করব। তারপর আমরা Google থেকে Bubblewrap নামে একটি বিনামূল্যের কমান্ড-লাইন টুল ব্যবহার করব একটি Android অ্যাপে সেই PWA প্যাকেজ করতে। চলুন শুরু করা যাক।

পূর্বশর্ত

আপনি যদি এই টিউটোরিয়ালটি অনুসরণ করেন তবে কিছু পূর্বশর্ত রয়েছে:

• ওয়েব ডেভেলপমেন্টের প্রাথমিক জ্ঞান

• আপনার সাইটটি জনসাধারণের কাছে লাইভ হওয়া উচিত এবং আপনাকে এর সোর্স কোডে অ্যাক্সেস থাকতে হবে।

• আমরা প্রয়োজনীয় সরঞ্জামগুলি ইনস্টল করতে npm ব্যবহার করব, তাই নিশ্চিত করুন যে আপনি Node.js ইনস্টল করেছেন৷

দ্রষ্টব্য: এই টিউটোরিয়ালটি একটি ভিট এর উপর ভিত্তি করে প্রজেক্ট, কিন্তু বাবল র‍্যাপের চূড়ান্ত ধাপ যেকোন ওয়েব ফ্রেমওয়ার্কের জন্য একই।

সূচিপত্র

1. একটি PWA কি?

2. Bubblewrap কি?

   • একটি TWA (বিশ্বস্ত ওয়েব কার্যকলাপ) কি?

   • কিভাবে TWA বিশ্বাস যাচাই করে

3. ধাপ 1 – Vite এ আপনার PWA কনফিগার করুন

   • আপনার অ্যাপ আইকন তৈরি করুন

   • Vite PWA প্লাগইন ইনস্টল করুন।

   • প্লাগইন কনফিগার করুন

4. ধাপ 2 – অ্যান্ড্রয়েড অ্যাপ তৈরি করুন

   • একটি বিল্ড ফোল্ডার তৈরি করুন

   • Bubblewrap CLI ইনস্টল করুন

   • প্রকল্পটি শুরু করুন

   • আসুন init কমান্ডের সমস্যা সমাধান করি।

5. ধাপ 3 – বাবল র‍্যাপ প্রশ্নের উত্তর দিন

6. ধাপ 4 – অ্যাপ তৈরি করুন

7. ধাপ 5 – TWA বৈধতা সেট আপ করা

   • .সুপরিচিত ফোল্ডার কি?

   • delegate_permission/common.handle_all_urls কি?

8. ধাপ 6 (ঐচ্ছিক) – অ্যাপ-মধ্যস্থ অভিজ্ঞতা কাস্টমাইজ করুন

9. মোড়ানো

PWA কি?

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

তবে এটি কেবল চেহারা এবং অনুভূতি সম্পর্কে নয়। একটি পিডব্লিউএ-তে অ্যাপের মতো বৈশিষ্ট্যও রয়েছে, যেমন অফলাইনে কাজ করা, পুশ বিজ্ঞপ্তি পাঠানো এবং আরও অনেক কিছু৷

একটি PWA এর দুটি প্রধান উপাদান রয়েছে।

• ম্যানিফেস্ট ফাইলটি আপনার অ্যাপকে বর্ণনা করে, যেমন এর নাম, আইকন, স্টার্ট ইউআরএল ইত্যাদি।

• একটি পরিষেবা কর্মী হল একটি ব্যাকগ্রাউন্ড জাভাস্ক্রিপ্ট ফাইল যা একটি প্রক্সি হিসাবে কাজ করে। ক্যাশিং এবং পুশ বিজ্ঞপ্তিগুলি একটি পরিষেবা ফাইল দ্বারা পরিচালিত হয়, যা মূল থ্রেড থেকে আলাদা একটি থ্রেড হিসাবে চলে৷

এই দুটি উপাদান ছাড়া, ব্রাউজার ব্যবহারকারীদের স্থানীয়ভাবে অ্যাপ ডাউনলোড করতে দেবে না।

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

বাবল র‍্যাপ কি?

Bubblewrap হল Google দ্বারা তৈরি একটি কমান্ড-লাইন টুল যা আপনার PWA নেয় এবং এটিকে একটি বিশ্বস্ত ওয়েব অ্যাক্টিভিটি (TWA) ব্যবহার করে একটি Android অ্যাপে পরিণত করে।

Bubblewrap একটি TWA তৈরির প্রক্রিয়াকে সহজ করে, একটি PWA এর ম্যানিফেস্ট ফাইলকে একটি Android অ্যাপ প্যাকেজে (APK বা AAB) পরিণত করে।

TWA (বিশ্বস্ত ওয়েব কার্যকলাপ) কি?

একটি বিশ্বস্ত ওয়েব অ্যাক্টিভিটি (TWA) হল একটি আধুনিক অ্যান্ড্রয়েড বৈশিষ্ট্য যা আপনাকে একটি Android অ্যাপের মধ্যে আপনার লাইভ ওয়েবসাইট পূর্ণ-স্ক্রীন প্রদর্শন করতে দেয়। মূলত, এটি ব্রাউজারে ওয়েবসাইট চালায়, তবে এটি অ্যাপে ব্রাউজার ঠিকানা বার দেখায় না। এটি এটিকে একটি নেটিভ অ্যাপের মতো অনুভব করতে সহায়তা করে৷

এই পূর্ণ-স্ক্রীন বৈশিষ্ট্যটি আনলক করতে, আপনার অ্যাপটিকে "বিশ্বস্ত" হতে হবে৷

এখানেই "গোপন হ্যান্ডশেক" আসে৷ অ্যান্ড্রয়েডকে নিশ্চিত হতে হবে যে যে ব্যক্তি অ্যাপটি তৈরি করেছেন এবং যে ব্যক্তি ওয়েবসাইটের মালিক তারা একই। মালিকানার এই প্রমাণ ব্যতীত, TWA একটি ফলব্যাক মোডে চলবে এবং শীর্ষে ব্রাউজার অ্যাড্রেস বার দেখাবে, নেটিভ অ্যাপের অনুভূতি নষ্ট করবে৷

TWA কিভাবে বিশ্বাস যাচাই করে

এই বিশ্বাসটি ডিজিটাল অ্যাসেট লিঙ্কস নামে একটি সিস্টেম ব্যবহার করে যাচাই করা হয় . আপনি আপনার ওয়েবসাইটে একটি বিশেষ ফাইল রাখুন (আমরা এটি বাস্তবায়ন অংশে করব) যাতে আপনার অ্যাপের অনন্য ডিজিটাল ফিঙ্গারপ্রিন্ট রয়েছে। যখন একজন ব্যবহারকারী আপনার অ্যাপ খোলে, তখন Android OS এই ফাইলটি পরীক্ষা করে। আঙ্গুলের ছাপ মিলে গেলে, এটি আপনার অ্যাপকে "বিশ্বস্ত" স্থিতি দেয়, ঠিকানা বার সরিয়ে দেয় এবং গভীর লিঙ্ক করার মতো অন্যান্য বৈশিষ্ট্যগুলিকে সক্ষম করে৷

আপনি Google-এর অফিসিয়াল টেস্টিং টুল ব্যবহার করে এই সম্পর্কটি নিজেই পরীক্ষা করতে পারেন:ডিজিটাল সম্পদ লিঙ্ক যাচাইকারী৷

এখন যেহেতু আপনি প্রকল্প এবং সরঞ্জামগুলি বুঝতে পেরেছেন, আসুন নির্মাণ শুরু করি৷

ধাপ 1 - Vite-এ আপনার PWA কনফিগার করুন

প্রথম ধাপ হল PWA-এর জন্য দুটি প্রধান উপাদান যোগ করা:ম্যানিফেস্ট ফাইল এবং পরিষেবা কর্মী। এটিই ব্রাউজারটিকে এটিকে "ইনস্টলযোগ্য" হিসাবে চিনতে অনুমতি দেবে৷

এই নির্দেশিকাটি Vite-এর সাথে নির্মিত একটি প্রকল্পের উপর ভিত্তি করে তৈরি করা হয়েছে, যা একটি বিশেষ প্লাগইন দিয়ে এই প্রক্রিয়াটিকে সহজ করে তোলে। আপনি যদি একটি ভিন্ন টুল ব্যবহার করেন, ধারণাগুলি একই, তবে আপনাকে আপনার পরিবেশের জন্য নির্দিষ্ট পদক্ষেপগুলি সম্পর্কে বিভিন্ন সংস্থান সন্ধান করতে হবে৷

আপনার অ্যাপ আইকন তৈরি করুন

আমরা কোনো কোড স্পর্শ করার আগে, আমাদের অ্যাপ্লিকেশনের জন্য আইকন প্রয়োজন. অ্যান্ড্রয়েডের জন্য অ্যাপের লঞ্চার আইকন (আপনি আপনার হোম স্ক্রিনে যা দেখেন) এবং স্প্ল্যাশ স্ক্রীন (অ্যাপটি শুরু হলে আপনি যা দেখেন) এর জন্য নির্দিষ্ট মাপের প্রয়োজন।

আপনার দুটি প্রধান আকারের প্রয়োজন হবে:192x192 পিক্সেল এবং 512x512 পিক্সেল আপনি এই ফেভিকন জেনারেটর ব্যবহার করে আপনার লোগোটি সংশ্লিষ্ট আকারে তৈরি করতে পারেন। আপনি আপনার প্রধান লোগো আপলোড করতে পারেন, এবং এটি আপনার জন্য প্রয়োজনীয় সমস্ত আকার তৈরি করবে৷

তারপর শুধুমাত্র জেনারেট করা ফাইলগুলি ডাউনলোড করুন এবং 192x192 রাখুন এবং 512x512 ফাইলগুলি public এ আপনার প্রকল্পের ফোল্ডার।

Vite PWA প্লাগইন ইনস্টল করুন।

একটি PWA এর জন্য একটি ম্যানিফেস্ট ফাইল এবং একটি পরিষেবা কর্মী প্রয়োজন৷ আমরা এইগুলি ম্যানুয়ালি তৈরি করতে পারি, কিন্তু এই প্লাগইনটি সেই পুরো প্রক্রিয়াটিকে স্বয়ংক্রিয় করে। এটি স্বয়ংক্রিয়ভাবে একটি manifest.json তৈরি করবে এবং service-worker.js আপনি যখনই আপনার প্রকল্প তৈরি করেন তখন আপনার জন্য৷

npm install vite-plugin-pwa -D

প্লাগইন কনফিগার করুন

এই ধাপে, আমরা এই প্লাগইনটি ব্যবহার করব এবং আমাদের অ্যাপের ম্যানিফেস্ট কনফিগার করব। vite.config.ts সম্পাদনা করুন ফাইল এই কনফিগারেশনটি প্লাগইনকে বলে দেবে আপনার অ্যাপের নাম কী, কোন আইকন ব্যবহার করতে হবে ইত্যাদি।

vite.config.ts-এ :

export default defineConfig({
 plugins: [
 VitePWA({
 registerType: "autoUpdate", 
 manifest: {
 name: "your app name",
 short_name: "your app short name",
 description: "write any description",
 theme_color: "#0d1117",
 background_color: "#ffffff",
 display: "standalone",
 start_url: "/",
 icons: [
 {
 src: "/web-app-manifest-192x192.png",
 sizes: "192x192",
 type: "image/png",
 },
 {
 src: "/web-app-manifest-512x512.png",
 sizes: "512x512",
 type: "image/png",
 },
 ],
 },
 }),
 ]

এখন, যখন আপনি npm run build চালান , প্লাগইন স্বয়ংক্রিয়ভাবে আপনার জন্য ম্যানিফেস্ট এবং পরিষেবা কর্মী ফাইল তৈরি করবে৷ এটি সম্পন্ন হলে, পরিবর্তনগুলি স্থাপন করুন। এখন আপনার ওয়েবসাইট একটি PWA।

ধাপ 2 – Android অ্যাপ তৈরি করুন

এখন যেহেতু আপনার ওয়েবসাইট একটি PWA, আসুন এটিকে একটি Android অ্যাপে প্যাকেজ করার জন্য Bubblewrap ব্যবহার করি৷

একটি বিল্ড ফোল্ডার তৈরি করুন

আপনার অ্যান্ড্রয়েড প্রকল্প ফাইলগুলির জন্য একটি ডেডিকেটেড ফোল্ডার তৈরি করুন। আপনার প্রকল্পের রুটে, একটি নতুন ফোল্ডার তৈরি করুন। আমি আমার android কে কল করব .

project/
├── client/
├── server/
└── android/

এখন আপনার তৈরি করা নতুন ফোল্ডারে নেভিগেট করুন৷

Bubblewrap CLI ইনস্টল করুন

npm install -g @bubblewrap/cli

প্রকল্পটি শুরু করুন

এরপর, init চালান আদেশ Bubblewrap আপনার লাইভ ওয়েবসাইটের সাথে সংযুক্ত হবে, manifest.webmanifest পড়ুন যে ফাইলটি Vite তৈরি করেছে, এবং একটি মৌলিক অ্যান্ড্রয়েড প্রকল্প তৈরি করতে সেই তথ্য ব্যবহার করুন।

bubblewrap init --manifest=https://your-website-domain/manifest.webmanifest

your-website-domain প্রতিস্থাপন করে কমান্ডটি চালান আপনার প্রকৃত URL সহ:

চলুন init এর সমস্যা সমাধান করা যাক আদেশ

আপনি init চালান কমান্ড, Bubblewrap দুটি মূল সফ্টওয়্যার প্যাকেজ প্রয়োজন:জাভা ডেভেলপমেন্ট কিট (JDK) এবং Android SDK . এটি আপনার জন্য সেগুলি ইনস্টল করার প্রস্তাব দেবে৷

JDK সেটআপ:

? Do you want Bubblewrap to install the JDK (recommended)?
 (Enter "No" to use your own JDK 17 installation) (Y/n)

আমার ক্ষেত্রে, যখন আমি Bubblewrap কে JDK ইনস্টল করতে দিই, প্রক্রিয়াটি ফাইলগুলি ডাউনলোড করে কিন্তু তারপর "ডিকম্প্রেসিং" ধাপে ব্যর্থ হয়। আপনি যদি এই একই সমস্যার সম্মুখীন হন, চিন্তা করবেন না! সমাধান হল এটি ম্যানুয়ালি ইনস্টল করা।

• না বলুন প্রম্পটে।

• অ্যাডোপ্টিয়ামের মতো উৎস থেকে প্রস্তাবিত সংস্করণ (সাধারণত JDK 17) ডাউনলোড করুন।

• এটি ইনস্টল করুন এবং JDK এর bin অন্তর্ভুক্ত করতে আপনার সিস্টেমের পরিবেশের ভেরিয়েবল সেট আপ করুন পথ আপনি যদি এনভায়রনমেন্ট ভেরিয়েবল সেট করার বিষয়ে নিশ্চিত না হন তবে আপনি এই সাইটটি দেখতে পারেন:সেট এনভায়রনমেন্ট ভেরিয়েবল।

• যখন Bubblewrap পথের জন্য জিজ্ঞাসা করে, সরাসরি এটি প্রদান করুন, যেমন C:\java\jdk-17.0.16.8-hotspot .

Android SDK সেটআপ:

JDK সফলভাবে সেট আপ হয়ে গেলে, পরবর্তী ধাপ হল Android SDK কনফিগার করা।

? Do you want Bubblewrap to install the Android SDK (recommended)?
 (Enter "No" to use your own Android SDK installation) (Y/n)

যেহেতু আমার কাছে Android SDK নেই, তাই আমি হ্যাঁ নির্বাচন করে Bubblewrap কে এটি পরিচালনা করতে দিই . আমি এখানে কোন সমস্যার সম্মুখীন হইনি।

আপনি যদি Android SDK-এ সেট-আপ করতে কোনও সমস্যার সম্মুখীন হন, তাহলে এটিকে ম্যানুয়ালি সেট করুন এবং JDK সেটআপের মতোই পথ দিন৷

ধাপ 3 - বাবল র‍্যাপ প্রশ্নের উত্তর দিন

SDK সেট আপ করার পরে, Bubblewrap আপনার অ্যাপ কনফিগার করতে একগুচ্ছ প্রশ্ন জিজ্ঞাসা করবে। এই তথ্যটি twa-manifest.json তৈরি করতে ব্যবহৃত হয় ফাইল, যা আপনার অ্যাপের ব্লুপ্রিন্ট।

Domain: Press Enter (auto-filled from your manifest)
Application name: Your full app name
Application ID: (e.g, chat.yourapp.twa)
Display mode: standalone
Orientation: portrait
Status bar color: Press Enter (accepts default)
Splash screen color: Press Enter (accepts default)
Icon URL: Press Enter (accepts default)
Include support for Play Billing?: Type Y if your app uses Google Play in-app purchases. Otherwise, N
Request geolocation permission?: Type Y if your app needs location access. Otherwise, N

এই প্রশ্নগুলিতে, গুরুত্বপূর্ণ অংশ হল কী স্টোর এবং চাবি৷

First and Last names: Your full name
Organizational Unit: Developer or anything
Organization: Your organization name
Country (2-letter code): Your country code
Password for key store: Enter a new password
Password for key: Re-enter the same password

দ্রষ্টব্য: কী স্টোর এবং কী উভয়ের জন্য এই পাসওয়ার্ড একই হওয়া উচিত, অন্যথায় এটি একটি ত্রুটি নিক্ষেপ করবে। এই সমস্যাটি পড়ুন: বাবল র‍্যাপ ইস্যু৷

ধাপ 4 – অ্যাপ তৈরি করুন

bubblewrap build --universalApk

এই কমান্ডটি আপনার অ্যাপ্লিকেশন তৈরি করা শুরু করে। এখানে, পতাকা universalApk .apk তৈরি করবে এবং .abb . আপনি যদি প্লে স্টোরে আপনার অ্যাপ্লিকেশন প্রকাশ করতে যাচ্ছেন, .abb আপলোড করুন প্লে স্টোরে ফাইল করুন। আমাদের পরীক্ষার জন্য, আমাদের একটি APK ফাইল প্রয়োজন, তাই এই পতাকা universalApk উভয় ফাইল তৈরি করবে। যদি আমরা এই পতাকা না দিই, তবে এটি আমাদের শুধুমাত্র .abb দেবে .

ধাপ 5 - TWA বৈধতা সেট আপ করা

একবার বিল্ড হয়ে গেলে, আপনি APK পাবেন। এটি আপনার ফোনে স্থানান্তর করুন এবং এটি পরীক্ষা করুন। আপনি যখন অ্যাপটি খুলবেন, আপনি ব্রাউজার অ্যাড্রেস বার দেখতে পাবেন। এর কারণ হল আমরা এখনও আপনার অ্যাপ এবং আপনার ওয়েবসাইটের মধ্যে "বিশ্বাস" সেট আপ করিনি৷ এখন এটা ঠিক করা যাক।

আপনার ফ্রন্টএন্ড প্রকল্পে, public-এ যান ফোল্ডার, .well-known নামে একটি নতুন ফোল্ডার তৈরি করুন , এবং এর ভিতরে, assetlinks.json নামে একটি ফাইল তৈরি করুন .

frontend/
├── public/
 ├── .well-known/
 └── assetlinks.json

.well-known কি ফোল্ডার?

প্রোটোকলের জন্য কনফিগারেশন সংজ্ঞায়িত করে এমন ফাইলগুলি সংরক্ষণ করতে একটি সুপরিচিত ফোল্ডার ব্যবহার করা হয়, কারণ এটি আপনার ওয়েবসাইটের বৈধতা খুঁজে বের করার জন্য বাহ্যিক উত্সগুলির জন্য ব্যবহৃত হয়। আমাদের ক্ষেত্রে, আমাদের অ্যাপটি আমাদের ওয়েবসাইট থেকে সুপরিচিত ফোল্ডার চেক করে এবং বৈধতা যাচাই করে।

assetlinks.json-এ নিম্নলিখিতটি পেস্ট করুন :

[
 {
 "relation": ["delegate_permission/common.handle_all_urls"],
 "target": {
 "namespace": "android_app",
 "package_name": "chat.yourapp.twa",
 "sha256_cert_fingerprints": [
 "your_sha256_fingerprint"
 ]
 }
 }
]

delegate_permission/common.handle_all_urls কি ?

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

package_name ক্ষেত্রটি packageId হওয়া উচিত , যা আপনি twa-manifest.json এ আপনার Android বিল্ড ফোল্ডার থেকে পেতে পারেন .

এখন, আপনার আঙ্গুলের ছাপ পান. এটি করতে নিম্নলিখিত কমান্ডটি চালান:

keytool -list -v -keystore android.keystore -alias android

উপনাম নামটি আপনার তৈরি করা মান হওয়া উচিত। একবার আপনি এই কমান্ডটি প্রবেশ করালে, এটি কী স্টোরের পাসওয়ার্ড চাইবে। এটি লিখুন এবং আপনি আপনার SHA256 পাবেন আঙুলের ছাপ এটি অনুলিপি করুন এবং assetslinks.json এ পেস্ট করুন sha256_cert_fingerprints-এ ফাইল অ্যারে এখন এই পরিবর্তনগুলিকে উৎপাদনে ঠেলে দিন। আপনি ডিজিটাল সম্পদ লিঙ্কে বৈধতা যাচাই করতে পারেন

এটাই! এখন আপনি অ্যাপটি ইনস্টল করে পরীক্ষা করতে পারেন৷

ধাপ 6 (ঐচ্ছিক) – অ্যাপ-মধ্যস্থ অভিজ্ঞতা কাস্টমাইজ করুন

এখন, অতিরিক্তভাবে, এমন কিছু ক্ষেত্রে থাকবে যেখানে আমরা ওয়েবসাইট বনাম মোবাইল অ্যাপে ব্যবহারকারীদের বিভিন্ন সামগ্রী দেখাতে চাই। আমরা কি তা করতে পারি? হ্যাঁ!

আপনার Android বিল্ড ফোল্ডারে, twa-manifest.json-এ , সেখানে startUrl নামে একটি ক্ষেত্র থাকবে . যদি না হয়, এটি যোগ করুন এবং মান যোগ করুন "startUrl": "/?twa=true" . startUrl প্রবেশ বিন্দু হয়. আমার কাছে twa=true মানের একটি ক্যোয়ারী প্যারামিটার আছে .

bubblewrap build --universalApk দিয়ে বিল্ডটি আবার চালান .

এখন, আপনি যদি আপনার অ্যাপটি খোলেন, তাহলে এটি yourwebsitedomain.com/?twa=true হিসেবে এন্ট্রি URL সহ অ্যাপটি খুলবে .

আপনার ফ্রন্টএন্ডে:

const twaParam = queryParams.get("twa");
const [isTwa, setIsTwa] = useState<boolean>(() => {
 return localStorage.getItem("isTwa") === "true";
});
useEffect(() => {
 if (twaParam === "true") {
 localStorage.setItem("isTwa", "true"); // set the value to local storage
 setIsTwa(true);
 }
}, [twaParam]);

 {isTwa? (
 <Link to="/contact" className="underline hover:text-primary">
 Contact
 </Link> 
 ) : (
 <Link to="/download" className="underline hover:text-primary">
 Download App
 </Link>
 )}

উপরের কোডে, আমরা twa=true চেক করি URL-এ ক্যোয়ারী প্যারামিটার। যদি এটি উপস্থিত থাকে, আমরা সেই তথ্য স্থানীয় স্টোরেজে সংরক্ষণ করি, এবং তারপর আমরা শর্তসাপেক্ষে ব্যবহারকারীর জন্য সামগ্রী রেন্ডার করি৷

সেটাই। আমরা একটি অ্যাপ তৈরি করেছি।

আপনি যদি কোনও নাম, রঙ বা স্প্ল্যাশ স্ক্রীন পরিবর্তন করতে চান তবে আপনি এটি twa-manifest.json এ পরিবর্তন করতে পারেন এবং আবার বিল্ড চালান।

র্যাপিং আপ

Bubblewrap শুধুমাত্র Android এর জন্য। আপনি যদি অ্যাপটিকে ক্রস-প্ল্যাটফর্ম সমর্থন করতে চান তবে ক্যাপাসিটরের মতো আরও কিছু প্ল্যাটফর্ম রয়েছে, যেগুলি সম্পর্কে আমি অন্য একটি নিবন্ধে লিখব৷

যাইহোক, আপনি এখানে Bubblewrap ব্যবহার করে যে অ্যাপটি তৈরি করেছি তা দেখতে পারেন:Stranger Talk।

যদি কোন ভুল থাকে বা আপনার কোন প্রশ্ন থাকে, লিঙ্কডইন বা ইনস্টাগ্রামে আমার সাথে যোগাযোগ করুন।

পড়ার জন্য আপনাকে ধন্যবাদ!

বিনামূল্যে কোড শিখুন. freeCodeCamp-এর ওপেন সোর্স পাঠ্যক্রম 40,000-এরও বেশি লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন