視窗管理

瀏覽器外部的 PWA 會管理自己的視窗。本章將說明 瞭解 Google Cloud 控制台中 以及作業系統

PWA 視窗

在 PWA 管理的專屬視窗上執行，具備該作業系統中任何視窗的所有優點與責任，例如：

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

移動及調整視窗大小

PWA 視窗的大小不拘，也可以放在電腦作業系統螢幕上的任何位置。根據預設，使用者在安裝 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> 元素主要用於搜尋引擎最佳化 (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].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

想像一下：你在廚房裡烹調食譜，你已備好食材了。您的雙手一團亂，而您可回頭讀取裝置，閱讀下一個步驟。太慘了！螢幕變黑了！螢幕 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 取得完整控制權一文。

資源