視窗管理

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

在由 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 一樣。

在 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」。您可以使用 open() 函式，透過 PWA 程式碼開啟新視窗。

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 標題列的視窗控制項重疊顯示效果」。

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

視窗管理

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

  • 多視窗圖形編輯器 (例如 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，告知瀏覽器您要自行關閉虛擬鍵盤。
  • 使用 geometrychange 事件，瞭解鍵盤何時顯示和消失。
  • 使用 virtualkeyboardpolicy HTML 屬性，將 contenteditable 設為 auto 或 manual，即可針對編輯主機元素設定虛擬鍵盤政策。您可以透過政策決定要由瀏覽器 (auto) 自動處理虛擬鍵盤，還是由指令碼 (manual) 處理。
  • 使用 CSS 環境變數，取得虛擬鍵盤外觀的相關資訊，例如 keyboard-inset-height 和 keyboard-inset-top。

如要進一步瞭解這個 API，請參閱「使用 VirtualKeyboard API 進行完整控制」一文。