2023.01.14 更新：今天在幫網站加上 manifes.json 時，看見提示訊息後才發現，Google 建議加上 id。因為在 start_url 的部份補上 id。
Manifest.json 參考資源
manifest.json 是在學 PWA 這塊時最簡單的部份，主要是建一支 JSON 檔就可以，相關的參數 MDN上 或是 Google 一下就會看到，不用花太多的時間去記。
本篇參考了三篇，以這三篇的文章來做個整理，包含了大部份建 manifest.json 會用到的成員（MDN 上講成員，就跟著用）。
30 天 Progressive Web App 學習筆記 — To-Do List 實作 PWA — Web App Manifest File
manifest.json是做什麼用的？
根據 MDN 上的解釋，manifest.json 是這樣子的：
它提供了應用程式相關的資訊（像是名稱、作者、圖示、描述）。 manifest 的功用是將 Web 應用程式安裝到設備的主畫面，為使用者提供更快速的訪問和更豐富的體驗。
簡單的說明就是，PWA 主要就是讓網頁可以模擬成一個手機的 App 來使用，要當成 App，就要有 App 的樣子，就要能在手機的桌面上有一個 icon 可以按，按下去後有一個幾秒鐘的啟動畫面讓使用者知道開啟的 App 是什麼，manifest 就是在處理這段。
另外，一般我們在手機上開 Chrome 或 Safari 看網頁時，最頂部會有一條網址列，但一般 App 是不會有的，而 manifest.json 也可以設定開啟頁面時不顯示網址列。
PWA 是把頁面模擬成 App 的一個方法，如果公司本身也有製作 App 呢？manifest.json 上也可以設定 App 在 Google Play、App Store 上的連結，並呈現一個推薦通知讓使用者可以進入並下載。
最後補充一點，不論是 PWA 的 Cache 或是推播功能，都要求網站要是 https，manifest.json 這點也不意外，如果網站不是 https，即便引用了 manifest.json，也不會被 Chrome 主動詢問是否要將網站加入到主畫面。
關於 manifest 的功能，Google 有一隻影片介紹：
manifest.json 成員
成員列表整理如下：
- theme_color 應用程式的主要顏色
- background_color 啟動畫面（splash screen）的背景色
- icons 應用程式的圖示
- name 應用程式的名稱
- short_name 應用程式的簡寫
- lang 主要語言
- description 應用程式的描述
- dir 文字書寫方向
- display 應用程式的顯示模式
- orientation 預設顯示的方向是直的或橫的
- prefer_related_applications 是否要推薦一個原生的 App
- related_applications 推薦原生 App 的連結
- start_url 開啟應用程式時的預設網址
- scope 應用程式的使用範圍
theme_color 應用程式的主要顏色
主要可以改變網址列那一條的顏色。
"theme_color": "#000000"
background_color 啟動畫面（splash screen）的背景色
App 啟動時，會有一個 Splash Screen，翻譯成快閃頁、過場頁，本篇稱為啟動畫面。
Splash Screen 需要3個成員：background_color、icons、name。
"background_color": "red"
補充一點，Splash Screen，在 IOS 上是不支援的，但可以直接讀取一張圖檔來當作啟動頁面，在 head 裡加入以下就行：
icons 應用程式的圖示
icons 裡放陣列，放不同尺寸下的主要圖示，如果 Splash Screen 裡要用的圖示，大小必須包含 192px、512px。
icons 裡，陣列裡的每一個物件有 3 個成員：
- sizes 圖片尺寸，可用在多個尺寸上的話用空白鍵區隔。
- src 圖片的路徑，如果是相對路徑，是以 manifest 所在的位置為基準。
- type 圖檔類型，這項排必填，主要是告知裝置類型，讓不支援的裝置可以快速略過。
"icons": [
{
"src": "icon/lowres.webp",
"sizes": "48x48",
"type": "image/webp"
},
{
"src": "icon/lowres",
"sizes": "48x48"
},
{
"src": "icon/hd_hi.ico",
"sizes": "72x72 96x96 128x128 256x256"
},
{
"src": "icon/hd_hi.svg",
"sizes": "72x72"
}
]由於 manifest 在 IOS 上還不支援，因此如果 IOS 上也想要自訂 icon，就要改用 HTML 裡的 meta 來設定，如下：
name 應用程式的名稱
應用程式的完整名稱，會顯示在 Splash Screen上，以及主畫面上的名稱。
"name": "my application"
short_name 應用程式的簡寫
當 name 太長而無法顯示時，會改成顯示簡寫。
"short_name": "my app"
lang 主要語言
針對 name、short_name 這兩個使用的。
語言列表可以在這找：https://www.iana.org
"lang": "zh-Hant-TW"
description 應用程式的描述
描述這個應用程式是做什麼的。
"description": "這是一個好用又免費的應用程式，主要可以拿來拯救宇宙。"
dir 文字書寫方向
值有 3 個：ltr（左至右）、rtl（右至左）、auto（讓瀏覽器自己決定）。
不填的話預設值是 auto。
"dir": "ltr"
display 應用程式的顯示模式
顯示模式指的是從主畫面點開 App 後，要顯示的樣子，有 4 個值可用：
- fullscreen 全螢幕，就像在用原生 App 一樣，會隱藏所有的瀏覽器 UI。
- standalone 會隱藏標準瀏覽器 UI 元素，如 URL 欄等。
- browser 預設值，就像一般用瀏覽器一樣。
- minimal-ui 會有導覽列最小的 UI，這個值 Chrome 不支援。
如果要 Chrome 主動提示加入主畫面的話，設定值必須要是 standalone。
"display": "standalone"
orientation 預設顯示的方向是直的或橫的
可以強制讓使用者必須裝置拿直的（landscape）或拿橫的（portrait）看。這點要設要仔細思考過才行，因為使用都大部份都喜歡自己決定是直看或横看。
如果是遊戲類型的，可以設定用橫的。
"orientation": "landscape"
prefer_related_applications 是否要推薦一個原生的 App
PWA 是模擬頁面為 App，如果網站本身有出 App，這項就可以設成 true，從主畫面點開頁面時就會出現可以下載 App 的提示。
如果這項為 true，則下面的 related_applications 就要填入值。
這項的預設值為 false。
"prefer_related_applications": false
related_applications 推薦原生 App 的連結
值是陣列，裡面放 App 資訊的物件，每項物件有 2 個成員要填，是 Google Play 上的話則有 3 個成員。
- platform 應用程式的平台，可填
play、itunes。 - url 應用程式的網址。
- id Google Play上要填的 ID。
"related_applications": [
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=com.example.app1",
"id": "com.example.app1"
},
{
"platform": "itunes",
"url": "https://itunes.apple.com/app/example-app1/id123456789"
}
]start_url 開啟應用程式時的預設網址
如果有設定的話，開啟應用程式時就會進到設定的網址。沒設定的話就是使用者按加入主畫面時的那個網址。
如果填寫的是相對路徑，是以 manifest 所在的位置為基準。
建議可以在網址上加入 Google Analytics 的 utm 參數，這樣在 GA 上就可以看見多少來源是來自於 PWA，可以檢測成效。
如果要 Chrome主 動提示加入主畫面的話，這項必須填寫。
另外，根據 Google 的說法，在 start_url 之外，應該再另行定義一個 id。
"start_url": "./?utm_source=web_app_manifest", "id": "/?utm_source=web_app_manifest"
scope 應用程式的使用範圍
這項如果有填，那應用程式的作用域就會限在指定的目錄裡，超過指定目錄，就會當成一般的網頁瀏覽。
"scope": "/myapp/"
manifest.json 基本檔案內容
manifest 裡的成員不是每項都一定要填寫的，以下附上 manifest.json 的基本檔內容：
關於「Chrome 主動提示加入主畫面」
PWA 身為 Google 的親身兒子，在 Android 手機是很有吃香的點。
頁面引用了 manifest.json 後，使用者在手機上點選加入主畫面，頁面就可以像 App 一樣顯示在手機的主畫面上。
但，很多使用者其實不知道有這功能，或是知道了也不常會去按。
貼心的 Google 針對這點做了一項措施，就是主動詢問使用者要不要將頁面加入主畫面。
根據 Google 的說明文件：Add to Home Screen，觸發 Chrome 主動詢問是否加入主畫面的條件如下：
- 使用者還沒加入主畫面
- 在有 manifes.json 的網域下，互動了至少 30 秒
- manifset.json 裡有幾項成員一定要有：name || short_name、icons、start_url、display
- 頁面要是 https
- 頁面有裝 service-worker（sw.js），裡面有監聽並處理
beforeinstallprompt事件
第 5 點，是否要有寫 beforeinstallprompt，好像不是必填項目，即便沒填，在測試時也會在底部出現一條詢問框。
在參考了這篇以後：PWA 實戰經驗分享
發現別人是用在 UX 上更優化的地方，就是自己選擇要出現詢問框時用的。
PWA 學習筆記系列
- PWA 學習筆記 – 1：Cache、Workbox 基本使用
- PWA 學習筆記 – 2：Workbox CLI
- PWA 學習筆記 – 3：Workbox 參數
- PWA 學習筆記 – 4：manifest.json
- PWA 學習筆記 – 5：用 Firebase 做 Web Push
