PWA bên ngoài trình duyệt quản lý cửa sổ riêng của mình. Trong chương này, bạn sẽ hiểu các API và khả năng quản lý cửa sổ trong hệ điều hành.
Cửa sổ PWA
Việc chạy trên cửa sổ của riêng bạn (do PWA quản lý) sẽ có mọi 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ổ trên 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, chẳng hạn như ở chế độ chia đôi trên iPadOS hoặc chế độ chia đôi màn hình của Android.
- Xuất hiện trong các thanh Dock ứng dụng, thanh tác vụ và trong trình đơn alt-tab trên máy tính và trong các danh sách cửa sổ đa 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, cũng như đó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 trong hệ điều hành của 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ẽ 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 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ớ 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í của 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 đoạn mã 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á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 cách sử dụ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 hoạt động di chuyển cửa sổ, vì vậy, bạn có thể truy vấn vị trí thường xuyên.
Duyệt web đế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 cách sử dụ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ả trình duyệt, nếu PWA đã được cài đặt, thì khi bạn duyệt xem 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 bối cảnh cửa sổ của bạn.
Một số tính năng của trình duyệt trong ứng dụng là:
- Loại quảng cáo này xuất hiện ở đầu nội dung của bạn.
- Các trang này có thanh URL tĩnh cho thấy nguồn hiện tại, tiêu đề cửa sổ và trình đơn. Thông thường, các giao diện này được tạo 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 khác để lấy mã thông báo sẽ quay 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 và nhấp vào đăng nhập.
- PWA 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 thuộc 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 chuyển hướng người dùng đến nguồn gốc của PWA, gửi mã thông báo dưới dạng một đố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 cửa sổ chính của PWA đến URL mà máy chủ xác thực đã truy cập khi ở trình duyệt trong ứng dụng.
- PWA của bạn nhận mã thông báo, lưu trữ mã và hiển thị PWA.
Buộc thao tác trên 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ể 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 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 PWA. Mỗi cửa sổ sẽ là một phần điều hướng khác nhau đến cùng một start_url, giống như khi bạn mở hai thẻ trình duyệt trong 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ã của PWA, bạn có thể mở một cửa sổ mới bằng chức năng open(). Hãy 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 cửa sổ PWA trên iOS hoặc iPadOS 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 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ổ của bạn trong PWA, bạn sẽ có thể sử dụng mọi 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>của HTML. - Tự động thay đổi thuộc tính chuỗi
document.titlebất cứ lúc nào.
Trên PWA máy tính, tiêu đề là cần thiết và được sử dụng trên 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 nhiệm vụ. Nếu có ứng dụng trang đơn, bạn có thể cập nhật tiêu đề của mình trên mọi tuyến đường.
Chế độ thẻ
Chức năng thử nghiệm (còn gọi là chế độ thẻ) sẽ cho phép PWA 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ẻ trong cùng một PWA nhưng tất cả đượ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 dưới đây:
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 theo thẻ cho PWA.
Lớp phủ chế độ điều khiển cửa sổ
Như đã đề cập, bạn có thể thay đổi tiêu đề 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 giá trị này 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, cùng với HTML, CSS và hình ảnh thì sao?
Đó là lúc Lớp phủ chế độ điều khiển cửa sổ phát huy tác dụng, đây là một tính năng thử nghiệm mới trong các PWA của Microsoft Edge và Google Chrome dành cho máy tính.
Bạn có thể đọc thêm về chức năng này trong bài viết Tuỳ chỉnh lớp phủ đ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 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ổ có thể đặt nhiều công cụ chỉnh sửa vào những cửa sổ có vị trí chính xác.
- Các bộ phận chuyên trách giao dịch ảo có thể cho thấy xu hướng thị trường qua nhiều cửa sổ, 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 việc đó và nhiều việc 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ó các màn hình dưới dạng một mảng bất biến gồm các màn hình đính kèm. Ngoài ra, còn có một đối tượng trực tiếp có thể truy cập được từ ScreenDetails.currentScreen, tương ứng với window.screen hiện tại.
Đối tượng 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 các thuộc tính trên từng màn hình riêng lẻ thay đổi.) 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 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ổ của 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 chi tiết màn hình.
Khoá chế độ thức màn hình
Hãy tưởng tượng thế này: bạn đang ở trong bếp theo công thức trên máy tính bảng. Bạn vừa chuẩn bị xong các nguyên liệu. Tay bạn đang lộn xộ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! API chế độ khoá màn hình được cung cấp cho bạn và cho phép PWA ngăn màn hình giảm độ sáng, chuyển sang chế độ ngủ hoặc khoá. Nhờ đó, người dùng có thể 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) có bàn phím ảo để người dùng có thể nhập dữ liệu khi các thành phần biểu mẫu của PWA đang nằm trong tiêu điểm.
Nhờ VirtualKeyboard API, PWA của bạn giờ đây 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 bằng 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(). - 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
geometrychangelànavigator.virtualKeyboard. - Đặt chính sách bàn phím ảo khi chỉnh sửa các phần tử lưu trữ (sử dụng
contenteditable) bằng thuộc tính HTMLvirtualkeyboardpolicy. Một chính sách cho phép bạn quyết định xem bạn muốn trình duyệt xử lý tự động bàn phím ảo bằng cách sử dụng giá trịautohay tập lệnh xử lý bằng giá trịmanual. - Sử dụng các biến môi trường CSS để lấy 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 Toàn quyền kiểm soát với VirtualKeyboard API.