الوصول إلى خادم تطوير محلي من WebView

عند تطوير محتوى ويب لتطبيق WebView، قد يكون من المفيد عرض المحتوى من خادم ويب محلي على جهاز التطوير. إذا وصلت إلى هذا الخادم المحلي من خلال WebView على جهاز اختبار أو محاكي، يمكنك الاطّلاع بسرعة على التغييرات بدون نشرها على خادم بعيد. توضّح هذه الصفحة عدة طرق للوصول إلى خادم ويب يعمل على جهازك المضيف من خلال WebView.

إعداد ميزة "إعادة توجيه المنفذ العكسي" باستخدام ADB

يمكنك استخدام Android Debug Bridge (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"

تتضمّن "أدوات مطوّري البرامج في Chrome" ميزة خاصة بإعادة توجيه المنافذ يمكنك استخدامها لإعادة توجيه الطلبات من جهازك إلى جهاز التطوير.

  1. اضبط إعدادات جهازك لتصحيح الأخطاء كما هو موضّح في مقالة تصحيح الأخطاء باستخدام "أدوات مطوّري البرامج في Chrome".
  2. في صفحة chrome://inspect، انقر على إعادة توجيه المنفذ....
  3. في حقل المنفذ، أدخِل رقم المنفذ على جهاز Android الذي تريد استخدامه للوصول إلى جهاز التطوير.
  4. في حقل عنوان IP والمنفذ، أدخِل عنوان خادم الويب ورقم المنفذ لجهاز التطوير.
  5. ضَع علامة في مربّع الاختيار تفعيل إعادة توجيه المنفذ.
  6. انقر على تمّ.

على سبيل المثال، إذا أدخلت 3000 في حقل المنفذ وlocalhost:8000 في حقل عنوان IP والمنفذ، سيتمكّن WebView من الوصول إلى خادم الويب على جهاز التطوير الذي يستمع إلى localhost:8000 عند توجيهه إلى http://localhost:3000.

يمكنك أيضًا استخدام اسم نطاق مخصّص لخادم الويب المحلي. للحصول على تعليمات حول كيفية إجراء ذلك، يُرجى الاطّلاع على الوصول إلى الخوادم المحلية ونسخ Chrome باستخدام إعادة توجيه المنفذ.

الاتصال باستخدام عنوان IP الخاص بميزة "نقل البيانات" في "محاكي Android"

يوفّر "محاكي Android" عنوان IP خاصًا 10.0.2.2 للاتصال بجهاز التطوير من تطبيقك. لا يُنصح باستخدام هذه الطريقة لتصحيح أخطاء WebView لأنّ WebView لن يتعامل مع عنوان IP هذا باعتباره سياقًا آمنًا. نتيجةً لذلك، لن تتوفّر العديد من ميزات منصة الويب (مثل Service Workers والموقع الجغرافي وإمكانية الوصول إلى الكاميرا والميكروفون) لتطبيق الويب. ولا تحدث هذه المشكلة مع طريقتَي adb reverse وإعادة توجيه المنفذ في "أدوات مطوّري البرامج في Chrome" الموضّحتَين سابقًا لأنّهما تتيحان لك توجيه WebView إلى اسم المضيف الموثوق localhost.