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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
"short_name": "Maps",
"name": "Google Maps",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/maps/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/maps/",
"theme_color": "#3367D6"
}

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,啟動頁就會自動生成,完全不用自己搞唷~

啟動頁

參考文獻

The Web App Manifest

PWA 偽裝術:manifest.json

Web App Manifest

0%