Một ứng dụng web tiến bộ (PWA) bên ngoài trình duyệt quản lý cửa sổ riêng. Trong chương này, bạn sẽ tìm hiểu các API và chức năng quản lý cửa sổ trong hệ điều hành.
Cửa sổ PWA
Khi chạy trên cửa sổ riêng do PWA quản lý, bạn có tất cả lợi thế và trách nhiệm của mọi cửa sổ trong hệ điều hành đó, chẳng hạn như:
- Khả năng đổi kích thước và di chuyển cửa sổ xung quanh trên các hệ điều hành nhiều cửa sổ, như Windows hoặc ChromeOS.
- Chia sẻ màn hình với các cửa sổ ứng dụng khác, chẳng hạn như ở chế độ chia đôi màn hình iPadOS hoặc Android.
- Xuất hiện trong thanh công cụ, thanh tác vụ và trong trình đơn thẻ alt trên máy tính cũng như trong danh sách cửa sổ nhiều tác vụ trên thiết bị di động.
- Khả năng thu nhỏ, di chuyển cửa sổ trên các màn hình và màn hình, đồng thời đóng cửa sổ bất cứ lúc nào.
Di chuyển và đổi kích thước cửa sổ
Cửa sổ PWA có thể có kích thước bất kỳ và nằm ở vị trí bất kỳ trên màn hình của hệ điều hành máy tính. Theo mặc định, khi người dùng mở PWA lần đầu tiên sau khi cài đặt, PWA sẽ nhận được kích thước cửa sổ mặc định theo tỷ lệ phần trăm màn hình hiện tại, với độ phân giải tối đa là 1920x1080 được đặt ở góc trên cùng bên trái màn hình.
Người dùng có thể di chuyển và đổi kích thước cửa sổ, đồng thời trình duyệt sẽ ghi nhớ lựa chọn ưu tiên gần đây nhất, vì vậy, vào lần tiếp theo người dùng mở ứng dụng, cửa sổ sẽ giữ nguyên kích thước và vị trí so với lần sử dụng trước đó.
Không có cách nào để xác định kích thước và vị trí ưu tiên của PWA trong tệp kê khai. Bạn chỉ có thể đặt lại vị trí và đổi kích thước cửa sổ bằng API JavaScript. Trong mã nguồn của mình, bạn có thể di chuyển và đổi kích thước cửa sổ PWA của riêng mình bằng các hàm moveTo(x, y) và resizeTo(x, y) của đối tượng window.
Ví dụ: bạn có thể đổi kích thước và di chuyển cửa sổ PWA khi PWA tải bằng cách sử dụng:
document.addEventListener("DOMContentLoaded", event => {
// we can move only if we are not in a browser's tab
isBrowser = matchMedia("(display-mode: browser)").matches;
if (!isBrowser) {
window.moveTo(16, 16);
window.resizeTo(800, 600);
}
});
Bạn có thể truy vấn kích thước và vị trí màn hình hiện tại bằng đối tượng window.screen; bạn có thể phát hiện thời điểm đổi kích thước cửa sổ bằng cách sử dụng sự kiện resize từ đối tượng window. Không có sự kiện nào để ghi lại quá trình di chuyển cửa sổ, vì vậy, bạn có thể truy vấn vị trí thường xuyên.
Duyệt đến các trang web khác
Nếu muốn chuyển người dùng đến một trang web bên ngoài nằm ngoài phạm vi của PWA, bạn có thể thực hiện bằng phần tử HTML <a href> tiêu chuẩn, sử dụng location.href hoặc mở một cửa sổ mới trên các nền tảng tương thích.
Hiện tại, trên tất cả các trình duyệt, nếu PWA của bạn đã được cài đặt, thì khi bạn duyệt đến một URL nằm ngoài phạm vi của tệp kê khai, công cụ trình duyệt của PWA sẽ hiển thị một trình duyệt trong ứng dụng trong ngữ cảnh cửa sổ của bạn.
Trình duyệt trong ứng dụng có một số tính năng như sau:
- Loại quảng cáo này xuất hiện ở đầu nội dung của bạn.
- Các đường liên kết này có một thanh URL tĩnh cho thấy nguồn gốc hiện tại, tiêu đề của cửa sổ và một trình đơn. Thường thì các tệp này được giao diện theo giao diện bằng
theme_colorcủa tệp kê khai. - Từ trình đơn theo bối cảnh, bạn có thể mở URL đó trong trình duyệt.
- Người dùng có thể đóng trình duyệt hoặc quay lại.
Quy trình uỷ quyền
Nhiều quy trình xác thực và uỷ quyền web liên quan đến việc chuyển hướng người dùng đến một URL khác ở một nguồn gốc khác để lấy một mã thông báo. Mã thông báo này sẽ trở về nguồn gốc của PWA, chẳng hạn như sử dụng OAuth 2.0.
Trong những trường hợp này, trình duyệt trong ứng dụng sẽ tuân theo quy trình sau:
- Người dùng mở PWA của bạn rồi nhấp vào thông tin đăng nhập.
- PWA của bạn chuyển hướng người dùng đến một URL nằm ngoài phạm vi của PWA để công cụ kết xuất sẽ mở một trình duyệt trong ứng dụng trong PWA của bạn.
- Người dùng có thể huỷ trình duyệt trong ứng dụng và quay lại PWA của bạn bất cứ lúc nào.
- Người dùng đăng nhập vào trình duyệt trong ứng dụng. Máy chủ xác thực sẽ chuyển hướng người dùng đến nguồn gốc PWA của bạn và gửi mã thông báo này làm đối số.
- Trình duyệt trong ứng dụng sẽ tự đóng khi phát hiện thấy một URL thuộc phạm vi của PWA.
- Công cụ này sẽ chuyển hướng hoạt động điều hướng chính trong cửa sổ PWA đến URL mà máy chủ xác thực đã truy cập khi đang ở trình duyệt trong ứng dụng.
- PWA của bạn nhận được mã thông báo, lưu trữ mã thông báo và hiển thị PWA.
Buộc điều hướng của trình duyệt
Nếu muốn buộc mở trình duyệt bằng một URL chứ không phải trình duyệt trong ứng dụng, bạn có thể sử dụng mục tiêu _blank của các phần tử <a href>. Tính năng này chỉ hoạt động trên các ứng dụng web tiến bộ (PWA) dành cho máy tính. Trên thiết bị di động, không có tuỳ chọn để mở trình duyệt bằng URL.
function openBrowser(url) {
window.open("url", "_blank", "");
}
Đang mở cửa sổ mới
Trên máy tính, người dùng có thể mở nhiều cửa sổ của cùng một ứng dụng web tiến bộ (PWA). Mỗi cửa sổ sẽ có một phần điều hướng riêng đến cùng một start_url, như thể bạn đang mở hai thẻ trình duyệt của cùng một URL.
Trên trình đơn trong PWA, người dùng có thể chọn Tệp rồi chọn Cửa sổ mới. Trong mã PWA, bạn có thể mở một cửa sổ mới có hàm open(). Xem tài liệu để biết thông tin chi tiết.
function openNewWindow() {
window.open("/", "new-window", "width=600,height=600");
}
Việc gọi open() trong một cửa sổ PWA trên iOS hoặc iPadOS sẽ trả về null và không mở ra cửa sổ nào. Việc mở các cửa sổ mới trên Android sẽ tạo ra một trình duyệt mới trong ứng dụng cho URL (ngay cả khi URL đó nằm trong phạm vi của PWA của bạn) thường không kích hoạt trải nghiệm duyệt web bên ngoài.
Tiêu đề cửa sổ
Phần tử <title> chủ yếu được dùng cho mục đích SEO vì không gian trong thẻ trình duyệt bị hạn chế. Khi di chuyển từ trình duyệt sang cửa sổ trong PWA, bạn sẽ có thể sử dụng toàn bộ không gian của thanh tiêu đề.
Bạn có thể xác định nội dung của thanh tiêu đề:
- Tĩnh trong phần tử HTML
<title>của bạn. - Thay đổi linh hoạt thuộc tính chuỗi
document.titlebất cứ lúc nào.
Trên các PWA máy tính, tiêu đề là rất quan trọng và được dùng trong thanh tiêu đề của cửa sổ và đôi khi trong trình quản lý tác vụ hoặc lựa chọn nhiều tác vụ. Nếu xây dựng đơn đăng ký một trang đơn, bạn nên cập nhật tên ứng dụng trên mọi tuyến đường.
Chế độ thẻ
Khả năng thử nghiệm, còn gọi là chế độ dạng thẻ, sẽ cho phép PWA của bạn có thiết kế dựa trên thẻ tương tự như một trình duyệt web. Trong trường hợp này, người dùng có thể mở nhiều thẻ qua cùng một PWA nhưng tất cả đều được liên kết với nhau trong cùng một cửa sổ hệ điều hành, như bạn có thể thấy trong video sau:
Bạn có thể đọc thêm về tính năng thử nghiệm này trong bài viết Chế độ ứng dụng dạng thẻ cho PWA.
Lớp phủ chế độ điều khiển cửa sổ
Chúng tôi thấy rằng bạn có thể thay đổi tiêu đề của cửa sổ bằng cách xác định giá trị của phần tử <title> hoặc thuộc tính document.title. Nhưng đó luôn là một giá trị chuỗi. Nếu chúng ta có thể thiết kế thanh tiêu đề như chúng ta muốn bằng HTML, CSS và hình ảnh thì sao?
Đó là lúc Lớp phủ điều khiển cửa sổ xuất hiện, một tính năng thử nghiệm mới trong các PWA Microsoft Edge và Google Chrome cho máy tính.
Bạn có thể đọc thêm về tính năng này trong bài viết Tuỳ chỉnh lớp phủ chế độ điều khiển cửa sổ trên thanh tiêu đề của PWA.
Quản lý cửa sổ
Với nhiều màn hình, người dùng sẽ muốn sử dụng tất cả không gian có sẵn cho họ. Ví dụ:
- Trình chỉnh sửa đồ hoạ nhiều cửa sổ à la Gimp có thể đặt nhiều công cụ chỉnh sửa vào các cửa sổ được đặt chính xác.
- Bàn giao dịch ảo có thể hiển thị xu hướng thị trường trong nhiều cửa sổ mà bạn có thể xem bất kỳ cửa sổ nào ở chế độ toàn màn hình.
- Ứng dụng trình chiếu có thể hiển thị ghi chú của người thuyết trình trên màn hình chính bên trong và bản trình bày trên máy chiếu bên ngoài.
API Quản lý cửa sổ cho phép PWA làm điều đó và nhiều tác vụ khác.
Đang lấy thông tin chi tiết về màn hình
API Quản lý cửa sổ thêm một phương thức mới là window.getScreenDetails(). Phương thức này trả về một đối tượng có màn hình dưới dạng một mảng màn hình đính kèm không thể thay đổi. Ngoài ra, còn có một đối tượng trực tiếp truy cập được từ ScreenDetails.currentScreen, tương ứng với window.screen hiện tại.
Đối tượng được trả về cũng kích hoạt sự kiện screenschange khi mảng screens thay đổi. (Điều này không xảy ra khi các thuộc tính trên từng màn hình thay đổi.) Các màn hình riêng lẻ, window.screen hoặc màn hình trong mảng screens, cũng kích hoạt sự kiện change khi thuộc tính của các màn hình đó thay đổi.
// Request an object with a screen objects
const screenDetails = await window.getScreenDetails();
screenDetails.screens[0].isPrimary; // e.g. true
screenDetails.screens[0].isInternal; // e.g. true
screenDetails.screens[0].pointerTypes; // e.g. ["touch"]
screenDetails.screens[0].label; // e.g. 'Samsung Electric Company 28"'
// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screenDetails.currentScreen;
screenDetails.addEventListener('screenschange', function() {
// NOTE: Does not fire on changes to attributes of individual screens.
const screenCount = screenDetails.screens.length;
const currentScreen screenDetails.currentScreen.id;
});
Nếu người dùng hoặc hệ điều hành di chuyển cửa sổ PWA từ màn hình này sang màn hình khác, thì sự kiện currentscreenchange cũng sẽ được kích hoạt từ đối tượng thông tin chi tiết trên màn hình.
Khoá chế độ thức của màn hình
Hãy tưởng tượng điều này: bạn đang ở trong bếp theo một công thức trên máy tính bảng. Bạn đã chuẩn bị xong nguyên liệu. Bàn tay bạn bừa bộn và bạn quay lại thiết bị để đọc bước tiếp theo. Thảm hoạ! Màn hình đã chuyển sang màu đen! Screen Wake Lock API được cung cấp cho bạn để cho phép PWA ngăn màn hình làm mờ, chuyển sang chế độ ngủ hoặc khoá, cho phép người dùng dừng, bắt đầu, rời khỏi và quay lại mà không phải lo lắng.
// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();
// Listen for wake lock release
wakeLock.addEventListener('release', () => {
console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();
Bàn phím ảo
Các thiết bị cảm ứng (chẳng hạn như điện thoại và máy tính bảng) sẽ cung cấp bàn phím ảo ảo để người dùng có thể nhập văn bản khi các thành phần biểu mẫu của PWA được lấy làm tiêu điểm.
Nhờ có VirtualKeyboard API, PWA của bạn hiện có thể có nhiều quyền kiểm soát bàn phím hơn trên các nền tảng tương thích thông qua giao diện navigator.virtualKeyboard, bao gồm:
- Hiện và ẩn bàn phím ảo bằng các hàm
navigator.virtualKeyboard.show()vànavigator.virtualKeyboard.hide(). - Thông báo cho trình duyệt rằng bạn đang tự đóng bàn phím ảo bằng cách đặt
navigator.virtualKeyboard.overlaysContentbằng vớitrue. - Biết thời điểm bàn phím xuất hiện và biến mất bằng sự kiện
geometrychangelànavigator.virtualKeyboard. - Đặt chính sách bàn phím ảo để chỉnh sửa các phần tử lưu trữ (sử dụng
contenteditable) bằng thuộc tính HTMLvirtualkeyboardpolicy. Chính sách cho phép bạn quyết định xem bạn muốn trình duyệt tự động xử lý bàn phím ảo bằng giá trịautohay được tập lệnh của bạn xử lý bằng giá trịmanual. - Sử dụng các biến môi trường CSS để nhận thông tin về giao diện bàn phím ảo, chẳng hạn như
keyboard-inset-heightvàkeyboard-inset-top.
Bạn có thể đọc thêm về API này trong bài viết Kiểm soát hoàn toàn bằng API VirtualKeyboard.
Tài nguyên
- Quản lý một số màn hình bằng API Vị trí cửa sổ đa màn hình
- Chế độ ứng dụng được gắn thẻ cho PWA
- Không khoá màn hình bằng API Chế độ thức trên màn hình
- Toàn quyền kiểm soát bằng API VirtualKeyboard
- Tuỳ chỉnh lớp phủ chế độ điều khiển cửa sổ trên thanh tiêu đề của PWA
- Hiển thị nội dung trong thanh tiêu đề