Quản lý cửa sổ

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. Trong chương này, bạn sẽ hiểu được 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ổ của riêng bạn, do PWA quản lý, ứng dụng có tất cả các ưu điểm 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 thay đổ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, 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 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 bằng 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 ở 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, trong 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.

Bạn không thể 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 thao tác di chuyển cửa sổ, vì vậy, bạn có thể thường xuyên truy vấn vị trí.

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 một 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 bạn đã cài đặt PWA, thì khi bạn duyệt đến 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 là:

  • 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 URL 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 giao diện này được tạo giao diện bằng theme_color của tệp kê khai.
  • Trên 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.

Một trình duyệt trong ứng dụng trên PWA dành cho máy tính khi duyệt qua một URL nằm ngoài phạm vi.

Trình duyệt trong ứng dụng trên iPhone khi duyệt một URL nằm ngoài phạm vi của một PWA độc lập.

Trình duyệt trong ứng dụng trên Android khi duyệt một URL nằm ngoài phạm vi của một PWA độc lập.

Quy trình uỷ quyền

Nhiều quy trình xác thực và uỷ quyền trên web đều 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ã thông báo 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:

  1. Người dùng mở PWA của bạn rồi nhấp vào đăng nhập.
  2. 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.
  3. 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.
  4. 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ố.
  5. 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.
  6. 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.
  7. 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ể 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, 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ổ sẽ là một thao tác điều hướng khác nhau đế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ã 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 này để biết thông tin chi tiết.

function openNewWindow() {
    window.open("/", "new-window", "width=600,height=600");
}

Cùng một PWA đã cài đặt với một số cửa sổ đang mở trên hệ điều hành máy tính.

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. Điều này 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.title bấ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ế độ dạng thẻ

Một tính năng thử nghiệm, còn gọi là chế độ thẻ, sẽ 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ẻ từ 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 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 đề như chúng ta muốn, với HTML, CSS và hình ảnh? Đó là lý do ra đời của Lớp phủ điều khiển cửa sổ, một tính năng thử nghiệm mới trong Microsoft Edge và Google Chrome dành cho PWA trên 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.

Với lớp phủ điều khiển cửa sổ, bạn có thể hiển thị nội dung trong thanh tiêu đề.

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.

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 đượ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 các thuộc tính trên từng màn hình được 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 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 màn hình

Hãy tưởng tượng: 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ị dựa trên 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.

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.overlaysContent bằng true.
  • 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 của navigator.virtualKeyboard.
  • Thiết lập chính sách bàn phím ảo trên các phần tử máy chủ lưu trữ (sử dụng contenteditable) bằng thuộc tính HTML virtualkeyboardpolicy. 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ị auto hay bạn muốn 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-height và keyboard-inset-top.

Bạn có thể đọc thêm về API này trong phần Kiểm soát toàn bộ bằng VirtualKeyboard API.

Tài nguyên