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ó những ý tưởng khác nhau về cửa sổ ứng dụng. Ví dụ: trên iPhone, một ứng dụng luôn chiếm 100% màn hình. Trên các ứng dụng Android và iPad thường chạy ở chế độ toàn màn hình. Tuy nhiên, bạn có thể chia sẻ màn hình giữa hai ứng dụng. Tuy nhiên, mỗi lần ứng dụng chỉ có một phiên bản ứng dụng mở. Ngược lại, trên 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à đặt từng phiên bản ứng dụng ở vị trí bất kỳ trên màn hình, thậm chí chồng chéo lên các ứng dụng khác.
Biểu tượng
Chúng ta nhận dạng ứng dụng qua biểu tượ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 các ứ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 (tất cả hệ điều hành).
Khi tạo biểu tượng cho Ứng dụng web tiến bộ, hãy đảm bảo biểu tượng của biểu tượng không phụ thuộc vào nền tảng, vì mỗi hệ điều hành có thể hiển thị biểu tượng và áp dụng các mặt nạ hình dạng khác nhau cho biểu tượng, như các biểu tượng trong hình dưới đây.
Sắp xếp theo chủ đề cho ứng dụng
Bạn có thể tuỳ chỉnh kiểu ứng dụng trong PWA theo một số cách, bao gồm:
- Màu giao diện: xác định màu của thanh tiêu đề 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ó nhiều lược đồ, chẳng hạn như chế độ tối hoặc sáng và các lược đồ đó 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 thành phần trình duyệt tích hợp, chẳng hạn như các đ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à bạn muốn cho ứng dụng web tiến bộ của mình. Có ba tùy chọ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
Trải nghiệm toàn màn hình phù hợp với các trải nghiệm sống động, chẳng hạn như trò chơi, trải nghiệm thực tế ảo hoặc thực tế tăng cường (AR). Tính năng này hiện chỉ có trên các thiết bị Android, đồng thời ẩn thanh trạng thái và thanh điều hướng, giúp PWA cung cấp 100% màn hình cho nội dung của bạn.
Trên máy tính và iPadOS, PWA toàn màn hình không được hỗ trợ. Tuy nhiên, bạn có thể sử dụng Fullscreen API (API toàn màn hình) trong PWA của mình để hiển thị ứng dụng ở chế độ toàn màn hình theo yêu cầu của người dùng.
Trải nghiệm độc lập
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 cửa sổ tiêu chuẩn của hệ điều hành mà không cần giao diện người dùng điều hướng của trình duyệt. Cửa sổ này cũng có thể bao gồm trình đơn do trình duyệt kiểm soát, 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 của trình duyệt.
- Xem và thay đổi các quyền.
- Hãy kiểm tra nguồn gốc hiện tại và chứng chỉ SSL.
Thanh tiêu đề cũng có thể hiển thị quyền và mức sử dụng phần cứng thay thế cho thanh địa chỉ hoặc thanh URL khi PWA hiển thị trong thẻ.
Trên thiết bị di động, trải nghiệm PWA độc lập sẽ tạo ra một màn hình tiêu chuẩn luôn hiển thị thanh trạng thái để người dùng vẫn có thể xem thông báo, thời gian và mức pin. Phiên bản này thường không có bất kỳ trình đơn nào do trình duyệt kiểm soát, chẳng hạn như trải nghiệm độc lập trên máy tính để bàn.
Một số trình duyệt trên Android tạo thông báo cố định và im lặng trong khi PWA đang chạy ở nền trước cho phép người dùng 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 thiểu
Chế độ này dành cho Ứ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 PWA, 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 thiểu để giúp người dùng di chuyển 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 thông qua một trình đơn thả xuống nhỏ. Trên máy tính để bàn, bạn sẽ có một tập hợp các nút trong thanh tiêu đề để hỗ trợ di chuyển, bao gồm cả nút quay lại và nút điều khiển hoán đổi giữa điểm dừng và thao tác 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 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ề vô số khả năng kích thước cửa sổ so với việc sử dụng thẻ của trình duyệt hoặc ứ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ỏ nhất là 200 x 100 pixel. Cửa sổ này sẽ 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 alt-tab giữa các ứng dụng và ở những nơi khác.
Hãy chú ý đến phần tử <title> của HTML và suy nghĩ lại cách bạn sử dụng phần tử này. <title> không chỉ dành cho hoạt động SEO hoặc chỉ hiển thị các ký tự đầu tiên trong thẻ của trình duyệt; mà còn nằm trong trải nghiệm người dùng trên cửa sổ máy tính độc lập.
Các phương pháp hay nhất về Dịch vụ so sánh giá (CSS)
Tất cả trải nghiệm của bạn với bố cục, thiết kế và ảnh động CSS đều hợp lệ khi nội dung của bạn hiển thị trong phiên bản độc lập. Tuy nhiên, có một số mẹo và thủ thuật giúp bạn có trải nghiệm tốt hơn khi xem một cửa sổ độc lập.
Truy vấn về nội dung nghe nhìn
Truy vấn nội dung đa phương tiệ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 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. Trong đó có thể bao gồm cả việc thêm nút quay lại để sử dụng khi ứng dụng khởi 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 hành vi của ứng dụng. Mặc dù không đơn giản để xác định ý nghĩa của nó, nhưng hành vi web mặc định 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ỏ hoặc 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.
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 cách sử dụng user-select: none và phiên bản tiền tố -webkit-:
.unselectable {
user-select: none;
}
Màu nhấn
Trong PWA, bạn có thể xác định màu khớp với thương hiệu của mình trong các chế độ kiểm soát biểu mẫu HTML bằng thuộc tính 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 tin nhắn) 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 trang được 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 nên tắt hành động này. Ví dụ: khi cung cấp thao tác làm mới hoặc quản lý cử chỉ của riêng bạn, hoặc nếu có khả năng người dùng sẽ 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;
}
Vùng 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, như hình tròn hoặc có các phần màn hình không sử dụng được, chẳng hạn như notch của iPhone 13. Trong những trường hợp như vậy, một số trình duyệt sẽ hiển thị các biến môi trường có những vùng an toàn có thể hiển thị nội dung.
Nếu bạn muốn có toàn quyền truy cập vào màn hình, ngay cả khu vực vô hình, để kết xuất màu hoặc hình ả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 sang các khu vực đó một cách an toàn.