本章著重於在瀏覽器分頁外轉譯內容的一些重要層面。
窗戶
不同的作業系統對於應用程式視窗的內容各有不同概念。 例如,在 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-*
環境變數,將內容安全地延伸至這些區域。