PWA（Progressive Web Apps）主要架構 – Web App Manifests
繼上一篇所提到的 Chrome 宣告關閉 Chrome Apps 將全面由 PWA（Progressive Web Apps）取代，本篇開始我們將以實際案例作為範例，帶大家初步了解 PWA 各種核心技術，包括 Service Workers 和 Web App Manifests 並搭配 Cache Storage API、IndexedDB 和 Push Notifications 等等。
Web App Manifests
Web App Manifests 是什麼？
PWA 最主要仰賴兩支檔案 manifest.json 以及 Service Worker，而我們就從最簡易的部分 manifest.json 著手。Web App Manifests 為一個 JSON 格式的檔案，根據MDN上的解釋，它提供了下載 PWA 的必要資訊，讓網頁呈現近似 Native App，從而為使用者提供更快速的訪問和更豐富的體驗。
簡單來說，PWA 主要是讓網頁可以模擬成 Native App 使用，而 Web App Manifests 的功用，就是能讓使用者在 Home Screen 上直接點擊 icon 快速啟動網站，開啟時的 Splash Screen（啟動畫面）會出現過場動畫效果。
Web App Manifests 的格式與功能概述
關於 Web App Manifests 的功能，可以參考 Google 的影片介紹：https://youtu.be/yQhFmPExcbs
以下為 flipkart 的 manifest.json 格式：
{
"name": "Flipkart Lite",
"short_name": "Flipkart Lite",
"description": "India's most popular shopping destination...",
"icons": [
{
"src": "https://...logo_lite-cbb3574d.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://...38085e342e83.png?q=100",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "https://...61416b853a2.png?q=100",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "https://...a34266d83.png?q=100",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/?start_url=homescreenicon",
"orientation": "portrait",
"display": "standalone",
"theme_color": "#2874f0",
"background_color": "#2874f0"
}
格式所對應的功能：
| 功能 | 說明 | 是否必備 | 備註 |
|---|---|---|---|
| name | 應用程式名稱 | YES | - 會顯示在 Splash Screen 上，以及 Home Screen 上的名稱。 - 如果 name 無法完整顯示，則會改為顯示 short_name。 |
| short_name | 應用程式的簡稱 | YES | |
| description | 應用程式描述 | NO | - 簡單來說就是對於這個 PWA 的簡易描述。 |
| icons | 應用程式圖片 | YES | - 此為陣列物件，通常 icons 會建議多出幾種尺寸。 - 如果是 Splash Screen 裡要用的圖示，大小必須包含192px、512px。 |
| start_url | 應用程式起始連結 | YES | - 使用者點擊行動裝置桌面上的 icon 時，所開啟網站的連結。 - 若沒設定就是使用者按加入主畫面時當下的網址。 - 可以針對 Google Analytics 加入 ?utm_source=homescreen |
| orientation | 螢幕顯示方向 （直式螢幕稱為「Portrait」，橫式螢幕「Landscape」） | NO | - 可以強制指定網站顯示方向。 - 通常應用在遊戲類型，可能會需要強制設定方向。 |
| display | 應用程式顯示模式 | NO | - fullscreen 全螢幕，就像在用原生app一樣，會隱藏所有的瀏覽器 UI。 - standalone 會隱藏標準瀏覽器 UI 元素，如 URL 欄等。 - browser （預設值），就像一般用瀏覽器一樣顯示。 - minimal-ui 會有導覽列最小的 UI，這個值 Chrome 不支援。 |
| background_color | 應用程式背景顏色 | YES | - 設定 Splash Screen 的背景顏色。 |
| theme_color | 應用程式主題顏色 | YES | - 主題顏色大多套用於手機上方的標題欄以及視窗等。 |
| scope | 應用程式應用範圍 | NO | - 這項如果有填，那應用程式的作用域就會限在指定的目錄裡，超過指定目錄，就會當成一般的網頁瀏覽。 |
| dir | 文字書寫方向 | NO | - ltr（左至右） - rtl（右至左） - auto（讓瀏覽器自己決定） |
| lang | 應用程式語系 | NO | - 針對 name、short_name 這兩項使用。 |
manifest.json 完成後，在 index.html 的 <head> tag 裡加上 manifest.json，就可以了！
<link rel="manifest" href="/manifest.json">
設定好 manifest.json，下一篇我們將會介紹 Chrome DevTools 的功能，利用實際範例來查看 Web App Manifests 所帶來的結果！
我要留言