視窗管理

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

PWA 視窗

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

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

移動及調整視窗大小

在電腦作業系統上，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 事件，偵測視窗大小變更的時間。系統沒有用於擷取視窗移動事件的事件，因此您可以選擇經常查詢位置。

注意： 您可以使用 moveBy() 和 resizeBy() 相對移動及調整視窗大小，而非絕對移動及調整大小。

注意： 在行動裝置上，移動或調整視窗大小不會對畫面造成任何變更。

瀏覽其他網站

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

目前在所有瀏覽器中，如果已安裝 PWA，當您瀏覽的網址超出資訊清單範圍時，PWA 的瀏覽器引擎會在視窗內容中顯示應用程式內瀏覽器。

應用程式內瀏覽器的部分功能包括：

• 會顯示在內容上方。
• 這些視窗會顯示靜態網址列，顯示目前來源、視窗標題和選單。通常，這些主題會採用資訊清單的 theme_color。
• 您可以透過內容選單在瀏覽器中開啟該網址。
• 使用者可以關閉瀏覽器或返回上一頁。

注意： 當應用程式內瀏覽器顯示在畫面上時，PWA 會在背景等待，就像其他視窗遮住了 PWA 一樣。

在 iOS 和 iPadOS 上，應用程式內瀏覽器會使用 SafariViewController，這是與 PWA 儲存空間隔離的 Safari 轉譯引擎。因此，如果使用者在 Safari 中擁有工作階段，該工作階段不會顯示在 PWA 中，但會顯示在 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");
}

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

警告： open() 的第二個引數是視窗名稱。如果您使用的名稱已開啟，引擎會將開啟的視窗與該名稱取代為新的導覽。如果您一律想開啟新視窗，則必須使用不同的字串值做為名稱。

open()、moveTo() 和 resizeTo() 函式在編寫 JavaScript 時不需要 window. 前置字串，因為 window 是全域物件。您可以直接呼叫 moveTo(0, 0)。不過，呼叫 window.moveTo(0, 0) 可讓程式碼更容易理解。

視窗標題

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

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

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

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

注意： 為減少在 PWA 中發生的網路釣魚，部分電腦版瀏覽器可能會在視窗標題上採取額外措施。舉例來說，如果您未在標題中使用應用程式名稱，瀏覽器可能會在標題中加上 PWA 名稱的前置字串。當您變更標題以強調使用者瀏覽的網頁時，其他瀏覽器可能會在標題列中顯示目前的來源網頁幾秒鐘。

分頁模式

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

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

注意： 在「實驗功能」一章中，您將瞭解如何開始使用實驗功能。

視窗控制項重疊顯示

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

注意： 分頁模式和視窗控制項重疊功能會為資訊清單的 display 成員定義新的值。為了讓所有裝置都能相容，資訊清單群組已建立一種方法來取代備用 display 鏈結，因此如果第一個選項無法使用，您可以指定要使用的 display 值。如要進一步瞭解這項功能，請參閱「為未來的顯示模式做好準備」。

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

視窗管理

使用者會想在多個螢幕上使用所有可用空間。例如：

• 多視窗圖形編輯器 (例如 Gimp) 可將各種編輯工具放置在精確定位的視窗中。
• 虛擬交易平台可在多個視窗中顯示市場趨勢，且每個視窗都能以全螢幕模式顯示。
• 幻燈片應用程式可在內部主螢幕上顯示演講者備忘稿，並在外部投影機上顯示簡報。

Window Management API 可讓 PWA 執行上述操作，甚至更多。

取得畫面詳細資料

Window Management API 新增了 window.getScreenDetails() 方法，可傳回物件，其中的畫面為附加畫面的不變陣列。您也可以透過 ScreenDetails.currentScreen 存取即時物件，該物件對應至目前的 window.screen。

在某些瀏覽器中，呼叫 window.getScreenDetails() 需要使用者授予權限給 PWA。

當 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 事件。

注意： 您也可以查看Presentation API，透過投影機和連上網路的電視等大型簡報裝置顯示網頁內容。

Browser Support

• 47
• 79
• x
• x

Source

螢幕 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 進行完整控管」一文。

資源

• 使用 Window Management API 管理多個螢幕
• MDN：Window Management API
• 適用於 PWA 的分頁應用程式模式
• 使用 Screen Wake Lock API 保持喚醒狀態
• 使用 VirtualKeyboard API 取得完整控制權
• 自訂 PWA 標題列的視窗控制項重疊顯示效果
• 在標題列中顯示內容