เข้าถึงเซิร์ฟเวอร์การพัฒนาซอฟต์แวร์ภายในจาก 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 Emulator

ใช้การส่งต่อพอร์ตของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีฟีเจอร์การส่งต่อพอร์ตของตัวเองซึ่งคุณใช้เพื่อส่งต่อคำขอจากอุปกรณ์ไปยังเครื่องมือพัฒนาได้

1. ตั้งค่าอุปกรณ์สำหรับการแก้ไขข้อบกพร่องตามที่อธิบายไว้ในแก้ไขข้อบกพร่องโดยใช้ Chrome DevTools
2. ในหน้า chrome://inspect ให้เลือกการส่งต่อพอร์ต...
3. ในช่อง Port ให้ป้อนหมายเลขพอร์ตในอุปกรณ์ Android ที่คุณ ต้องการใช้เพื่อเข้าถึงเครื่องพัฒนา
4. ในช่องที่อยู่ IP และพอร์ต ให้ป้อนที่อยู่เว็บเซิร์ฟเวอร์และหมายเลขพอร์ตของเครื่องพัฒนา
5. เลือกช่องทําเครื่องหมายเปิดใช้การส่งต่อพอร์ต
6. เลือกเสร็จสิ้น

เช่น หากป้อน 3000 ในช่องพอร์ตและ localhost:8000 ในช่องที่อยู่ IP และพอร์ต เมื่อคุณชี้ WebView ไปที่ http://localhost:3000 ก็จะเข้าถึงเว็บเซิร์ฟเวอร์ของเครื่องที่ใช้พัฒนาซึ่งรับฟังที่ localhost:8000 ได้

นอกจากนี้ คุณยังใช้ชื่อโดเมนที่กำหนดเองสำหรับเว็บเซิร์ฟเวอร์ในเครื่องได้ด้วย ดูวิธีการได้ที่เข้าถึงเซิร์ฟเวอร์ในเครื่องและอินสแตนซ์ Chrome ด้วยการส่งต่อพอร์ต

เชื่อมต่อโดยใช้ที่อยู่ IP แบบส่งผ่านของโปรแกรมจำลอง Android

โปรแกรมจำลอง Android มีที่อยู่ IP แบบส่งผ่านพิเศษ 10.0.2.2 เพื่อให้แอปเชื่อมต่อกับเครื่องที่ใช้พัฒนาได้ เราไม่แนะนำให้ใช้วิธีนี้สำหรับการแก้ไขข้อบกพร่องของ WebView เนื่องจาก WebView จะไม่ถือว่าที่อยู่ IP นี้เป็นบริบทที่ปลอดภัย ด้วยเหตุนี้ ฟีเจอร์แพลตฟอร์มเว็บหลายอย่าง (เช่น Service Workers, ตำแหน่งทางภูมิศาสตร์ รวมถึงสิทธิ์เข้าถึงกล้องและไมโครโฟน) จึงไม่พร้อมใช้งานใน เว็บแอปของคุณ adb reverseและวิธีการส่งต่อพอร์ตของ Chrome DevTools ที่อธิบายไว้ก่อนหน้านี้ไม่มีปัญหานี้ เนื่องจากช่วยให้คุณชี้ WebView ไปยังชื่อโฮสต์ที่เชื่อถือได้ localhost