Khi phát triển nội dung web cho WebView, bạn có thể phân phát nội dung từ một máy chủ web cục bộ trên máy phát triển. Nếu truy cập vào máy chủ cục bộ này từ WebView trên một thiết bị kiểm thử hoặc trình mô phỏng, bạn có thể nhanh chóng xem các thay đổi mà không cần triển khai đến một máy chủ từ xa. Trang này giải thích một số cách truy cập vào máy chủ web đang chạy trên máy chủ lưu trữ từ WebView.
Thiết lập tính năng chuyển tiếp cổng đảo ngược bằng ADB
Bạn có thể dùng Cầu gỡ lỗi Android (adb), một công cụ dòng lệnh để giao tiếp với thiết bị, nhằm thiết lập tính năng chuyển tiếp cổng đảo ngược. Tính năng này cho phép thiết bị hoặc trình mô phỏng của bạn truy cập vào một máy chủ web đang chạy trên localhost trên máy phát triển.
adb có lệnh reverse có thể chuyển tiếp các yêu cầu trên một cổng cụ thể trên thiết bị đến một cổng khác trên máy chủ.
Để sử dụng tính năng này, hãy chạy lệnh sau trong thiết bị đầu cuối:
adb reverse tcp:DEVICE_PORT tcp:HOST_PORT
Thay thế nội dung sau:
DEVICE_PORT: Cổng trên thiết bị mà WebView của ứng dụng kết nối. Ví dụ: 8080.HOST_PORT: Cổng trên máy phát triển nơi máy chủ web của bạn đang chạy. Ví dụ: 8080 hoặc 3000.
Ví dụ:
Nếu máy chủ phát triển cục bộ của bạn đang chạy trên localhost:8080 trên máy phát triển, bạn có thể chuyển tiếp các yêu cầu từ thiết bị đến máy chủ đó bằng cách chạy lệnh sau:
adb reverse tcp:8080 tcp:8080
Sau khi chạy lệnh này, bạn có thể trỏ WebView của ứng dụng đến http://localhost:8080 trên thiết bị hoặc trình mô phỏng. Sau đó, WebView có thể kết nối với máy chủ web đang chạy trên localhost:8080 trên máy phát triển của bạn. Phương thức này hoạt động với cả thiết bị thực được kết nối bằng USB và Trình mô phỏng Android.
Sử dụng tính năng chuyển tiếp cổng của Công cụ của Chrome cho nhà phát triển
Chrome DevTools có tính năng chuyển tiếp cổng riêng mà bạn có thể dùng để chuyển tiếp các yêu cầu từ thiết bị đến máy phát triển.
- Thiết lập thiết bị để gỡ lỗi như mô tả trong phần Gỡ lỗi bằng Công cụ của Chrome cho nhà phát triển.
- Trên trang
chrome://inspect, hãy chọn Chuyển tiếp cổng.... - Trong trường Port (Cổng), hãy nhập số cổng trên thiết bị Android mà bạn muốn dùng để truy cập vào máy phát triển.
- Trong trường Địa chỉ IP và cổng, hãy nhập địa chỉ máy chủ web và số cổng của máy phát triển.
- Chọn hộp đánh dấu Bật tính năng chuyển tiếp cổng.
- Chọn Xong.
Ví dụ: nếu bạn nhập 3000 vào trường Cổng và localhost:8000 vào trường Địa chỉ IP và cổng, thì khi bạn trỏ WebView vào http://localhost:3000, WebView có thể truy cập vào máy chủ web của máy phát triển đang nghe trên localhost:8000.
Bạn cũng có thể sử dụng tên miền tuỳ chỉnh cho máy chủ web cục bộ. Để biết hướng dẫn về cách thực hiện việc này, hãy xem bài viết Truy cập vào các máy chủ cục bộ và phiên bản Chrome bằng tính năng chuyển tiếp cổng.
Kết nối bằng địa chỉ IP truyền qua của Trình mô phỏng Android
Trình mô phỏng Android cung cấp địa chỉ IP truyền qua đặc biệt 10.0.2.2 để kết nối với máy phát triển từ ứng dụng của bạn. Bạn không nên dùng phương thức này để gỡ lỗi WebView vì WebView sẽ không coi địa chỉ IP này là một bối cảnh an toàn. Do đó, nhiều tính năng của nền tảng web (chẳng hạn như Service Worker, Vị trí địa lý và quyền truy cập vào camera và micrô) sẽ không có sẵn cho ứng dụng web của bạn. Các phương thức chuyển tiếp cổng adb reverse và Chrome DevTools được mô tả trước đó không gặp phải vấn đề này vì chúng cho phép bạn trỏ WebView đến tên máy chủ đáng tin cậy localhost.