Android: Thực tiễn tốt nhất cho các ứng dụng web
Phát triển trang web và ứng dụng web cho thiết bị di động đưa ra một loạt thách thức khác nhau so với việc phát triển trang web cho trình duyệt web trên máy tính để bàn thông thường. Ta có thể tham khảo các tài nguyên liên quan sau đây:
- Giao diện người dùng Pixel-Perfect trong WebView
- Tạo một thiết kế web đáp ứng đầu tiên trên thiết bị di động
- Hình ảnh DPI cao cho mật độ pixel thay đổi
Dưới đây là danh sách các thực hành ta nên tuân theo để có được một ứng dụng web hiệu quả nhất cho Android và các thiết bị di động khác.
Lưu ý: Các thiết bị chạy Android màn hình lớn nên được phục vụ các trang web có kích thước đầy đủ (như máy tính bảng) không bao gồm chuỗi "mobile" trong User Agent, trong khi phần còn lại của chuỗi Tác nhân người dùng hầu hết đều giống nhau. Do đó, điều quan trọng là ta cung cấp phiên bản di động của trang web dựa trên việc chuỗi "mobile" có tồn tại trong User Agent hay không.
Chuyển hướng thiết bị di động sang phiên bản di động dành riêng cho trang web
Có một số cách ta có thể chuyển hướng yêu cầu đến phiên bản di động của trang web của mình sử dụng chuyển hướng phía máy chủ. Thông thường, điều này được thực hiện bằng cách "đánh hơi" chuỗi User Agent được cung cấp bởi trình duyệt web. Để xác định xem có phục vụ phiên bản di động của trang web của ta hay không thì ta nên tìm chuỗi "mobile" trong User Agent.
Sử dụng HTML5 DOCTYPE cho thiết bị di động
Ngôn ngữ đánh dấu phổ biến nhất được sử dụng cho các trang web di động là HTML5. Tiêu chuẩn này khuyến khích phát triển đầu tiên trên thiết bị di động để đảm bảo rằng các trang web hoạt động tốt trên nhiều thiết bị. Không giống như các ngôn ngữ web trước đây, HTML5 yêu cầu khai báo <DOCTYPE> và charset đơn giản hơn:
<!DOCTYPE html> ... <meta charset="UTF-8">
Sử dụng siêu dữ liệu chế độ xem để thay đổi kích thước trang web
Trong thẻ <head> của trang web ta nên cung cấp siêu dữ liệu chỉ định cách ta muốn chế độ xem của trình duyệt hiển thị trang web của mình. Ví dụ: siêu dữ liệu chế độ xem của ta có thể chỉ định chiều cao và chiều rộng cho chế độ xem của trình duyệt, tỷ lệ trang web ban đầu và thậm chí mật độ màn hình đích.
Ví dụ:
<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 chế độ xem cho các thiết bị hỗ trợ Android, hãy đọc bài viết Màn hình nhắm mục tiêu từ Ứng dụng web.
Sử dụng bố cục tuyến tính dọc
Phải tránh cho người dùng cuộn sang trái và phải trong khi điều hướng trang web của ta. Cuộn lên xuống dễ dàng hơn cho người dùng và làm cho trang web của ta đơn giản hơn.
Đặt chiều cao và chiều rộng bố cục thành match_parent
Đặt chiều cao và chiều rộng của đối tượng WebView thành match_parent để đảm bảo rằng các chế độ xem của ứng dụng của ta có kích thước chính xác. Không khuyến khích cài đặt chiều cao wrap_content vì nó dẫn đến kích thước không chính xác và, trong các ứng dụng nhắm mục tiêu Android 4.4 (API level 19) trở xuống, các thẻ meta HTML được bỏ qua để duy trì khả năng tương thích ngược. Tương tự, việc thiết lập chiều rộng của layout thành wrap_content là không được hỗ trợ và khiến cho WebView sử dụng chiều rộng của thẻ bao ngoài để thay thế. Do vậy, điều quan trọng là phải đảm bảo rằng không có bất kỳ đối tượng layout nào của đối tượng WebView có chiều cao và chiều rộng được đặt thành wrap_content.
Tránh nhiều yêu cầu tập tin
Vì các thiết bị di động thường có tốc độ kết nối chậm hơn nhiều so với máy tính để bàn, nên ta nên tải trang web của mình nhanh nhất có thể. Một cách để tăng tốc độ là tránh tải thêm các tệp như CSS và JavaScript trong <head>. Cách tốt hơn để ta có thể tối ưu hóa tải trang trên thiết bị di động là thực hiện phân tích trên thiết bị di động với Thông tin chi tiết về trang của Google. Nếu ta muốn tối ưu hóa hiệu suất của ứng dụng, hãy xem bài viết Quy tắc thông tin chi tiết của PageSpeed.
Để có hướng dẫn kỹ lưỡng hơn về việc tạo các ứng dụng web di động tuyệt vời, hãy xem Thực tiễn tốt nhất về Web di động của W3C. Để biết hướng dẫn khác về việc cải thiện tốc độ trang web của ta (dành cho thiết bị di động và máy tính để bàn), hãy xem hướng dẫn về tốc độ của Google trong bài viết Làm cho Web nhanh hơn.