1. Web
  2. Web API
  3. Window Controls Overlay API

Window Controls Overlay API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Window Controls Overlay API cung cấp cho các Progressive Web App được cài đặt trên hệ điều hành máy tính để bàn khả năng ẩn thanh tiêu đề cửa sổ mặc định và hiển thị nội dung của riêng họ trên toàn bộ diện tích bề mặt của cửa sổ ứng dụng, biến các nút điều khiển (phóng to, thu nhỏ và đóng) thành một lớp phủ.

Chọn sử dụng tính năng

Trước khi sử dụng tính năng này, các điều kiện sau phải được đáp ứng:

  • Thành viên display_override trong Web App Manifest phải được đặt thành window-controls-overlay.
  • Progressive Web App phải được cài đặt trên hệ điều hành máy tính để bàn.

Các khái niệm chính

Các Progressive Web App được cài đặt trên thiết bị máy tính để bàn có thể được hiển thị trong các cửa sổ ứng dụng độc lập, giống như các ứng dụng gốc. Đây là giao diện của một cửa sổ ứng dụng:

Hình minh họa PWA được cài đặt trên máy tính để bàn, với các nút điều khiển cửa sổ, thanh tiêu đề và nội dung web bên dưới

Như thấy ở trên, cửa sổ ứng dụng bao gồm hai khu vực chính:

  • Khu vực thanh tiêu đề ở trên cùng.
  • Khu vực nội dung ứng dụng ở phía dưới, hiển thị nội dung HTML từ PWA.

Khu vực thanh tiêu đề chứa các nút phóng to, thu nhỏ và đóng quan trọng của hệ thống (vị trí của chúng có thể khác nhau tùy theo hệ điều hành), tên ứng dụng (lấy từ phần tử HTML <title> trong trang), và có thể là các nút PWA dành riêng cho user agent.

Với tính năng Window Controls Overlay, các Progressive Web App có thể hiển thị nội dung web của họ trên toàn bộ diện tích bề mặt cửa sổ ứng dụng. Vì các nút điều khiển cửa sổ và các nút PWA dành riêng cho user agent phải luôn hiển thị, chúng được chuyển thành một lớp phủ hiển thị trên nội dung web.

Hình minh họa PWA được cài đặt trên máy tính để bàn với tính năng Window Controls Overlay, với các nút điều khiển cửa sổ, không có thanh tiêu đề, và nội dung web trải rộng toàn bộ cửa sổ

Phần của thanh tiêu đề thường chứa tên ứng dụng bị ẩn, và khu vực mà nó thường chiếm sẽ có thể truy cập được thông qua Window Controls Overlay API.

Các PWA có thể sử dụng API để định vị nội dung trong khu vực này và tránh nội dung bị ẩn sau lớp phủ của các nút điều khiển, tương tự như cách các tác giả web có thể tính đến sự hiện diện của các notch trên một số thiết bị di động nhất định.

Biến môi trường CSS

Các Progressive Web App có thể định vị nội dung web của họ trong khu vực mà thanh tiêu đề thường chiếm bằng cách sử dụng các biến môi trường CSS titlebar-area-x, titlebar-area-y, titlebar-area-width và titlebar-area-height. Xem Sử dụng env() để đảm bảo nội dung không bị che khuất bởi các nút điều khiển cửa sổ trong PWA máy tính để bàn.

Các giao diện

WindowControlsOverlay

Cung cấp thông tin về tính khả dụng và hình học của thanh tiêu đề, cùng một sự kiện để biết khi nào nó thay đổi.

WindowControlsOverlayGeometryChangeEvent

Đại diện cho các sự kiện cung cấp thông tin liên quan đến vùng thanh tiêu đề của Progressive Web App máy tính để bàn khi kích thước hoặc tính khả dụng của nó thay đổi.

Mở rộng cho các giao diện khác

Trả về giao diện WindowControlsOverlay, hiển thị thông tin về hình học thanh tiêu đề trong các Progressive Web App máy tính để bàn.

Thông số kỹ thuật

Specification
Window Controls Overlay

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content