Đang chuẩn bị cho các chế độ hiển thị của ngày mai

PWA có thể sử dụng thuộc tính "display_override" để xử lý các chế độ hiển thị đặc biệt.

Thomas Steiner

Tệp kê khai ứng dụng web là một tệp JSON cho trình duyệt biết về Ứng dụng web tiến bộ của bạn và cách ứng dụng đó hoạt động khi được cài đặt trên máy tính 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 khi ứng dụng của bạn được khởi chạy. Ví dụ: bạn có thể ẩn thanh địa chỉ và trình duyệt Chrome. Bạn thậm chí có thể thiết lập để trò chơi khởi chạy ở chế độ toàn màn hình. Để tóm tắt nhanh, dưới đây là các chế độ hiển thị được chỉ định tại thời điểm bài viết này được viết.

Thuộc tính Mục đích sử dụng
fullscreen Mở ứng dụng web mà không có giao diện người dùng trình duyệt và chiếm toàn bộ khu vực hiển thị hiện có.
standalone Mở ứng dụng web để có giao diện và cảm giác như một ứng dụng độc lập. Ứng dụng này chạy trong cửa sổ riêng, tách biệt với trình duyệt và ẩn các phần tử trên giao diện người dùng tiêu chuẩn của trình trình duyệt, chẳng hạn 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 các phần tử trên giao diện người dùng để điều khiển thao tác điều hướng (chẳng hạn như quay lại và tải lại).
browser Trải nghiệm trình duyệt tiêu 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õ ràng ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Nếu trình duyệt không hỗ trợ một chế độ nhất định, thì trình duyệt sẽ quay lại chế độ hiển thị tiếp theo trong chuỗi.

Điểm thiếu sót của thuộc tính display

Vấn đề với phương pháp chuỗi dự phòng có dây này có 3 điểm:

  • Nhà phát triển không thể yêu cầu "minimal-ui" mà không bị buộc phải quay lại chế độ hiển thị "browser" trong trường hợp trình duyệt nhất định không hỗ trợ "minimal-ui".
  • Nhà phát triển không có cách nào để xử lý sự khác biệt giữa các trình duyệt, chẳng hạn như liệu trình duyệt có bao gồm hay không bao gồm nút quay lại trong cửa sổ cho chế độ "standalone".
  • Hành vi hiện tại khiến bạn không thể giới thiệu các chế độ hiển thị mới theo cách tương thích ngược, vì các hoạt động khám phá như chế độ ứng dụng theo thẻ không có vị trí tự nhiên trong chuỗi dự phòng.

Thuộc tính display_override

Những vấn đề này được giải quyết bằng thuộc tính display_override mà trình duyệt xem xét trước thuộc tính display. Giá trị của thuộc tính này là một chuỗi các chuỗi được xem xét theo thứ tự và chế độ hiển thị được hỗ trợ đầu tiên sẽ được áp dụng. Nếu không có định dạng 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 của 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.)

  1. "window-controls-overlay" (Trước tiên, hãy xem display_override.)
  2. "minimal-ui"
  3. "standalone" (Khi display_override đã hết, hãy đánh giá display.)
  4. "minimal-ui" (Cuối cùng, hãy sử dụng chuỗi dự phòng display.)
  5. "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, chứ 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 một thuộc tính tệp kê khai ứng dụng web không xác định.

Lời cảm ơn

Thuộc tính display_override được chính thức hoá bởi Daniel Murphy.