Tạo ứng dụng web trong WebView

Sử dụng WebView để phân phối ứng dụng web hoặc trang web trong một ứng dụng khách. Lớp WebView là một phần mở rộng của lớp View của Android, cho phép bạn hiển thị các trang web trong bố cục hoạt động. Ứng dụng này không bao gồm các tính năng của trình duyệt web được phát triển đầy đủ, chẳng hạn như các nút điều hướng hoặc thanh địa chỉ. Theo mặc định, tất cả WebView đều hiển thị một trang web.

WebView có thể giúp bạn cung cấp thông tin trong ứng dụng mà bạn có thể cần cập nhật, chẳng hạn như thoả thuận người dùng cuối hoặc hướng dẫn sử dụng. Trong ứng dụng Android, bạn có thể tạo một Activity chứa một WebView, sau đó sử dụng tệp này để hiển thị tài liệu được lưu trữ trực tuyến.

WebView cũng có thể hữu ích khi ứng dụng của bạn cung cấp dữ liệu cho người dùng cần kết nối Internet để truy xuất dữ liệu, chẳng hạn như email. Trong trường hợp này, bạn có thể thấy rằng việc tạo WebView trong ứng dụng Android để hiển thị trang web có tất cả dữ liệu người dùng sẽ dễ dàng hơn so với việc thực hiện yêu cầu mạng, sau đó phân tích cú pháp dữ liệu và hiển thị dữ liệu đó trong bố cục Android. Thay vào đó, bạn có thể thiết kế một trang web dành riêng cho các thiết bị chạy Android, sau đó triển khai WebView trong ứng dụng Android để tải trang web đó.

Tài liệu này mô tả cách bắt đầu sử dụng WebView, cách liên kết JavaScript từ trang web với mã phía máy khách trong ứng dụng Android, cách xử lý thao tác điều hướng trang và cách quản lý cửa sổ khi sử dụng WebView.

Làm việc với WebView trên các phiên bản Android cũ

Để sử dụng an toàn các tính năng WebView mới hơn trên thiết bị mà ứng dụng của bạn đang chạy, hãy thêm thư viện AndroidX Webkit. Đây là một thư viện tĩnh mà bạn có thể thêm vào ứng dụng của mình để sử dụng các API android.webkit không có sẵn cho các phiên bản nền tảng cũ.

Thêm tệp này vào tệp build.gradle như sau:

Kotlin

dependencies {
    implementation("androidx.webkit:webkit:1.8.0")
}

Groovy

dependencies {
    implementation ("androidx.webkit:webkit:1.8.0")
}

Khám phá ví dụ về WebView trên GitHub để biết thêm thông tin chi tiết.

Thêm WebView vào ứng dụng

Để thêm WebView vào ứng dụng, bạn có thể đưa phần tử <WebView> vào bố cục hoạt động hoặc đặt toàn bộ cửa sổ Activity làm WebView trong onCreate().

Thêm WebView vào bố cục hoạt động

Để thêm WebView vào ứng dụng trong bố cục, hãy thêm mã sau vào tệp XML bố cục của hoạt động:

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

Để tải một trang web trong WebView, hãy sử dụng loadUrl(), như trong ví dụ sau:

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.loadUrl("http://www.example.com")

Java

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");

Thêm WebView trong onCreate()

Để thêm WebView vào ứng dụng trong phương thức onCreate() của hoạt động, hãy sử dụng logic tương tự như sau:

Kotlin

val myWebView = WebView(activityContext)
setContentView(myWebView)

Java

WebView myWebView = new WebView(activityContext);
setContentView(myWebView);

Sau đó, hãy tải trang:

Kotlin

myWebView.loadUrl("http://www.example.com")

Java

myWebView.loadUrl("https://www.example.com");

Hoặc tải URL từ một chuỗi HTML:

Kotlin

// Create an unencoded HTML string, then convert the unencoded HTML string into
// bytes. Encode it with base64 and load the data.
val unencodedHtml =
     "<html><body>'%23' is the percent code for ‘#‘ </body></html>";
val encodedHtml = Base64.encodeToString(unencodedHtml.toByteArray(), Base64.NO_PADDING)
myWebView.loadData(encodedHtml, "text/html", "base64")

Java

// Create an unencoded HTML string, then convert the unencoded HTML string into
// bytes. Encode it with base64 and load the data.
String unencodedHtml =
     "<html><body>'%23' is the percent code for ‘#‘ </body></html>";
String encodedHtml = Base64.encodeToString(unencodedHtml.getBytes(),
        Base64.NO_PADDING);
myWebView.loadData(encodedHtml, "text/html", "base64");

Ứng dụng của bạn phải có quyền truy cập Internet. Để có quyền truy cập Internet, hãy yêu cầu quyền INTERNET trong tệp kê khai, như trong ví dụ sau:

<manifest ... >
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

Bạn có thể tuỳ chỉnh WebView bằng cách làm theo một trong những cách sau:

  • Bật tính năng hỗ trợ toàn màn hình bằng cách sử dụng WebChromeClient. Lớp này cũng được gọi khi WebView cần quyền thay đổi giao diện người dùng của ứng dụng lưu trữ, chẳng hạn như tạo hoặc đóng cửa sổ hoặc gửi hộp thoại JavaScript cho người dùng. Để tìm hiểu thêm về cách gỡ lỗi trong ngữ cảnh này, hãy đọc bài viết Gỡ lỗi ứng dụng web.
  • Xử lý các sự kiện ảnh hưởng đến việc hiển thị nội dung, chẳng hạn như lỗi gửi biểu mẫu hoặc điều hướng bằng WebViewClient. Bạn cũng có thể sử dụng lớp con này để chặn quá trình tải URL.
  • Bật JavaScript bằng cách sửa đổi WebSettings.
  • Sử dụng JavaScript để truy cập vào các đối tượng khung Android mà bạn đã chèn vào WebView.

Sử dụng JavaScript trong WebView

Nếu trang web mà bạn muốn tải trong WebView sử dụng JavaScript, bạn phải bật JavaScript cho WebView. Sau khi bật JavaScript, bạn có thể tạo giao diện giữa mã ứng dụng và mã JavaScript.

Bật JavaScript

Theo mặc định, JavaScript bị tắt trong WebView. Bạn có thể bật tính năng này thông qua WebSettings đính kèm vào WebView. Truy xuất WebSettings bằng getSettings(), sau đó bật JavaScript bằng setJavaScriptEnabled().

Hãy xem ví dụ sau:

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.settings.javaScriptEnabled = true

Java

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

WebSettings cung cấp quyền truy cập vào nhiều chế độ cài đặt khác mà bạn có thể thấy hữu ích. Ví dụ: nếu đang phát triển một ứng dụng web được thiết kế dành riêng cho WebView trong ứng dụng Android, thì bạn có thể xác định một chuỗi tác nhân người dùng tuỳ chỉnh bằng setUserAgentString(), sau đó truy vấn tác nhân người dùng tuỳ chỉnh trong trang web của bạn để xác minh rằng ứng dụng yêu cầu trang web của bạn là ứng dụng Android.

Liên kết mã JavaScript với mã Android

Khi phát triển một ứng dụng web được thiết kế riêng cho WebView trong ứng dụng Android, bạn có thể tạo giao diện giữa mã JavaScript và mã Android phía máy khách. Ví dụ: mã JavaScript có thể gọi một phương thức trong mã Android để hiển thị Dialog thay vì sử dụng hàm alert() của JavaScript.

Để liên kết một giao diện mới giữa mã JavaScript và mã Android, hãy gọi addJavascriptInterface(), truyền vào một thực thể lớp để liên kết với JavaScript và tên giao diện mà JavaScript có thể gọi để truy cập vào lớp đó.

Ví dụ: bạn có thể đưa lớp sau vào ứng dụng Android:

Kotlin

/** Instantiate the interface and set the context.  */
class WebAppInterface(private val mContext: Context) {

    /** Show a toast from the web page.  */
    @JavascriptInterface
    fun showToast(toast: String) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
    }
}

Java

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context. */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page. */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

Trong ví dụ này, lớp WebAppInterface cho phép trang web tạo thông báo Toast bằng phương thức showToast().

Bạn có thể liên kết lớp này với JavaScript chạy trong WebView bằng addJavascriptInterface(), như trong ví dụ sau:

Kotlin

val webView: WebView = findViewById(R.id.webview)
webView.addJavascriptInterface(WebAppInterface(this), "Android")

Java

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

Thao tác này sẽ tạo một giao diện có tên là Android cho JavaScript chạy trong WebView. Tại thời điểm này, ứng dụng web của bạn có quyền truy cập vào lớp WebAppInterface. Ví dụ: sau đây là một số HTML và JavaScript tạo thông báo ngắn bằng giao diện mới khi người dùng nhấn vào một nút:

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

Bạn không cần khởi tạo giao diện Android từ JavaScript. WebView sẽ tự động cung cấp cho trang web của bạn. Vì vậy, khi người dùng nhấn vào nút, hàm showAndroidToast() sẽ sử dụng giao diện Android để gọi phương thức WebAppInterface.showToast().

Xử lý thao tác điều hướng trang

Theo mặc định, khi người dùng nhấn vào một đường liên kết từ một trang web trong WebView, Android sẽ chạy một ứng dụng xử lý URL. Thông thường, trình duyệt web mặc định sẽ mở và tải URL đích. Tuy nhiên, bạn có thể ghi đè hành vi này cho WebView để các đường liên kết mở trong WebView. Sau đó, bạn có thể cho phép người dùng di chuyển ngược lại và chuyển tiếp thông qua nhật ký trang web do WebView duy trì.

Để mở các đường liên kết mà người dùng nhấn vào, hãy cung cấp WebViewClient cho WebView bằng cách sử dụng setWebViewClient(). Tất cả đường liên kết mà người dùng nhấn vào sẽ tải trong WebView. Nếu bạn muốn kiểm soát nhiều hơn đối với vị trí tải của đường liên kết đã nhấp, hãy tạo WebViewClient của riêng bạn để ghi đè phương thức shouldOverrideUrlLoading(). Ví dụ sau giả định rằng MyWebViewClient là một lớp bên trong của Activity.

Kotlin

private class MyWebViewClient : WebViewClient() {

    override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
        if (Uri.parse(url).host == "www.example.com") {
            // This is your website, so don't override. Let your WebView load
            // the page.
            return false
        }
        // Otherwise, the link isn't for a page on your site, so launch another
        // Activity that handles URLs.
        Intent(Intent.ACTION_VIEW, Uri.parse(url)).apply {
            startActivity(this)
        }
        return true
    }
}

Java

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        if ("www.example.com".equals(request.getUrl().getHost())) {
      // This is your website, so don't override. Let your WebView load the
      // page.
      return false;
    }
    // Otherwise, the link isn't for a page on your site, so launch another
    // Activity that handles URLs.
    Intent intent = new Intent(Intent.ACTION_VIEW, request.getUrl());
    startActivity(intent);
    return true;
  }
}

Sau đó, hãy tạo một thực thể của WebViewClient mới này cho WebView:

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.webViewClient = MyWebViewClient()

Java

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

Bây giờ, khi người dùng nhấn vào một đường liên kết, hệ thống sẽ gọi phương thức shouldOverrideUrlLoading(). Phương thức này sẽ kiểm tra xem máy chủ lưu trữ URL có khớp với một miền cụ thể hay không, như đã xác định trong ví dụ trước. Nếu khớp, phương thức này sẽ trả về giá trị false và không ghi đè quá trình tải URL. Thao tác này cho phép WebView tải URL như bình thường. Nếu máy chủ lưu trữ URL không khớp, thì hệ thống sẽ tạo một Intent để khởi chạy Activity mặc định nhằm xử lý các URL. URL này sẽ phân giải đến trình duyệt web mặc định của người dùng.

Xử lý URL tuỳ chỉnh

WebView áp dụng các quy định hạn chế khi yêu cầu tài nguyên và phân giải các đường liên kết sử dụng giao thức URL tuỳ chỉnh. Ví dụ: nếu bạn triển khai các lệnh gọi lại như shouldOverrideUrlLoading() hoặc shouldInterceptRequest(), thì WebView chỉ gọi các lệnh gọi lại đó cho các URL hợp lệ.

Ví dụ: WebView có thể không gọi phương thức shouldOverrideUrlLoading() cho các đường liên kết như sau:

<a href="showProfile">Show Profile</a>

Các URL không hợp lệ, như URL trong ví dụ trước, được xử lý không nhất quán trong WebView. Vì vậy, bạn nên sử dụng URL được định dạng đúng. Bạn có thể sử dụng giao thức tuỳ chỉnh hoặc URL HTTPS cho một miền mà tổ chức của bạn kiểm soát.

Thay vì sử dụng một chuỗi đơn giản trong đường liên kết, như trong ví dụ trước, bạn có thể sử dụng một giao thức tuỳ chỉnh như sau:

<a href="example-app:showProfile">Show Profile</a>

Sau đó, bạn có thể xử lý URL này trong phương thức shouldOverrideUrlLoading() như sau:

Kotlin

// The URL scheme must be non-hierarchical, meaning no trailing slashes.
const val APP_SCHEME = "example-app:"

override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
    return if (url?.startsWith(APP_SCHEME) == true) {
        urlData = URLDecoder.decode(url.substring(APP_SCHEME.length), "UTF-8")
        respondToData(urlData)
        true
    } else {
        false
    }
}

Java

// The URL scheme must be non-hierarchical, meaning no trailing slashes.
private static final String APP_SCHEME = "example-app:";

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith(APP_SCHEME)) {
        urlData = URLDecoder.decode(url.substring(APP_SCHEME.length()), "UTF-8");
        respondToData(urlData);
        return true;
    }
    return false;
}

API shouldOverrideUrlLoading() chủ yếu dùng để khởi chạy ý định cho các URL cụ thể. Khi triển khai API này, hãy nhớ trả về false cho các URL mà WebView xử lý. Tuy nhiên, bạn không bị giới hạn ở việc khởi chạy ý định. Bạn có thể thay thế ý định khởi chạy bằng bất kỳ hành vi tuỳ chỉnh nào trong các mẫu mã trước đó.

Khi WebView ghi đè quá trình tải URL, WebView sẽ tự động tích luỹ danh sách các trang web đã truy cập. Bạn có thể di chuyển ngược và xuôi qua các trang đã truy cập bằng goBack() và goForward().

Ví dụ: nội dung sau đây cho thấy cách Activity có thể sử dụng nút Quay lại của thiết bị để quay lại:

Kotlin

override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
    // Check whether the key event is the Back button and if there's history.
    if (keyCode == KeyEvent.KEYCODE_BACK && myWebView.canGoBack()) {
        myWebView.goBack()
        return true
    }
    // If it isn't the Back button or there isn't web page history, bubble up to
    // the default system behavior. Probably exit the activity.
    return super.onKeyDown(keyCode, event)
}

Java

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check whether the key event is the Back button and if there's history.
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
        myWebView.goBack();
        return true;
    }
    // If it isn't the Back button or there's no web page history, bubble up to
    // the default system behavior. Probably exit the activity.
    return super.onKeyDown(keyCode, event);
}

Nếu ứng dụng của bạn sử dụng AndroidX AppCompat 1.6.0 trở lên, bạn có thể đơn giản hoá thêm đoạn mã trước đó:

Kotlin

onBackPressedDispatcher.addCallback {
    // Check whether there's history.
    if (myWebView.canGoBack()) {
        myWebView.goBack()
    }
}

Java

onBackPressedDispatcher.addCallback {
    // Check whether there's history.
    if (myWebView.canGoBack()) {
        myWebView.goBack();
    }
}

Phương thức canGoBack() trả về giá trị true nếu có nhật ký trang web để người dùng truy cập. Tương tự, bạn có thể sử dụng canGoForward() để kiểm tra xem có nhật ký chuyển tiếp hay không. Nếu bạn không thực hiện bước kiểm tra này, sau khi người dùng xem hết nhật ký, goBack() và goForward() sẽ không làm gì cả.

Xử lý các thay đổi về cấu hình thiết bị

Trong thời gian chạy, các thay đổi về trạng thái hoạt động xảy ra khi cấu hình của thiết bị thay đổi, chẳng hạn như khi người dùng xoay thiết bị hoặc đóng trình chỉnh sửa phương thức nhập (IME). Những thay đổi này khiến hoạt động của đối tượng WebView bị huỷ và một hoạt động mới được tạo, đồng thời tạo một đối tượng WebView mới tải URL của đối tượng đã bị huỷ. Để sửa đổi hành vi mặc định của hoạt động, bạn có thể thay đổi cách hoạt động xử lý các thay đổi về orientation trong tệp kê khai. Để tìm hiểu thêm về cách xử lý các thay đổi về cấu hình trong thời gian chạy, hãy đọc bài viết Xử lý các thay đổi về cấu hình.

Quản lý cửa sổ

Theo mặc định, các yêu cầu mở cửa sổ mới sẽ bị bỏ qua. Điều này đúng cho dù các cửa sổ này được mở bằng JavaScript hay thuộc tính mục tiêu trong một đường liên kết. Bạn có thể tuỳ chỉnh WebChromeClient để cung cấp hành vi của riêng mình khi mở nhiều cửa sổ.

Để đảm bảo an toàn hơn cho ứng dụng, tốt nhất bạn nên ngăn cửa sổ bật lên và cửa sổ mới mở ra. Cách an toàn nhất để triển khai hành vi này là truyền "true" vào setSupportMultipleWindows() nhưng không ghi đè phương thức onCreateWindow() mà setSupportMultipleWindows() phụ thuộc vào. Logic này ngăn mọi trang sử dụng target="_blank" trong đường liên kết tải.