Day3-PWA 初體驗 - PWA 架構(一)
前言
接下來這一篇將會來了解 PWA 的架構,但是這邊將會拆成兩個章節介紹。
Web App Manifest
PWA 最主要將會仰賴兩個檔案也就是 manifest.json 以及 Service Worker,但是這邊將會集中介紹 Web App Manifest :D
首先 manifest.json 是一個 JSON 格式的檔案,而這個 JSON 格式裏面包含了 PWA 所需要的應用程式名稱、icon 以及應用程式 URL 等等。
以下為 Google 官方 所提供的 manifest.json 範本格式:
1 | { |
JSON 欄位說明
功能 | 說明 | 是否為必備 | 備註 |
---|---|---|---|
short_name | 應用程式的簡稱 | Y | |
name | 應用程式名稱 | Y | 若有應用程式簡稱將不會套用該選項 |
icons | 應用程式圖片 | Y | 此為陣列物件,通常 icons 會建議多出幾個尺寸,但是我這邊僅使用官方範例來出 icons,通常建議都用 png 圖檔 |
start_url | 應用程式首頁連結 | Y | 通常是 ./index.html |
background_color | 應用程式背景顏色 | Y | |
display | 應用程式顯示模式 共有 fullscreen、standalone、minimal-ui、browser | N | 預設是 standalone,但是通常不會調整該選項,除非有特殊需求。 |
scope | 應用程式應用範圍 | N | 這是一個比較少調整的設置。 |
theme_color | 應用程式主題顏色 | Y | 主題顏色大多套用於手機上方的標題欄以及視窗等。 |
description | 應用程式描述 | N | 簡單來講就是對於這個 PWA 的簡易描述描述。 |
dir | 應用程式排列方向 共有 ltr(左至右)、rtl(右至左)、auto | N | 其實這個也是很少人會設置的選項,但是這邊一樣做個紀錄。 |
lang | 應用程式語系 | N | 通常若沒有填入應用程式語系,PWA 是會抓取預設語系。 |
orientation | 螢幕顯示方向 any、natural、landscape、portrait、portrait-primary、portrait-secondary、landscape-primary、landscape-secondary | N | 這也是一個不太會設置的選項。 |
裡面比較大疑問的大概是 theme_color 剛好官方有提供範例圖片可以看,所謂的主題顏色就是圖片中藍色顏色
最後 PWA 裡面有一個地方滿值得一提的,也就是關於 APP 的啟動頁,這格啟動頁是由 manifest.json 中三個選項所結合而成
- name
- background_color
- icons
所以只要設計好一個漂亮 iCons,啟動頁就會自動生成,完全不用自己搞唷~