WebView-এর জন্য ওয়েব কন্টেন্ট তৈরি করার সময়, আপনার ডেভেলপমেন্ট মেশিনে স্থানীয় ওয়েব সার্ভার থেকে কন্টেন্ট পরিবেশন করা সহায়ক হতে পারে। আপনি যদি কোনও পরীক্ষামূলক ডিভাইস বা এমুলেটরের WebView থেকে এই স্থানীয় সার্ভারটি অ্যাক্সেস করেন, তাহলে আপনি কোনও দূরবর্তী সার্ভারে স্থাপন না করেই দ্রুত আপনার পরিবর্তনগুলি দেখতে পাবেন। এই পৃষ্ঠাটি WebView থেকে আপনার হোস্ট মেশিনে চলমান একটি ওয়েব সার্ভার অ্যাক্সেস করার বিভিন্ন উপায় ব্যাখ্যা করে।
ADB এর সাথে রিভার্স পোর্ট ফরওয়ার্ডিং সেট আপ করুন
রিভার্স পোর্ট ফরওয়ার্ডিং সেট আপ করার জন্য আপনি আপনার ডিভাইসের সাথে যোগাযোগের জন্য একটি কমান্ড-লাইন টুল, অ্যান্ড্রয়েড ডিবাগ ব্রিজ (adb) ব্যবহার করতে পারেন। এই বৈশিষ্ট্যটি আপনার ডিভাইস বা এমুলেটরকে আপনার ডেভেলপমেন্ট মেশিনে localhost চলমান একটি ওয়েব সার্ভার অ্যাক্সেস করতে দেয়।
adb একটি reverse কমান্ড আছে যা ডিভাইসের একটি নির্দিষ্ট পোর্টের অনুরোধগুলি হোস্ট মেশিনের একটি ভিন্ন পোর্টে ফরোয়ার্ড করতে পারে।
এই বৈশিষ্ট্যটি ব্যবহার করতে, আপনার টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:
adb reverse tcp:DEVICE_PORT tcp:HOST_PORT
নিম্নলিখিতগুলি প্রতিস্থাপন করুন:
-
DEVICE_PORT: ডিভাইসের সেই পোর্ট যার সাথে আপনার অ্যাপের WebView সংযুক্ত। উদাহরণস্বরূপ, 8080। -
HOST_PORT: আপনার ডেভেলপমেন্ট মেশিনের পোর্ট যেখানে আপনার ওয়েব সার্ভার চলছে। উদাহরণস্বরূপ, 8080 অথবা 3000।
উদাহরণ:
যদি আপনার ডেভেলপমেন্ট মেশিনে লোকাল ডেভেলপমেন্ট সার্ভার localhost:8080 তে চলমান থাকে, তাহলে আপনি নিম্নলিখিত কমান্ডটি চালিয়ে আপনার ডিভাইস থেকে অনুরোধগুলি এতে ফরোয়ার্ড করতে পারেন:
adb reverse tcp:8080 tcp:8080
এই কমান্ডটি চালানোর পর, আপনি আপনার অ্যাপের WebView ডিভাইস বা এমুলেটরে http://localhost:8080 এ নির্দেশ করতে পারেন। এরপর WebView আপনার ডেভেলপমেন্ট মেশিনে localhost:8080 এ চলমান ওয়েব সার্ভারের সাথে সংযোগ করতে পারে। এই পদ্ধতিটি USB এবং Android এমুলেটর ব্যবহার করে সংযুক্ত উভয় ভৌত ডিভাইসের সাথেই কাজ করে।
Chrome DevTools পোর্ট ফরওয়ার্ডিং ব্যবহার করুন
Chrome DevTools-এর নিজস্ব পোর্ট ফরওয়ার্ডিং বৈশিষ্ট্য রয়েছে যা আপনি আপনার ডিভাইস থেকে আপনার ডেভেলপমেন্ট মেশিনে অনুরোধ ফরোয়ার্ড করতে ব্যবহার করতে পারেন।
- Chrome DevTools ব্যবহার করে Debug- এ বর্ণিত পদ্ধতিতে ডিবাগিংয়ের জন্য আপনার ডিভাইস সেট আপ করুন।
-
chrome://inspectপৃষ্ঠায়, Port forwarding... নির্বাচন করুন। - পোর্ট ক্ষেত্রে, আপনার ডেভেলপমেন্ট মেশিন অ্যাক্সেস করার জন্য যে অ্যান্ড্রয়েড ডিভাইসটি ব্যবহার করতে চান তার পোর্ট নম্বরটি লিখুন।
- আইপি ঠিকানা এবং পোর্ট ক্ষেত্রে, আপনার ডেভেলপমেন্ট মেশিনের ওয়েব সার্ভার ঠিকানা এবং পোর্ট নম্বর লিখুন।
- পোর্ট ফরওয়ার্ডিং সক্ষম করুন চেকবক্সটি নির্বাচন করুন।
- সম্পন্ন নির্বাচন করুন।
উদাহরণস্বরূপ, যদি আপনি Port ক্ষেত্রে 3000 এবং IP ঠিকানা এবং পোর্ট ক্ষেত্রে localhost:8000 লিখেন, তাহলে যখন আপনি আপনার WebView কে http://localhost:3000 এ নির্দেশ করেন তখন এটি আপনার ডেভেলপমেন্ট মেশিনের ওয়েব সার্ভারে localhost:8000 এ শোনার মাধ্যমে অ্যাক্সেস করতে পারে।
আপনি আপনার স্থানীয় ওয়েব সার্ভারের জন্য একটি কাস্টম ডোমেন নামও ব্যবহার করতে পারেন। এটি কীভাবে করবেন সে সম্পর্কে নির্দেশাবলীর জন্য, পোর্ট ফরওয়ার্ডিং সহ স্থানীয় সার্ভার এবং Chrome ইনস্ট্যান্স অ্যাক্সেস করুন দেখুন।
অ্যান্ড্রয়েড এমুলেটরের পাস-থ্রু আইপি ঠিকানা ব্যবহার করে সংযোগ করুন
অ্যান্ড্রয়েড এমুলেটর আপনার অ্যাপ থেকে আপনার ডেভেলপমেন্ট মেশিনের সাথে সংযোগ স্থাপনের জন্য বিশেষ পাস-থ্রু আইপি ঠিকানা 10.0.2.2 প্রদান করে। WebView ডিবাগিংয়ের জন্য এই পদ্ধতিটি সুপারিশ করা হয় না কারণ আপনার WebView এই IP ঠিকানাটিকে একটি নিরাপদ প্রসঙ্গ হিসেবে বিবেচনা করবে না। ফলস্বরূপ, অনেক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য (যেমন Service Workers, Geolocation, এবং ক্যামেরা এবং মাইক্রোফোন অ্যাক্সেস) আপনার ওয়েব অ্যাপে উপলব্ধ হবে না। পূর্বে বর্ণিত adb reverse এবং Chrome DevTools পোর্ট ফরওয়ার্ডিং পদ্ধতিগুলিতে এই সমস্যা নেই কারণ তারা আপনাকে আপনার WebView কে বিশ্বস্ত হোস্টনেম localhost এ নির্দেশ করতে দেয়।