視窗管理

瀏覽器外部的 PWA 會管理自己的視窗。在本章中，您將瞭解在作業系統中管理視窗的 API 和功能。

PWA 視窗

在由 PWA 管理的視窗中執行，可享有該作業系統中任何視窗的所有優點和責任，例如：

  • 在 Windows 或 ChromeOS 等多視窗作業系統中，調整視窗大小及移動視窗。
  • 與其他應用程式視窗共用畫面，例如在 iPadOS 分割模式或 Android 分割畫面模式中。
  • 顯示在電腦的座架、工作列和 Alt 標籤選單中，以及行動裝置上的多工作視窗清單。
  • 能夠縮小、在不同螢幕和桌面上移動視窗，並隨時關閉視窗。

移動及調整視窗大小

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 上的應用程式內瀏覽器。

在 iPhone 上瀏覽獨立 PWA 範圍外的網址時，會使用應用程式內瀏覽器。

在 Android 上，當瀏覽的網址超出獨立 PWA 的範圍時，會使用應用程式內瀏覽器。

授權流程

許多網路驗證和授權流程都會將使用者重新導向至其他來源的不同網址，以便取得會返回 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 中的選單依序選取「File」和「New window」，然後透過 PWA 程式碼使用 open() 函式開啟新視窗。詳情請參閱說明文件。

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

在電腦作業系統上開啟相同的已安裝 PWA，並顯示多個視窗。

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

視窗標題

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

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

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

在電腦版 PWA 中，標題是必要元素，會用於視窗的標題列，有時也會用於工作管理員或多工選項。如果您有單頁應用程式，建議您更新每個路徑的標題。

分頁模式

分頁模式是一種實驗功能，可讓 PWA 採用類似網頁瀏覽器的分頁式設計。在此情況下，使用者可能會從同一個 PWA 開啟多個分頁，但全部會放在同一個作業系統視窗中，如以下影片所示：

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

視窗控制項重疊顯示

我們曾提到，您可以透過定義 <title> 元素或 document.title 屬性的值，來變更視窗的標題。但一律為字串值。如果我們可以使用 HTML、CSS 和圖片，按照自己的想法設計標題列，那會怎麼樣？這就是視窗控制項疊加層的用途，這是 Microsoft Edge 和 Google Chrome 電腦版 PWA 的全新實驗功能。

如要進一步瞭解這項功能，請參閱「自訂 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].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

想像一下：你在廚房裡烹調食譜，你剛剛準備好食材，你的雙手很髒，因此你回到裝置上查看後續步驟。太慘了！螢幕變黑了！螢幕 Wake Lock API 可讓 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 取得完整控制權一文。

資源