دسترسی به یک سرور توسعه محلی از طریق WebView

هنگام توسعه محتوای وب برای WebView، ارائه محتوا از یک وب سرور محلی در دستگاه توسعه شما می‌تواند مفید باشد. اگر از طریق WebView در یک دستگاه آزمایشی یا شبیه‌ساز به این سرور محلی دسترسی پیدا کنید، می‌توانید بدون نیاز به استقرار در یک سرور راه دور، تغییرات خود را به سرعت مشاهده کنید. این صفحه چندین روش برای دسترسی به یک وب سرور که روی دستگاه میزبان شما از طریق WebView اجرا می‌شود را توضیح می‌دهد.

تنظیم ارسال پورت معکوس با ADB

شما می‌توانید از Android Debug Bridge (adb) ، ابزاری خط فرمان برای برقراری ارتباط با دستگاه خود، برای تنظیم انتقال پورت معکوس استفاده کنید. این ویژگی به دستگاه یا شبیه‌ساز شما اجازه می‌دهد تا به یک سرور وب که روی localhost روی دستگاه توسعه شما اجرا می‌شود، دسترسی داشته باشد.

adb یک دستور reverse دارد که می‌تواند درخواست‌های روی یک پورت خاص روی دستگاه را به پورت متفاوتی روی دستگاه میزبان ارسال کند.

برای استفاده از این قابلیت، دستور زیر را در ترمینال خود اجرا کنید:

adb reverse tcp:DEVICE_PORT tcp:HOST_PORT

موارد زیر را جایگزین کنید:

  • DEVICE_PORT : پورتی روی دستگاه که WebView برنامه شما به آن متصل می‌شود. برای مثال، ۸۰۸۰.
  • HOST_PORT : پورتی روی دستگاه توسعه شما که وب سرور شما روی آن اجرا می‌شود. برای مثال، ۸۰۸۰ یا ۳۰۰۰.

مثال:

اگر سرور توسعه محلی شما روی localhost:8080 روی دستگاه توسعه شما اجرا می‌شود، می‌توانید با اجرای دستور زیر درخواست‌ها را از دستگاه خود به آن ارسال کنید:

adb reverse tcp:8080 tcp:8080

پس از اجرای این دستور، می‌توانید WebView برنامه خود را به http://localhost:8080 در دستگاه یا شبیه‌ساز هدایت کنید. سپس WebView می‌تواند به وب سروری که روی localhost:8080 در دستگاه توسعه شما اجرا می‌شود متصل شود. این روش هم با دستگاه‌های فیزیکی متصل از طریق USB و هم با شبیه‌ساز اندروید کار می‌کند.

استفاده از پورت فورواردینگ Chrome DevTools

Chrome DevTools قابلیت پورت فورواردینگ مخصوص به خود را دارد که می‌توانید از آن برای فوروارد کردن درخواست‌ها از دستگاه خود به دستگاه توسعه‌دهنده استفاده کنید.

  1. دستگاه خود را برای اشکال‌زدایی، همانطور که در بخش «اشکال‌زدایی با استفاده از Chrome DevTools» توضیح داده شده است، تنظیم کنید.
  2. در صفحه chrome://inspect ، گزینه Port forwarding... را انتخاب کنید.
  3. در فیلد پورت ، شماره پورت دستگاه اندرویدی که می‌خواهید برای دسترسی به دستگاه توسعه خود از آن استفاده کنید را وارد کنید.
  4. در فیلد آدرس IP و پورت ، آدرس وب سرور و شماره پورت دستگاه توسعه خود را وارد کنید.
  5. کادر انتخاب فعال کردن انتقال پورت را علامت بزنید.
  6. انجام شد را انتخاب کنید.

برای مثال، اگر در فیلد پورت 3000 و در فیلد آدرس IP و پورت ، localhost:8000 را وارد کنید، وقتی WebView خود را به http://localhost:3000 هدایت می‌کنید، می‌تواند به وب سرور دستگاه توسعه شما که به localhost:8000 گوش می‌دهد، دسترسی پیدا کند.

همچنین می‌توانید از یک نام دامنه سفارشی برای وب سرور محلی خود استفاده کنید. برای دستورالعمل‌های مربوط به نحوه انجام این کار، به بخش «دسترسی به سرورهای محلی و نمونه‌های کروم با پورت فورواردینگ» مراجعه کنید.

با استفاده از آدرس IP عبوری شبیه‌ساز اندروید متصل شوید

شبیه‌ساز اندروید، آدرس IP مخصوص عبور 10.0.2.2 را برای اتصال به دستگاه توسعه شما از طریق برنامه‌تان فراهم می‌کند. این روش برای اشکال‌زدایی WebView توصیه نمی‌شود زیرا WebView شما این آدرس IP را به عنوان یک زمینه امن در نظر نمی‌گیرد. در نتیجه، بسیاری از ویژگی‌های پلتفرم وب (مانند Service Workers، موقعیت جغرافیایی و دسترسی به دوربین و میکروفون) برای برنامه وب شما در دسترس نخواهند بود. روش‌های adb reverse و Chrome DevTools port forwarding که قبلاً توضیح داده شدند، این مشکل را ندارند زیرا به شما اجازه می‌دهند WebView خود را به نام میزبان معتبر localhost هدایت کنید.