視窗管理

瀏覽器之外的 PWA 會管理自己的視窗。本章節將說明在作業系統中管理視窗的 API 和功能。

PWA 視窗

在專屬視窗執行 (由 PWA 管理) 具有該作業系統中任何視窗的所有優勢和責任，例如：

  • 可在多視窗作業系統 (例如 Windows 或 ChromeOS) 上調整視窗大小及移動視窗。
  • 與其他應用程式視窗分享畫面，像是 iPadOS 分割模式或 Android 分割畫面模式。
  • 會顯示在電腦版的座架、工作列和替代分頁選單中，行動裝置則會顯示在多工視窗清單中。
  • 可以將視窗最小化、在不同螢幕和桌面之間移動視窗，或隨時關閉視窗。

移動及調整視窗大小

您的 PWA 視窗大小不限，也可以放在電腦作業系統上的任何位置。根據預設，當使用者在安裝後首次開啟 PWA 時，PWA 將取得指定目前螢幕百分比的預設視窗大小，並將最高解析度置於螢幕左上角 1920x1080。

使用者可以移動視窗並調整大小，瀏覽器會記住上次的偏好設定，因此當使用者下次開啟應用程式時，視窗仍會保留先前使用的大小和位置。

您無法定義 PWA 在資訊清單中的偏好大小和位置，您只能使用 JavaScript API 重新調整視窗位置和大小。在程式碼中，您可以使用 window 物件的 moveTo(x, y) 和 resizeTo(x, y) 函式，移動自己的 PWA 視窗，並調整大小。

舉例來說，您可以在載入 PWA 時，透過以下方式調整 PWA 視窗的大小和移動：

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);
   }
});

您可以使用 window.screen 物件查詢目前的螢幕大小和位置，也可以使用 window 物件中的 resize 事件，偵測視窗大小調整的時機。沒有可擷取視窗移動的事件，因此您可以選擇經常查詢位置。

瀏覽其他網站

如果想將使用者導向至 PWA 範圍外的外部網站，可以使用標準的 <a href> HTML 元素、使用 location.href，或在相容的平台上開啟新視窗。

目前，只要在所有瀏覽器中安裝 PWA，當您瀏覽超出資訊清單範圍的網址時，PWA 的瀏覽器引擎就會在視窗環境內轉譯應用程式內瀏覽器。

應用程式內瀏覽器的部分功能如下：

  • 會顯示在內容頂端。
  • 這些網址會有一個靜態網址列，分別顯示目前的起點、視窗標題和選單。一般而言，這類項目是利用資訊清單的 theme_color 設定主題。
  • 你可以透過內容選單在瀏覽器中開啟該網址。
  • 使用者可以關閉瀏覽器或返回。

瀏覽網址不在範圍之內時，電腦版 PWA 上的應用程式內瀏覽器。

瀏覽獨立 PWA 中超出範圍的網址時，iPhone 上的應用程式內瀏覽器。

瀏覽獨立 PWA 內網址範圍外的網址時，可使用 Android 的應用程式內瀏覽器。

授權流程

許多網路驗證和授權流程涉及將使用者重新導向至不同來源的其他網址，以取得傳回至 PWA 來源的權杖 (例如使用 OAuth 2.0)。

在這類情況下，應用程式內瀏覽器會遵循下列程序：

  1. 使用者開啟您的 PWA，然後點選「登入」。
  2. PWA 會將使用者重新導向至 PWA 範圍外的網址，讓算繪引擎在 PWA 中開啟應用程式內瀏覽器。
  3. 使用者隨時可以取消應用程式內瀏覽器，並返回 PWA。
  4. 使用者登入應用程式內瀏覽器。驗證伺服器將使用者重新導向至 PWA 來源，並將權杖做為引數傳送。
  5. 當應用程式內瀏覽器偵測到屬於 PWA 範圍的網址時，就會自行關閉。
  6. 引擎會將主要 PWA 視窗導覽至驗證伺服器在應用程式內瀏覽器中前往的網址。
  7. 您的 PWA 會取得符記、儲存權杖，並轉譯 PWA。

強制使用瀏覽器的導覽功能

如果您想使用網址 (而非應用程式內瀏覽器) 強制開啟瀏覽器，可以使用 <a href> 元素的 _blank 目標。這項功能僅適用於電腦版 PWA，無法在行動裝置上透過網址開啟瀏覽器。

function openBrowser(url) {
    window.open("url", "_blank", "");
}

開啟新視窗

使用電腦時，使用者可以開啟多個相同 PWA 視窗。每個視窗都會是對同一個 start_url 的不同導覽，如同您開啟了相同網址的兩個瀏覽器分頁。使用者可以在 PWA 的選單中，依序選取「檔案」>「新視窗」，透過 PWA 程式碼開啟新視窗，也可以透過 open() 函式開啟新視窗。詳情請參閱說明文件。

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

安裝同一個 PWA，並在電腦作業系統上開啟多個視窗。

在 iOS 或 iPadOS 的 PWA 視窗中呼叫 open() 會傳回 null，且不會開啟視窗。在 Android 上開啟新視窗時，系統會針對網址建立新的應用程式內瀏覽器，即使網址在 PWA 範圍內，一般不會觸發外部瀏覽體驗。

視窗標題

<title> 元素主要用於搜尋引擎最佳化，因為瀏覽器分頁中的空間有限。在 PWA 中從瀏覽器切換至視窗時，可以使用所有標題列空間。

您可以定義標題列的內容：

  • 靜態在 HTML <title> 元素中。
  • 隨時動態變更 document.title 字串屬性。

在電腦版 PWA 中，標題非常重要，這類資訊會用於視窗的標題列，有時用於工作管理員或多工處理選項。如果有單頁應用程式，您可能會想更新每條路線的標題。

分頁模式

這項實驗功能稱為「分頁模式」，可讓 PWA 採用與網路瀏覽器相似的分頁式設計。在這種情況下，使用者可以在同一個 PWA 中開啟多個分頁，但所有分頁都會併入同一個作業系統視窗，如以下影片所示：

如要進一步瞭解這項實驗功能，請參閱 PWA 的分頁式應用程式模式。

視窗控制項重疊

我們提到，您可以透過定義 <title> 元素或 document.title 屬性的值來變更視窗標題。但一律為字串值。我們可以視需要使用 HTML、CSS 和圖片設計標題列，該怎麼辦？ 此時視窗控制項疊加畫面就會派上用場，Microsoft Edge 和電腦版 PWA 的 Google Chrome 中提供了新的實驗功能。

如要進一步瞭解這項功能，請參閱「自訂 PWA 標題列的視窗控制項重疊元素」。

您可以利用重疊視窗控制項，在標題列中顯示內容。

視窗管理

如果使用多個螢幕，使用者會希望使用所有可用的空間。例如：

  • 多視窗圖形編輯器 (à la Gimp) 可將各種編輯工具放置在正確位置的視窗中。
  • 虛擬交易桌可以顯示多個視窗中的市場趨勢，並且在全螢幕模式下查看。
  • 投影播放應用程式可在內部主螢幕和外部投影機的簡報中顯示演講者備忘稿。

Window Management API 可讓 PWA 達到上述目標，並提供更多服務。

正在取得畫面詳細資料

Window Management API 新增方法 window.getScreenDetails()，以傳回含有畫面的物件，做為附加畫面的不可變更陣列。另一種是透過 ScreenDetails.currentScreen 存取的使用中物件，對應至目前的 window.screen。

當 screens 陣列變更時，傳回的物件也會觸發 screenschange 事件。變更個別螢幕上的屬性時，就不會發生這種情況。個別畫面 (window.screen 或 screens 陣列中的畫面) 也會在屬性變更時觸發 change 事件。

// 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;
});

如果使用者或作業系統將 PWA 視窗從一個畫面移動到另一個畫面，也會從畫面詳細資料物件觸發 currentscreenchange 事件。

螢幕 Wake Lock

想像一下，你正在廚房裡使用平板電腦烹煮食譜。你剛準備了食材。你的手已經是一團亂，當你回到裝置繼續閱讀下一個步驟。太慘了！螢幕變黑！Screen Wake Lock API 是專門用來協助 PWA 的功能，可讓 PWA 防止螢幕變暗、休眠或鎖定，讓使用者可以放心停止、開始、離開及返回裝置。

// 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();

虛擬鍵盤

手機和平板電腦等觸控式裝置可提供虛擬螢幕小鍵盤，讓使用者可以在 PWA 的表單元素成為焦點時輸入內容。

有了 VirtualKeyboard API，您的 PWA 現在可透過 navigator.virtualKeyboard 介面進一步控制相容平台上的鍵盤，包括：

  • 顯示及隱藏含有 navigator.virtualKeyboard.show() 和 navigator.virtualKeyboard.hide() 函式的虛擬鍵盤。
  • 將 navigator.virtualKeyboard.overlaysContent 設為 true，通知瀏覽器您要自行關閉虛擬鍵盤。
  • 透過 navigator.virtualKeyboard 的 geometrychange 事件，得知鍵盤何時出現和消失。
  • 透過 virtualkeyboardpolicy HTML 屬性，設定編輯主機元素 (使用 contenteditable) 的虛擬鍵盤政策。政策可讓您決定是否要由瀏覽器使用 auto 值自動處理虛擬鍵盤，或是由指令碼利用 manual 值處理虛擬鍵盤。
  • 使用 CSS 環境變數取得虛擬鍵盤外觀的相關資訊，例如 keyboard-inset-height 和 keyboard-inset-top。

如要進一步瞭解這個 API，請參閱「透過 VirtualKeyboard API 的完整控制權」。

資源