Tạo ứng dụng web trong WebView

Sử dụng WebView để phân phối một ứng dụng web hoặc một trang web dưới dạng một phần của ứng dụng. Lớp WebView là một tiện ích 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. Giao diện này không bao gồm các tính năng của một trình duyệt web đã phát triển hoàn chỉnh, chẳng hạn như các nút điều khiển điều hướng hoặc thanh địa chỉ. Theo mặc định, tất cả những gì WebView có thể làm là hiển thị một trang web.

WebView có thể giúp bạn cung cấp thông tin mà bạn có thể cần cập nhật trong ứng dụng, 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 Activity chứa WebView, sau đó sử dụng thành phần này để hiển thị tài liệu được lưu trữ trực tuyến.

WebView cũng có thể trợ giúp khi ứng dụng của bạn cung cấp dữ liệu cho người dùng cần có 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ị một 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 được điều chỉnh cho phù hợp với các thiết bị chạy Android rồi triển khai một WebView trong ứng dụng Android giúp 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.

Tương thích với WebView trên các phiên bản Android cũ

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

Thêm 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")
}

Hãy khám phá ví dụ về WebView trên GitHub để biết thêm thông tin.

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 dưới dạng WebView trong onCreate().

Thêm WebView trong bố cục hoạt động

Để thêm một WebView vào ứng dụng của bạn 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 một WebView trong onCreate()

Để thêm WebView vào ứng dụng của bạn trong phương thức onCreate() của một 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 đó, 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 thực hiện thao tác bất kỳ sau đây:

  • Bật tính năng hỗ trợ toàn màn hình bằng WebChromeClient. Lớp này cũng được gọi khi một 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 quá trình hiển thị nội dung, chẳng hạn như lỗi khi 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 việc 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 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 của mình.

Bật JavaScript

Theo mặc định, JavaScript bị tắt trong WebView. Bạn có thể bật chế độ này thông qua WebSettings đi kèm với 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ế riêng cho WebView trong ứng dụng Android của mình, thì bạn có thể xác định 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 để xác minh rằng ứng dụng yêu cầu trang web là ứng dụng Android của bạn.

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 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ể thêm lớp sau đây 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ụ: dưới đâ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 chạy giao diện Android từ JavaScript. WebView sẽ tự động xuất hiện trên trang web của bạn. Vì vậy, khi người dùng nhấn 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

Khi người dùng nhấn vào một đường liên kết từ một trang web trong WebView, theo mặc định, 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 sẽ mở trong WebView. Sau đó, bạn có thể cho phép người dùng điều hướng tiến và lùi 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ả các đường liên kết mà người dùng nhấn vào đều tải trong WebView. Nếu bạn muốn có nhiều quyền kiểm soát hơn đối với vị trí tải đường liên kết được nhấp vào, 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, thì phương thức này sẽ trả về giá trị false và không ghi đè URL đang tải. API 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 Intent để chạy Activity mặc định nhằm xử lý URL. Quá trình này phân giải thành 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 lượ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() của bạn 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 hiển thị trong ví dụ trước) sẽ đượ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 hợp lệ. Bạn có thể sử dụng lượ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 một đường liên kết, như trong ví dụ trước, bạn có thể dùng lượ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 được 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ã mẫu trước đó.

Khi WebView ghi đè URL đang tải, công cụ này sẽ tự động tích luỹ nhật ký các trang web đã truy cập. Bạn có thể điều hướng tiến và lùi trong nhật ký bằng goBack() và goForward().

Ví dụ: sau đây là cách Activity có thể sử dụng nút Quay lại của thiết bị để điều hướng lui:

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á đoạn mã trước đó hơn nữa:

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, thì sau khi người dùng truy cập vào cuối 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 một 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ỷ bỏ và một hoạt động mới được tạo, việc này cũng tạo ra 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 ứng dụng này 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 luôn đúng cho dù chúng được mở bằng JavaScript hay bằng 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 mở nhiều cửa sổ của riêng mình.

Để giữ cho ứng dụng của bạn an toàn hơn, 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 các đường liên kết tải.