PWA có thể sử dụng thuộc tính "display_override" để xử lý các chế độ hiển thị đặc biệt.
Tệp kê khai ứng dụng web là một tệp JSON cho trình duyệt biết về Progressive của bạn
Ứng dụng web và cách ứng dụng web hoạt động khi được cài đặt trên máy tính để bàn hoặc thiết bị di động của người dùng.
Thông qua thuộc tính display
, bạn có thể tuỳ chỉnh giao diện người dùng của trình duyệt sẽ xuất hiện khi ứng dụng của bạn được phát hành. Ví dụ: bạn có thể ẩn
thanh địa chỉ và trình duyệt Chrome. Bạn thậm chí có thể tạo trò chơi để chạy ở chế độ toàn màn hình.
Tóm lại, dưới đây là các chế độ hiển thị được chỉ định tại thời điểm viết bài viết này.
Thuộc tính | Trường hợp sử dụng |
---|---|
fullscreen |
Mở ứng dụng web mà không cần bất kỳ giao diện người dùng trình duyệt nào và chiếm toàn bộ khu vực hiển thị hiện có. |
standalone |
Mở ứng dụng web để trông giống như một ứng dụng độc lập . Ứng dụng chạy trong một cửa sổ riêng, tách biệt với trình duyệt và ẩn các thành phần giao diện người dùng chuẩn của trình duyệt như thanh URL. |
minimal-ui |
Chế độ này tương tự như standalone nhưng cung cấp
cho người dùng một tập hợp tối thiểu gồm các phần tử trên giao diện người dùng để điều khiển hoạt động điều hướng (chẳng hạn như
khi quay lại và tải lại).
|
browser |
Trải nghiệm trình duyệt chuẩn. |
Các chế độ hiển thị này tuân theo một chuỗi dự phòng được xác định rõ
("fullscreen"
→ "standalone"
→ "minimal-ui"
→ "browser"
). Nếu trình duyệt không hỗ trợ một tệp
chế độ đó, nút này sẽ quay lại chế độ hiển thị tiếp theo trong chuỗi.
Những điểm còn thiếu sót của thuộc tính display
Vấn đề với phương pháp tiếp cận chuỗi dự phòng có dây này là 3 vấn đề:
- Nhà phát triển không thể yêu cầu
"minimal-ui"
mà không bị buộc quay lại chế độ hiển thị"browser"
trong trường hợp"minimal-ui"
không được một trình duyệt nhất định hỗ trợ. - Các nhà phát triển không có cách nào để xử lý sự khác biệt trên nhiều trình duyệt, chẳng hạn như liệu trình duyệt có thêm hoặc loại trừ nút quay lại trong cửa sổ cho chế độ
"standalone"
hay không. - Hành vi hiện tại khiến bạn không thể giới thiệu màn hình mới các chế độ theo cách tương thích ngược, vì các dữ liệu khám phá như chế độ ứng dụng dạng thẻ không có vị trí tự nhiên trong chuỗi dự phòng.
Thuộc tính display_override
Những bài toán này được giải quyết bằng thuộc tính display_override
mà trình duyệt sẽ xem xét trước khi
thuộc tính display
. Giá trị của biến này là một chuỗi các chuỗi được coi là theo thứ tự và
áp dụng chế độ hiển thị đầu tiên được hỗ trợ. Nếu không có giá trị nào được hỗ trợ, trình duyệt sẽ quay lại đánh giá
trường display
.
Trong ví dụ bên dưới, chuỗi dự phòng chế độ hiển thị sẽ như sau.
(Thông tin chi tiết về "window-controls-overlay"
nằm ngoài phạm vi của bài viết này.)
"window-controls-overlay"
(Trước tiên, hãy xemdisplay_override
.)"minimal-ui"
"standalone"
(Khidisplay_override
hết, hãy đánh giádisplay
.)"minimal-ui"
(Cuối cùng, hãy sử dụng chuỗi dự phòngdisplay
.)"browser"
{
"display_override": ["window-controls-overlay", "minimal-ui"],
"display": "standalone",
}
Để duy trì khả năng tương thích ngược, mọi chế độ hiển thị trong tương lai sẽ chỉ được chấp nhận dưới dạng giá trị của
display_override
, nhưng không phải display
.
Những trình duyệt không hỗ trợ display_override
sẽ quay lại thuộc tính display
và bỏ qua
display_override
dưới dạng thuộc tính tệp kê khai ứng dụng web không xác định.
Đường liên kết hữu ích
- Người giải thích
- Ý định gửi luồng
- Lỗi Chromium
- Mục Trạng thái của Chrome
- Kho lưu trữ Manifest Incubations của tệp kê khai
Thư cảm ơn
Thuộc tính display_override
được chính thức hoá bằng
Daniel Murphy.