Chương này tập trung vào một số khía cạnh quan trọng của việc hiển thị nội dung bên ngoài thẻ trình duyệt.
Cửa sổ
Các hệ điều hành khác nhau có ý tưởng khác nhau về cửa sổ ứng dụng là gì. Ví dụ: trên iPhone, một ứng dụng luôn chiếm 100% màn hình. Trên Android và iPad, các ứng dụng thường chạy ở chế độ toàn màn hình nhưng có thể chia sẻ màn hình giữa hai ứng dụng. Tuy nhiên, chỉ có một phiên bản ứng dụng được mở tại một thời điểm. Ngược lại, trên thiết bị máy tính, một ứng dụng có thể mở nhiều phiên bản cùng một lúc. Ứng dụng này chia sẻ không gian màn hình có sẵn với tất cả các ứng dụng đang mở khác. Bạn có thể đổi kích thước và định vị từng phiên bản ứng dụng ở vị trí bất kỳ trên màn hình, thậm chí là chồng chéo các ứng dụng khác.
Biểu tượng
Chúng tôi nhận ra các ứng dụng qua biểu tượng của ứng dụng. Biểu tượng đó xuất hiện khi bạn tìm kiếm ứng dụng, trong phần cài đặt, ở bất cứ nơi nào bạn khởi chạy ứng dụng và ở nơi bạn thấy ứng dụng đang chạy.
Những quốc gia/khu vực này bao gồm:
- Màn hình chính (iOS, iPadOS, Android).
- Trình chạy ứng dụng (macOS, Android).
- Trình đơn Khởi động hoặc Trình đơn ứng dụng (Windows, ChromeOS, Linux).
- Thanh tác vụ, thanh tác vụ hoặc bảng điều khiển đa nhiệm vụ (tất cả hệ điều hành).
Khi tạo biểu tượng cho Ứng dụng web tiến bộ đảm bảo biểu tượng của ứng dụng không phụ thuộc vào nền tảng vì mỗi hệ điều hành đều có thể kết xuất biểu tượng và áp dụng các mặt nạ hình dạng riêng cho chúng, như trong hình dưới đây.
Tuỳ chỉnh giao diện cho ứng dụng
Bạn có thể tuỳ chỉnh kiểu ứng dụng trong PWA của mình theo nhiều cách, trong đó có:
- Màu giao diện: xác định màu của thanh tiêu đề của cửa sổ trên màn hình và màu của thanh trạng thái trên thiết bị di động. Khi sử dụng thẻ meta, bạn có thể có các giao thức khác nhau, chẳng hạn như chế độ tối hoặc sáng và các chế độ này sẽ được sử dụng dựa trên lựa chọn ưu tiên của người dùng.
- Màu nền: xác định màu của cửa sổ trước khi ứng dụng và CSS của ứng dụng được tải.
- Màu nhấn: xác định màu của các thành phần tích hợp sẵn trong trình duyệt, chẳng hạn như các thành phần điều khiển biểu mẫu.
Chế độ hiển thị
Bạn có thể xác định loại trải nghiệm cửa sổ mà mình muốn cho Ứng dụng web tiến bộ. Có ba cách để bạn lựa chọn:
- Toàn màn hình
- Độc lập
- Giao diện người dùng tối thiểu
Trải nghiệm toàn màn hình
Chế độ toàn màn hình phù hợp với những trải nghiệm sống động, chẳng hạn như trò chơi, thực tế ảo hoặc thực tế tăng cường. Ứng dụng này hiện chỉ có trên các thiết bị Android và ẩn thanh trạng thái cũng như thanh điều hướng, để PWA của bạn chiếm 100% màn hình cho nội dung của bạn.
Trên máy tính và iPadOS, chúng tôi không hỗ trợ PWA toàn màn hình; tuy nhiên, bạn có thể dùng API toàn màn hình từ trong PWA để hiển thị ứng dụng ở chế độ toàn màn hình theo yêu cầu của người dùng.
Phiên bản độc lập
Đây là lựa chọn phổ biến nhất cho Ứng dụng web tiến bộ (chế độ độc lập) hiển thị PWA của bạn trong một cửa sổ tiêu chuẩn của hệ điều hành mà không có giao diện người dùng điều hướng trên trình duyệt nào. Cửa sổ này cũng có thể bao gồm trình đơn do trình duyệt điều khiển, nơi người dùng có thể:
- Sao chép URL hiện tại.
- Xem, áp dụng hoặc tắt các tiện ích cho trình duyệt.
- Xem và thay đổi các quyền.
- Kiểm tra máy chủ gốc hiện tại và chứng chỉ SSL.
Thanh tiêu đề cũng có thể cho thấy các quyền và mức sử dụng phần cứng thay thế thanh địa chỉ hoặc thanh URL khi PWA hiển thị trong thẻ.
Trên thiết bị di động, một trải nghiệm PWA độc lập sẽ tạo một màn hình chuẩn hiển thị thanh trạng thái để người dùng vẫn có thể xem được thông báo, thời gian và mức pin. Thường thì trình duyệt không có trình đơn do trình duyệt kiểm soát, ví dụ như trải nghiệm độc lập trên máy tính.
Một số trình duyệt trên Android tạo thông báo cố định và ở chế độ im lặng trong khi PWA đang chạy ở nền trước để người dùng có thể sao chép URL hiện tại hoặc các lựa chọn khác.
Giao diện người dùng tối giản
Chế độ này dành cho các Ứng dụng web tiến bộ trên hệ điều hành Android và máy tính. Khi bạn sử dụng, trình duyệt kết xuất PWA của bạn sẽ hiển thị một giao diện người dùng tối giản để giúp người dùng thao tác trong ứng dụng.
Trên Android, bạn sẽ thấy một thanh tiêu đề kết xuất phần tử <title> hiện tại và nguồn gốc kèm theo một trình đơn thả xuống nhỏ. Trên máy tính, bạn sẽ thấy một bộ nút trên thanh tiêu đề giúp bạn thao tác, bao gồm cả nút quay lại và một nút điều khiển hoán đổi giữa thao tác dừng và tải lại, dựa trên trạng thái tải hiện tại.
Tối ưu hoá thiết kế cho máy tính
Khi bạn thiết kế một Ứng dụng web tiến bộ để hoạt động trên máy tính, bạn cần phải suy nghĩ về khả năng vô hạn cho kích thước cửa sổ so với việc ở trong thẻ của trình duyệt hoặc dưới dạng một ứng dụng trong hệ điều hành trên thiết bị di động.
Trong Chương 3, chúng tôi đã đề cập đến chế độ thu nhỏ: ứng dụng dành cho máy tính có thể có kích thước nhỏ tới 200 x 100 pixel. Cửa sổ này sẽ dùng nội dung của phần tử <title> trong HTML làm tiêu đề cho cửa sổ. Nội dung đó cũng được hiển thị khi bạn thay thế thẻ giữa các ứng dụng và ở những nơi khác.
Hãy chú ý đến phần tử <title> trong HTML và xem xét lại cách bạn sử dụng phần tử đó. <title> không chỉ phục vụ cho hoạt động SEO hay chỉ hiển thị các ký tự đầu tiên trong thẻ của trình duyệt; nó sẽ là một phần trong trải nghiệm người dùng của cửa sổ màn hình độc lập.
Các phương pháp hay nhất về CSS
Mọi trải nghiệm của bạn về bố cục, thiết kế và ảnh động của CSS đều hợp lệ khi nội dung của bạn hiển thị trong một giao diện độc lập. Tuy nhiên, có một số mẹo và thủ thuật giúp mang đến trải nghiệm tốt hơn cho một cửa sổ độc lập.
Truy vấn về nội dung nghe nhìn
Truy vấn nội dung nghe nhìn đầu tiên mà bạn có thể tận dụng trong PWA là thuộc tính display-mode chấp nhận các giá trị browser, standalone, minimal-ui hoặc fullscreen.
Truy vấn đa phương tiện này áp dụng các kiểu khác nhau cho từng chế độ. Ví dụ: bạn có thể chỉ hiển thị lời mời cài đặt khi ở chế độ trình duyệt hoặc chỉ hiển thị một phần thông tin cụ thể khi người dùng sử dụng ứng dụng của bạn từ biểu tượng hệ thống. Điều này có thể bao gồm việc thêm nút quay lại để sử dụng khi ứng dụng của bạn chạy ở chế độ độc lập.
/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}
Trải nghiệm trong ứng dụng
Khi sử dụng PWA đã cài đặt, người dùng mong đợi hoạt động của ứng dụng. Mặc dù không dễ xác định ý nghĩa, nhưng hành vi mặc định của web không mang lại trải nghiệm tốt nhất trong một số trường hợp.
Lựa chọn của người dùng
Người dùng thường có thể chọn nội dung bằng chuột hoặc con trỏ hay cử chỉ chạm và giữ. Mặc dù hữu ích cho nội dung, nhưng chế độ này không mang lại trải nghiệm tốt nhất cho các mục điều hướng, trình đơn và nút trong PWA của bạn.
Do đó, bạn nên tắt lựa chọn của người dùng trên các phần tử này bằng user-select: none và phiên bản tiền tố -webkit- của đó:
.unselectable {
user-select: none;
}
Màu nhấn
Trong PWA, bạn có thể xác định màu sắc phù hợp với thương hiệu trong các thành phần điều khiển biểu mẫu HTML bằng cách sử dụng tài sản accent-color.
Phông chữ hệ thống
Nếu muốn một phần tử (chẳng hạn như hộp thoại hoặc thông báo) khớp với phông chữ mặc định trên nền tảng của người dùng, thì bạn có thể sử dụng bộ phông chữ sau:
selector {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
"Helvetica Neue", sans-serif;
}
Kéo để làm mới
Các trình duyệt hiện đại dành cho thiết bị di động (chẳng hạn như Google Chrome và Safari) có tính năng làm mới trang khi người dùng kéo xuống. Trên một số trình duyệt, chẳng hạn như Chrome trên Android, hành vi đó cũng được bật trên các PWA độc lập.
Bạn có thể muốn vô hiệu hoá tác vụ này. Ví dụ: khi bạn cung cấp tính năng quản lý cử chỉ hoặc thao tác làm mới của riêng mình, hoặc nếu có khả năng người dùng vô tình kích hoạt thao tác đó.
Bạn có thể tắt hành vi này bằng cách sử dụng overscroll-behavior-y: contain:.
body {
overscroll-behavior-y: contain;
}
Khu vực an toàn
Một số thiết bị không có màn hình hình chữ nhật không bị che khuất; thay vào đó, màn hình của thiết bị có thể có hình dạng khác, chẳng hạn như hình tròn hoặc chứa một số phần của màn hình không sử dụng được, chẳng hạn như tai thỏ của iPhone 13. Trong những trường hợp này, một số trình duyệt sẽ hiển thị các biến môi trường cùng với các vùng an toàn có thể hiển thị nội dung.
Nếu bạn muốn toàn quyền truy cập vào màn hình, thậm chí cả khu vực vô hình để kết xuất màu hoặc hình ảnh của mình, hãy thêm viewport-fit=cover vào nội dung của thẻ <meta name="viewport">. Sau đó, hãy dùng các biến môi trường safe-area-inset-* để mở rộng nội dung của bạn một cách an toàn vào những khu vực đó.