वेबव्यू के लिए वेब कॉन्टेंट डेवलप करते समय, अपनी डेवलपमेंट मशीन पर मौजूद लोकल वेब सर्वर से कॉन्टेंट उपलब्ध कराना फ़ायदेमंद हो सकता है. अगर आपने टेस्ट डिवाइस या एम्युलेटर पर WebView से इस लोकल सर्वर को ऐक्सेस किया है, तो रिमोट सर्वर पर डिप्लॉय किए बिना ही, आपको अपने बदलाव तुरंत दिख सकते हैं. इस पेज पर, WebView से अपनी होस्ट मशीन पर चल रहे वेब सर्वर को ऐक्सेस करने के कई तरीके बताए गए हैं.
ADB की मदद से रिवर्स पोर्ट फ़ॉरवर्डिंग सेट अप करना
रिवर्स पोर्ट फ़ॉरवर्डिंग सेट अप करने के लिए, Android डीबग ब्रिज (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 पर चल रहे वेब सर्वर से कनेक्ट किया जा सकता है. इस तरीके का इस्तेमाल, यूएसबी से कनेक्ट किए गए फ़िज़िकल डिवाइसों और Android Emulator, दोनों के साथ किया जा सकता है.
Chrome DevTools की पोर्ट फ़ॉरवर्डिंग सुविधा का इस्तेमाल करना
Chrome DevTools में पोर्ट फ़ॉरवर्डिंग की सुविधा होती है. इसका इस्तेमाल करके, अपने डिवाइस से डेवलपमेंट मशीन पर अनुरोध फ़ॉरवर्ड किए जा सकते हैं.
- अपने डिवाइस को डीबग करने के लिए सेट अप करें. इसके बारे में Chrome DevTools का इस्तेमाल करके डीबग करना लेख में बताया गया है.
chrome://inspectपेज पर, पोर्ट फ़ॉरवर्डिंग... को चुनें.- पोर्ट फ़ील्ड में, Android डिवाइस पर वह पोर्ट नंबर डालें जिसका इस्तेमाल करके आपको डेवलपमेंट मशीन को ऐक्सेस करना है.
- आईपी पता और पोर्ट फ़ील्ड में, डेवलपमेंट मशीन का वेब सर्वर पता और पोर्ट नंबर डालें.
- पोर्ट फ़ॉरवर्डिंग चालू करें चेकबॉक्स को चुनें.
- हो गया को चुनें.
उदाहरण के लिए, अगर आपने पोर्ट फ़ील्ड में 3000 और आईपी पता और पोर्ट फ़ील्ड में localhost:8000 डाला है, तो WebView को http://localhost:3000 पर पॉइंट करने पर, यह आपकी डेवलपमेंट मशीन के वेब सर्वर को ऐक्सेस कर सकता है. यह वेब सर्वर localhost:8000 पर सुन रहा है.
अपने लोकल वेब सर्वर के लिए भी कस्टम डोमेन नेम का इस्तेमाल किया जा सकता है. ऐसा करने के तरीके के बारे में जानने के लिए, पोर्ट फ़ॉरवर्डिंग की मदद से लोकल सर्वर और Chrome इंस्टेंस ऐक्सेस करना लेख पढ़ें.
Android Emulator के पास-थ्रू आईपी पते का इस्तेमाल करके कनेक्ट करना
Android Emulator, पास-थ्रू आईपी पता 10.0.2.2 देता है, ताकि आपका ऐप्लिकेशन आपकी डेवलपमेंट मशीन से कनेक्ट हो सके. हम इस तरीके का सुझाव WebView डीबग करने के लिए नहीं देते, क्योंकि आपका WebView इस आईपी पते को सुरक्षित कॉन्टेक्स्ट के तौर पर नहीं लेगा. इस वजह से, वेब प्लैटफ़ॉर्म की कई सुविधाएं (जैसे कि सर्विस वर्कर, भौगोलिक स्थान की जानकारी, और कैमरा और माइक्रोफ़ोन ऐक्सेस करने की सुविधा) आपके वेब ऐप्लिकेशन के लिए उपलब्ध नहीं होंगी. adb reverse और Chrome DevTools पोर्ट फ़ॉरवर्डिंग के ऊपर बताए गए तरीकों में यह समस्या नहीं होती है. ऐसा इसलिए, क्योंकि ये आपको अपने WebView को भरोसेमंद होस्टनेम localhost पर ले जाने की अनुमति देते हैं.