Các phương pháp hay nhất cho ứng dụng web

Việc phát triển các trang và ứng dụng web cho thiết bị di động có nhiều thách thức so với việc phát triển một trang web cho trình duyệt web trên máy tính. Các phương pháp sau đây có thể giúp bạn cung cấp ứng dụng web hiệu quả nhất cho Android và các thiết bị di động khác.

  1. Chuyển hướng thiết bị di động đến một phiên bản di động dành riêng cho thiết bị di động của trang web. Có một số cách để thực hiện việc này bằng cách sử dụng lệnh chuyển hướng phía máy chủ. Một phương pháp phổ biến là "phát hiện" chuỗi Tác nhân người dùng do trình duyệt web cung cấp. Để xác định xem có nên phân phát phiên bản di động của trang web hay không, hãy tìm chuỗi "mobile" trong Tác nhân người dùng.
  2. Sử dụng HTML5 cho thiết bị di động. HTML5 là ngôn ngữ đánh dấu phổ biến nhất được dùng cho trang web di động. Tiêu chuẩn này khuyến khích việc phát triển ưu tiên thiết bị di động để đảm bảo rằng các trang web hoạt động trên nhiều thiết bị. Không giống như các ngôn ngữ web trước đây, HTML5 sử dụng các khai báo <DOCTYPE> và charset đơn giản hơn: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Sử dụng siêu dữ liệu khung nhìn để đổi kích thước trang web một cách thích hợp. Trong tài liệu <head>, hãy cung cấp siêu dữ liệu chỉ định cách bạn muốn cửa sổ xem của trình duyệt hiển thị trang web. Ví dụ: siêu dữ liệu khung hiển thị có thể chỉ định chiều cao và chiều rộng cho khung hiển thị của trình duyệt, tỷ lệ trang ban đầu và mật độ màn hình mục tiêu.

    Ví dụ sau đây cho thấy cách thiết lập siêu dữ liệu khung hiển thị:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Để biết thêm thông tin về cách sử dụng siêu dữ liệu cửa sổ xem cho các thiết bị chạy Android, hãy đọc bài viết Hỗ trợ nhiều màn hình trong ứng dụng web.

  4. Sử dụng bố cục tuyến tính dọc. Tránh trường hợp người dùng phải di chuyển sang trái và phải khi điều hướng trang của bạn. Người dùng sẽ dễ dàng cuộn lên và xuống hơn, đồng thời trang của bạn cũng sẽ đơn giản hơn.
  5. Đặt chiều cao và chiều rộng của bố cục thành match_parent. Việc đặt chiều cao và chiều rộng của đối tượng WebView thành match_parent đảm bảo các khung hiển thị của ứng dụng có kích thước chính xác. Bạn không nên đặt chiều cao thành wrap_content vì điều này sẽ dẫn đến kích thước không chính xác. Tương tự, việc đặt chiều rộng bố cục thành wrap_content không được hỗ trợ và khiến WebView sử dụng chiều rộng của thành phần mẹ thay thế. Do hành vi này, bạn cũng cần đảm bảo rằng không có đối tượng bố cục mẹ nào của đối tượng WebView có chiều cao và chiều rộng được đặt thành wrap_content.
  6. Tránh yêu cầu nhiều tệp. Vì thiết bị di động thường có tốc độ kết nối chậm hơn máy tính, hãy đảm bảo trang của bạn tải nhanh nhất có thể. Một cách để tăng tốc độ là tránh tải các tệp bổ sung như biểu định kiểu và tệp tập lệnh trong <head>. Ngoài ra, hãy cân nhắc phân tích thiết bị di động bằng công cụ PageSpeed Insights của Google để xem các đề xuất tối ưu hoá chi tiết dành riêng cho ứng dụng của bạn.
  7. Tắt tính năng tự động tải biểu tượng trang web xuống nếu bạn không cần. Theo mặc định, WebView sẽ tự động tải biểu tượng trang web xuống mỗi khi một trang web được truy cập khi điều hướng. WebView lưu giữ 2 bản sao của mỗi biểu tượng trang web đã tải xuống (một bản sao bằng Java và một bản sao trong bộ nhớ gốc), vì vậy, việc tắt tính năng tải biểu tượng trang web xuống sẽ giúp tiết kiệm bộ nhớ (khoảng 8 KB cho mỗi phiên bản WebView) và giảm mức tiêu thụ băng thông. Nếu ứng dụng của bạn không sử dụng hoặc hiển thị biểu tượng yêu thích, hãy dùng WebSettingsCompat.setDownloadFaviconsEnabled() trong thư viện Jetpack Webkit để tắt tính năng tải xuống tự động:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  8. Quản lý trạng thái đã lưu và tránh giới hạn giao dịch. Nếu bạn lưu trạng thái WebView trong các sự kiện vòng đời bằng saveState(Bundle), hãy thực thi giới hạn kích thước tải trọng bằng WebViewCompat.saveState() để tránh vượt quá giới hạn 1MB savedInstanceState của Android. Để biết thêm thông tin, hãy xem bài viết Quản lý hiệu quả trạng thái WebView.
  9. Tối ưu hoá các kết nối mạng và quá trình tải trang bằng các API tải suy đoán. Để giảm độ trễ điều hướng, hãy sử dụng Jetpack Webkit API để chuẩn bị trước các kết nối mạng và nội dung. Gọi Profile.addQuicHints để điền sẵn thông tin hỗ trợ HTTP/3 qua QUIC để WebView có thể sử dụng QUIC ngay trong lần kết nối đầu tiên và sử dụng Profile.preconnect để làm nóng trước các ổ cắm mạng. Khi biết hoặc có khả năng biết URL đích, hãy sử dụng Profile.prefetchUrlAsync hoặc WebViewCompat.prerenderUrlAsync để tìm nạp hoặc hiển thị các trang ở chế độ nền. Để biết thêm thông tin, hãy đọc bài viết Tải theo suy đoán trong WebView.
  10. Tắt tính năng tự động tải biểu tượng trang web xuống nếu bạn không cần. Theo mặc định, WebView sẽ tự động tải biểu tượng trang web xuống mỗi khi một trang web được truy cập khi điều hướng. WebView lưu giữ 2 bản sao của mỗi biểu tượng trang web đã tải xuống (một bản sao bằng Java và một bản sao trong bộ nhớ gốc), vì vậy, việc tắt tính năng tải biểu tượng trang web xuống sẽ giúp tiết kiệm bộ nhớ (khoảng 8 KB cho mỗi phiên bản WebView) và giảm mức tiêu thụ băng thông. Nếu ứng dụng của bạn không sử dụng hoặc hiển thị biểu tượng yêu thích, hãy dùng WebSettingsCompat.setDownloadFaviconsEnabled() trong thư viện Jetpack Webkit để tắt tính năng tải xuống tự động:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  11. Quản lý trạng thái đã lưu và tránh giới hạn giao dịch. Nếu bạn lưu trạng thái WebView trong các sự kiện vòng đời bằng saveState(Bundle), hãy thực thi giới hạn kích thước tải trọng bằng WebViewCompat.saveState() để tránh vượt quá giới hạn 1MB savedInstanceState của Android. Để biết thêm thông tin, hãy xem bài viết Quản lý hiệu quả trạng thái WebView.

Tài nguyên khác