本章著重於在瀏覽器分頁外轉譯內容的一些重要層面。
窗戶
不同的作業系統對於應用程式視窗的內容各有不同概念。 例如，在 iPhone 上，應用程式始終會佔據 100% 的螢幕。在 Android 和 iPad 應用程式上，螢幕通常會執行全螢幕，但兩個應用程式也可以分享螢幕畫面，但一次只能開啟一個應用程式執行個體。 相比之下，在電腦裝置上，應用程式一次可以開啟多個執行個體。 可與其他開啟的應用程式共用可用的螢幕空間。 每個應用程式執行個體都可以調整大小和放置在螢幕上的任何位置，甚至可與其他應用程式重疊。
圖示
應用程式會以圖示識別，當你在「設定」中搜尋應用程式、啟動應用程式時，以及查看執行中應用程式的位置，就會看到這個圖示。
包括：
- 主畫面 (iOS、iPadOS、Android)。
- 應用程式啟動器 (macOS、Android)。
- 開始功能表或應用程式選單 (Windows、ChromeOS、Linux)。
- 固定、TaskBar 或多工作面板 (所有作業系統)。
建立漸進式網頁應用程式的圖示時 請確保圖示適用於各種平台，因為每個作業系統都能轉譯圖示並套用不同的形狀遮罩，如下圖所示。
設定應用程式主題
在 PWA 中自訂應用程式樣式的方式有很多種，包括：
- 主題色彩：定義桌面上視窗標題列的顏色，以及行動裝置上狀態列的顏色。使用中繼標記時，您可以提供多種不同配置的選項，例如深色或淺色模式，系統會根據使用者的偏好設定採用這些選項。
- 背景顏色：定義應用程式及其 CSS 之前的視窗顏色。
- 強調色：定義瀏覽器內建元件 (例如表單控制項) 的顏色。
顯示模式
您可以為漸進式網頁應用程式指定所需的視窗體驗類型。有三個選項可供選擇：
- 全螢幕
- 獨立式
- 最小化使用者介面
全螢幕體驗
全螢幕體驗適用於沉浸式體驗，例如遊戲、VR 或 AR 體驗。這項功能目前僅適用於 Android 裝置，而且會隱藏狀態列和導覽列，讓 PWA 佔滿 100% 的畫面顯示內容。
但電腦版和 iPadOS 不支援全螢幕 PWA。不過，您可以在 PWA 中使用 Fullscreen API，根據使用者要求以全螢幕顯示應用程式。
獨立體驗
漸進式網頁應用程式最常見的選項，獨立模式會在沒有瀏覽器導覽使用者介面的情況下，以 OS 標準視窗顯示 PWA。視窗也可能包含瀏覽器控制的選單，方便使用者執行以下操作：
- 複製目前的網址。
- 查看、套用或停用瀏覽器擴充功能。
- 查看及變更權限。
- 檢查目前的來源和 SSL 憑證。
當 PWA 在分頁中顯示時，標題列也可能會顯示權限和硬體使用情況，取代網址列或網址列。
在行動裝置上，獨立的 PWA 服務會建立標準畫面，確保狀態列持續顯示，讓使用者仍可查看通知、時間和電池電量。這類選單通常沒有瀏覽器控制的選單，例如電腦版獨立體驗。
當 PWA 在前景運作時，Android 上的部分瀏覽器會建立固定的無訊息通知，讓使用者複製目前的網址或其他選項。
極簡風使用者介面
這個模式適用於 Android 和電腦作業系統的漸進式網頁應用程式。 當您使用 Chrome 時，瀏覽器轉譯 PWA 時會顯示最小的使用者介面，協助使用者在應用程式中瀏覽。
在 Android 中，您將取得標題列，用於顯示目前的 <title> 元素和來源，並使用小型的下拉式選單。在電腦中，標題列會顯示一組有助於導覽的按鈕，其中包括返回按鈕，以及根據目前載入狀態，在停靠站與重新載入動作之間切換的控制項。
針對電腦設計最佳化設計
設計可在電腦上執行的漸進式網頁應用程式時， 您必須思考視窗大小是否有無限可能，並與瀏覽器分頁或行動裝置作業系統的應用程式比較。
在第 3 章中，我們提到了迷你模式：電腦版應用程式最小可為 200 x 100 像素。這個視窗會使用 HTML 中的 <title> 元素內容做為視窗標題。當你在應用程式間和其他位置按住 Tab 鍵時，系統也會顯示這些內容。
請留意 HTML 的 <title> 元素，重新思考如何運用。<title> 不僅僅用於 SEO，還會顯示在瀏覽器分頁中的第一個字元。則會顯示在獨立桌面視窗的使用者體驗中。
CSS 最佳做法
凡是透過 CSS 版面配置、設計和動畫呈現的內容，都能享有良好的體驗。不過，您可以參考以下的秘訣和技巧，為獨立視窗提供更優質的體驗。
媒體查詢
在 PWA 中，您可以運用的第一個媒體查詢是接受 browser、standalone、minimal-ui 或 fullscreen 值的 display-mode 屬性。
這項媒體查詢會為每種模式套用不同的樣式。 舉例來說，您可以只在瀏覽器模式下顯示安裝邀請，或是只在使用者透過系統圖示使用應用程式時，才顯示安裝邀請。這可能包括在獨立模式下啟動應用程式時新增的返回按鈕。
/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}
應用程式體驗
使用者採用已安裝 PWA 時，會期望應用程式的運作方式。定義其意義並不容易，但預設的網路行為不一定能提供最佳的使用體驗。
使用者選取
一般來說，使用者可透過滑鼠、指標或按住觸控手勢選取內容。此模式對於內容有所幫助，但無法在 PWA 中的導覽項目、選單和按鈕提供最佳體驗。
因此，建議您使用 user-select: none 及其 -webkit- 前置字元版本，停用使用者選取這些元素的功能：
.unselectable {
user-select: none;
}
強調色
在 PWA 中，您可以使用屬性 accent-color，在 HTML 表單控制項中定義符合品牌風格的顏色。
系統字型
如果您希望對話方塊或訊息等元素符合使用者的預設平台字型，可以使用下列字型系列：
selector {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
"Helvetica Neue", sans-serif;
}
下拉即可重整畫面
新式行動瀏覽器 (例如 Google Chrome 和 Safari) 提供自動重新整理網頁的功能。在部分瀏覽器 (例如 Android 裝置上的 Chrome) 中，獨立的 PWA 也會啟用這種行為。
建議你停用這個動作。例如提供自己的手勢管理或重新整理動作，或是使用者有可能意外觸發動作。
您可以使用 overscroll-behavior-y: contain 停用這個行為：
body {
overscroll-behavior-y: contain;
}
安全區域
有些裝置沒有可以遮蔽的矩形螢幕；可能會是不同的螢幕形狀 (例如圓形)，或是螢幕的部分內容無法使用，例如 iPhone 13 的凹槽。在這些情況下，部分瀏覽器會公開環境變數，其中包含可顯示內容的安全區域。
如要讓整個螢幕 (包括隱藏區域) 以完整方式呈現色彩或圖片，請在 <meta name="viewport"> 標記內容中加入 viewport-fit=cover。然後使用 safe-area-inset-* 環境變數，將內容安全地延伸至這些區域。