建立獨立應用

使用獨立顯示模式

要使用獨立顯示模式併為您的 PWA 提供專用視窗，請將 display 成員新增到您的 Web 應用清單 中，並將其值設定為 standalone。

{
  "name": "My app",
  "start_url": "/",
  "icons": [
    {
      "src": "icon.webp",
      "sizes": "48x48",
      "type": "image/webp"
    }
  ],
  "display": "standalone"
}

請注意，還有其他可用的顯示模式，例如 browser、minimal-ui 和 fullscreen。您選擇的顯示模式會改變顯示給使用者的瀏覽器使用者介面的多少，從顯示全部介面到擁有您自己的專用視窗。要了解所有可用的顯示模式以及它們在不受支援時如何回退，請參閱關於 display 成員的文件。

最佳實踐

處理多頁面導航

如果您的應用程式是使用多個可導航的 HTML 頁面構建的，請確保在應用程式中包含用於控制導航的使用者介面元素。

如果您沒有自己的導航元素，請使用 minimal-ui 顯示模式，以確保使用者仍然可以透過瀏覽器在應用程式標題欄中渲染的前進和後退按鈕在頁面之間切換。

根據顯示模式自定義您的應用

當您在 Web 應用清單中定義了 browser 以外的顯示模式時，該模式僅在應用程式已安裝時適用。與任何其他網頁一樣，清單的 display 成員在 PWA 未安裝時不起作用。您可以在執行時檢查顯示模式，以檢測應用程式是否已安裝。

使用 CSS display-mode 媒體功能或 Window.matchMedia() JavaScript 功能，您可以根據應用程式的顯示模式有選擇地應用 CSS 樣式或執行 JavaScript 程式碼。

以下示例展示瞭如何使用 @media CSS at-rule 僅在啟用了 standalone 顯示模式時顯示網頁上的元素。

.app-button {
  display: none;
}

@media (display-mode: standalone) {
  .app-button {
    display: block;
  }
}

在此示例中，.app-button 元素預設情況下將是隱藏的，除非顯示模式設定為 standalone，而這會在 display 清單成員設定為 standalone 且應用程式已安裝在使用者裝置上時發生。

以下是另一個示例，展示瞭如何使用 window.matchMedia() 方法來檢測 standalone 顯示模式是否已啟用。

function isStandaloneApp() {
  return window.matchMedia("(display-mode: standalone)").matches;
}

另見

• Web 應用清單.
• 顯示模式.
• 使用 Window Controls Overlay API 自定義桌面作業系統上應用的標題欄。