本章節會著重在瀏覽器分頁外算繪內容的一些重要面向。
窗戶
不同的作業系統對於應用程式視窗的定義不同。舉例來說，在 iPhone 上，應用程式一律會佔據 100% 的螢幕畫面。在 Android 和 iPad 上，應用程式通常會以全螢幕執行，但兩個應用程式可以分享螢幕畫面，但一次只能開啟一個應用程式執行個體。相較之下，在電腦裝置上，應用程式一次可以開啟多個執行個體。它會與所有其他開啟的應用程式共用可用的螢幕空間。每個應用程式執行個體都可以調整大小、放置在螢幕上的任何位置，甚至可以重疊其他應用程式。
圖示
系統會透過應用程式圖示辨識應用程式，當你搜尋應用程式時、在設定中、啟動應用程式的位置，以及執行應用程式的位置時，畫面上都會顯示這個圖示。
包括：
- 主畫面 (iOS、iPadOS、Android)。
- 應用程式啟動器 (macOS、Android)。
- 開始選單或應用程式選單 (Windows、ChromeOS、Linux)。
- 座架、工作列或多工面板 (所有作業系統)。
為漸進式網頁應用程式建立圖示時，請確保其圖示適用於各種平台，因為每個作業系統都可以轉譯圖示，並為圖示套用不同的形狀遮罩，如下圖所示。
設定應用程式主題
在 PWA 中自訂應用程式樣式的方法有很多種，包括：
- 主題顏色：定義桌面上視窗標題列的顏色，以及行動裝置上的狀態列顏色。使用中繼標記時，您可以使用不同配置選項，例如深色或淺色模式，而且會依據使用者的偏好設定加以使用。
- 背景顏色：定義載入應用程式及其 CSS 之前的視窗顏色。
- 強調色：定義內建瀏覽器元件 (例如表單控制項) 的顏色。
顯示模式
您可以為 Progressive Web App 定義所需的視窗體驗。有三種選項可供選擇：
- 全螢幕
- 獨立式
- 極簡使用者介面
全螢幕體驗
全螢幕體驗適合沉浸式體驗，例如遊戲、VR 或 AR 體驗。目前僅支援 Android 裝置，且會隱藏狀態列和導覽列，讓 PWA 有 100% 的畫面空間，讓內容能完整呈現內容。
電腦和 iPadOS 不支援全螢幕 PWA，但您可以從 PWA 中的全螢幕 API，在使用者要求以全螢幕顯示應用程式。
獨立體驗
漸進式網頁應用程式最常見選項，獨立模式會在 OS 標準視窗中顯示 PWA，而且沒有任何瀏覽器導覽 UI。視窗也可能包含瀏覽器控制選單，方便使用者：
- 複製目前的網址。
- 查看、套用或停用瀏覽器擴充功能。
- 查看及變更權限。
- 檢查目前的來源和 SSL 憑證。
當 PWA 在分頁顯示 PWA 時，標題列可能也會顯示權限和硬體使用情形，取代網址列或網址列。
在行動裝置上，獨立 PWA 體驗會建立標準螢幕，讓狀態列保持顯示，讓使用者仍可查看通知、時間和電池電量。通常沒有任何瀏覽器控制的選單，比如獨立體驗。
部分 Android 瀏覽器會在 PWA 位於前景時建立固定且無聲通知，讓使用者複製目前的網址或其他選項。
極簡型使用者介面
這個模式適用於 Android 與電腦作業系統的漸進式網頁應用程式。使用者操作 PWA 時，瀏覽器算繪 PWA 時，會顯示最小的使用者介面，以便使用者在應用程式中瀏覽。
在 Android 中，您會看到一個標題列，可顯示目前的 <title> 元素，以及提供一個小下拉式選單的來源。在電腦上，標題列會顯示一組方便瀏覽的按鈕，包括返回按鈕，以及會根據目前載入狀態切換停止和重新載入動作的控制項。
將電腦版設計最佳化
設計電腦版的漸進式網頁應用程式時，您必須考量視窗大小的無限可能，並與瀏覽器分頁或行動作業系統中的應用程式相比。
在第 3 章中，我們提到了迷你模式：電腦版應用程式最小可設為 200 x 100 像素。這個視窗會使用 HTML 中的 <title> 元素內容做為視窗標題。當您在應用程式之間和其他位置Alt Tab 鍵時，系統也會顯示這些內容。
請留意 HTML 的 <title> 元素，並重新思考使用方式。<title> 不只適用於搜尋引擎最佳化，也可以只呈現瀏覽器分頁中的第一個字元，而且會納入獨立桌面視窗的使用者體驗。
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-* 環境變數，將內容安全地延伸至這些區域。