Một PWA bên ngoài trình duyệt sẽ quản lý cửa sổ của riêng ứng dụng. Tìm hiểu về các API và chức năng để quản lý cửa sổ trong hệ điều hành.
Khi chạy trong cửa sổ riêng do PWA quản lý, ứng dụng sẽ có tất cả cá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 di chuyển và đổi kích thước cửa sổ trong các hệ điều hành nhiều cửa sổ, chẳng hạn như Windows hoặc ChromeOS.
- Chia sẻ màn hình với các cửa sổ ứng dụng khác, như trong chế độ chia đôi của iPadOS hoặc chế độ chia đôi màn hình của Android.
- Xuất hiện trong thanh dock, thanh tác vụ và trong trình đơn alt-tab trên máy tính, cũng như danh sách cửa sổ đa nhiệm trên thiết bị di động.
- Khả năng thu nhỏ, di chuyển cửa sổ trên màn hình và máy tính để bàn, đồ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à được đặt ở vị trí bất kỳ trên màn hình trên hệ điều hành máy tính. Theo mặc định, khi người dùng mở PWA lần đầu sau khi cài đặt, PWA sẽ có kích thước cửa sổ mặc định theo tỷ lệ phần trăm của màn hình hiện tại, với độ phân giải tối đa là 1920x1080 ở góc trên bên trái của 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ớ tuỳ chọn ưu tiên gần đây nhất. 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í từ 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ã, 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ách sử dụ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 cửa sổ được đổi kích thước bằng sự kiện resize từ đối tượng window. Không có sự kiện nào để ghi lại việc di chuyển cửa sổ, vì vậy, bạn nên truy vấn vị trí thường xuyên.
Thay vì di chuyển và đổi kích thước cửa sổ một cách tuyệt đối, bạn có thể di chuyển tương đối và đổi kích thước bằng moveBy() và resizeBy().
Duyệt qua 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 việc này 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.
Khi bạn truy cập vào một URL nằm ngoài phạm vi 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 cửa sổ.
Một số tính năng của trình duyệt trong ứng dụng:
- Các thẻ này xuất hiện ở đầu nội dung của bạn.
- Các cửa sổ này có một thanh địa chỉ tĩnh cho biết nguồn gốc hiện tại, tiêu đề của cửa sổ và một trình đơn. Thông thường, các tệp này được tạo chủ đề bằng
theme_colorcủa tệp kê khai. - Trong 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.
Khi trình duyệt trong ứng dụng đang hiển thị trên màn hình, PWA của bạn đang chờ ở chế độ nền, như thể một cửa sổ khác đang che khuất ứng dụng.
Quy trình uỷ quyền
Nhiều quy trình xác thực và uỷ quyền trên web yêu cầu chuyển hướng người dùng đến một URL khác trên một nguồn gốc khác để lấy mã thông báo trả về nguồn gốc của PWA, chẳng hạn như với 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 đăng nhập.
- PWA của bạn sẽ 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 mở một trình duyệt trong ứng dụng trong PWA.
- 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, gửi mã thông báo dưới dạng đố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 chuyển hướng thao tác điều hướng cửa sổ PWA chính đến URL mà máy chủ xác thực đã chuyển đến trong trình duyệt trong ứng dụng.
- PWA của bạn sẽ nhận 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 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 phần tử <a href>. Tính năng này chỉ hoạt động trên PWA dành cho máy tính. Trên thiết bị di động, bạn không thể mở trình duyệt bằng URL.
function openBrowser(url) {
window.open("url", "_blank", "");
}
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 PWA. Mỗi cửa sổ có một thao tác điều hướng khác nhau cho 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. Từ mã PWA, bạn có thể mở một cửa sổ mới bằng hàm open().
function openNewWindow() {
window.open("/", "new-window", "width=600,height=600");
}
Khi bạn gọi open() trong cửa sổ PWA trên iOS hoặc iPadOS, lệnh này sẽ trả về null và không mở cửa sổ. Việc mở cửa sổ mới trên Android sẽ tạo 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, 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 bạn di chuyển từ trình duyệt sang cửa sổ trong một PWA, bạn có thể sử dụng tất cả không gian trên thanh tiêu đề.
Bạn có thể xác định nội dung của thanh tiêu đề:
- Tĩnh trong phần tử
<title>HTML. - Linh động thay đổi thuộc tính chuỗi
document.titlebất cứ lúc nào.
Trên PWA dành cho máy tính, tiêu đề là yếu tố thiết yếu và được dùng trong thanh tiêu đề của cửa sổ, đôi khi trong trình quản lý tác vụ hoặc lựa chọn nhiều tác vụ. Nếu có một ứng dụng một trang, bạn nên cập nhật tiêu đề trên mọi tuyến.
Chế độ thẻ
Chế độ thẻ là một tính năng thử nghiệm cho phép PWA của bạn có thiết kế dựa trên thẻ, tương tự như trình duyệt web. Trong trường hợp này, người dùng có thể mở một số thẻ trong 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.
Bạn có thể đọc thêm về tính năng thử nghiệm này tại bài viết Chế độ ứng dụng theo thẻ cho PWA.
Lớp phủ chế độ điều khiển cửa sổ
Chúng tôi đã đề cập 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. Tuy nhiên, giá trị này luôn là một giá trị chuỗi. Điều gì sẽ xảy ra nếu chúng ta có thể thiết kế thanh tiêu đề bằng HTML, CSS và hình ảnh?
Lớp phủ điều khiển cửa sổ, một tính năng thử nghiệm trong Microsoft Edge và Google Chrome dành cho PWA trên máy tính, có thể giúp ích.
Bạn có thể đọc thêm về chức năng này tại 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ổ
Khi có nhiều màn hình, người dùng muốn sử dụng tất cả không gian có sẵn. Ví dụ:
- Các trình chỉnh sửa đồ hoạ nhiều cửa sổ, chẳng hạn như Gimp, có thể đặt nhiều công cụ chỉnh sửa trong các cửa sổ được định vị 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ổ, trong đó 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.
Window Management API (API Quản lý cửa sổ) cho phép PWA làm điều đó và nhiều việc khác.
Lấy thông tin chi tiết về màn hình
Window Management API (API Quản lý cửa sổ) thêm một phương thức mới, window.getScreenDetails(), trả về một đối tượng có màn hình dưới dạng một mảng không thể thay đổi gồm các màn hình đính kèm. Ngoài ra, bạn cũng có thể truy cập vào một đối tượng trực tiếp 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 một sự kiện screenschange khi mảng screens thay đổi. (Điều này không xảy ra khi thay đổi các thuộc tính trên từng màn hình.) Các màn hình riêng lẻ, window.screen hoặc một màn hình trong mảng screens, cũng kích hoạt sự kiện change khi các thuộc tính của 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].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 của bạn 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 về 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 và làm theo một công thức nấu ăn trên máy tính bảng. Bạn vừa chuẩn bị xong nguyên liệu. Tay bạn bẩn thỉu, nên 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 (API khoá chế độ thức của màn hình) là API dành cho bạn, cho phép PWA ngăn màn hình giảm độ sáng, chuyển sang chế độ ngủ hoặc khoá, cho phép người dùng dừng, bắt đầu, rời đ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, cung cấp bàn phím ảo trên màn hình để người dùng có thể nhập khi các phần tử biểu mẫu của PWA nằm trong tiêu điểm.
Với VirtualKeyboard API, PWA của bạn có thể kiểm soát bàn phím tốt hơn trên các nền tảng tương thích bằng cách sử dụng giao diện navigator.virtualKeyboard.
- Hiện và ẩn bàn phím ảo bằng
navigator.virtualKeyboard.show()vànavigator.virtualKeyboard.hide(). - Cho trình duyệt biết rằng bạn đang tự đóng bàn phím ảo bằng cách đặt
navigator.virtualKeyboard.overlaysContentbằngtrue. - Biết thời điểm bàn phím xuất hiện và biến mất bằng sự kiện
geometrychange. - Đặt chính sách bàn phím ảo khi chỉnh sửa các phần tử lưu trữ bằng cách đặt
contenteditablethànhautohoặcmanual, với 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 (auto) hay tập lệnh xử lý (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.
Đọc thêm về API này trong phần Kiểm soát toàn bộ bằng API VirtualKeyboard.