本章節會著重在瀏覽器分頁外算繪內容的一些重要面向。
窗戶
不同的作業系統對於應用程式視窗的定義不同。舉例來說,在 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-*
環境變數,將內容安全地延伸至這些區域。