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 範本格式：

{
  "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