גישה לשרת פיתוח מקומי מ-WebView

כשמפתחים תוכן אינטרנט ל-WebView, יכול להיות שימושי להציג תוכן משרת אינטרנט מקומי במחשב הפיתוח. אם אתם ניגשים לשרת המקומי הזה מ-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 במחשב הפיתוח. השיטה הזו פועלת גם עם מכשירים פיזיים שמחוברים באמצעות USB וגם עם Android Emulator.

שימוש בהעברת פורטים בכלי הפיתוח ל-Chrome

בכלי הפיתוח ל-Chrome יש תכונה משלו להעברת נתונים דרך יציאה, שבעזרתה אפשר להעביר בקשות מהמכשיר למחשב הפיתוח.

  1. מגדירים את המכשיר לניפוי באגים כמו שמתואר במאמר ניפוי באגים באמצעות כלי הפיתוח ל-Chrome.
  2. בדף chrome://inspect, בוחרים באפשרות העברה ליציאה אחרת....
  3. בשדה יציאה, מזינים את מספר היציאה במכשיר Android שבו רוצים להשתמש כדי לגשת למכונת הפיתוח.
  4. בשדה כתובת IP ויציאה, מזינים את כתובת שרת האינטרנט ומספר היציאה של מכונת הפיתוח.
  5. מסמנים את תיבת הסימון הפעלת העברת פורטים.
  6. לוחצים על סיום.

לדוגמה, אם מזינים 3000 בשדה Port ו-localhost:8000 בשדה IP address and port, אז כשמפנים את WebView אל http://localhost:3000, הוא יכול לגשת לשרת האינטרנט של מכונת הפיתוח שמקשיב ל-localhost:8000.

אפשר גם להשתמש בשם דומיין מותאם אישית לשרת האינטרנט המקומי. הוראות מפורטות מופיעות במאמר גישה לשרתים מקומיים ולמופעי Chrome באמצעות העברת פורטים.

חיבור באמצעות כתובת IP של Android Emulator

האמולטור של Android מספק את כתובת ה-IP המיוחדת 10.0.2.2 כדי להתחבר למכונת הפיתוח מהאפליקציה. לא מומלץ להשתמש בשיטה הזו לניפוי באגים ב-WebView, כי WebView לא יתייחס לכתובת ה-IP הזו כהקשר מאובטח. כתוצאה מכך, הרבה תכונות של פלטפורמת האינטרנט (כמו Service Workers, מיקום גיאוגרפי וגישה למצלמה ולמיקרופון) לא יהיו זמינות לאפליקציית האינטרנט שלכם. הבעיה הזו לא קיימת בשיטות של העברת פורטים ב-adb reverse ובכלי הפיתוח ל-Chrome שתוארו קודם, כי הן מאפשרות להפנות את WebView אל שם המארח המהימן localhost.