Day4 -Web邁向Native App的第一步-Manifest File

2018 iT 邦幫忙鐵人賽

DAY 4

Modern Web

30天走訪Progressive Web Apps(PWAs)系列第 4 篇

2018鐵人賽

DK.Harry

團隊神功護體

2017-12-21 00:21:14

9083 瀏覽

分享至

什麼是Manifest File?

官方解釋

The web app manifest is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in areas where they would expect to see apps (for example, a mobile device's home screen), direct what the user can launch, and define its appearance at launch.
文字來源: https://developers.google.com/web/fundamentals/web-app-manifest/

Manifest File是一個JSON格式的檔案，內容可以決定使用者預期看到App的模樣。
換句話說，今天我們能實作原生App的兩個特性，「裝置上產生icon連結」和「啟動的過場動畫」，那麼我們要做的就是設定這兩個功能需要顯示的文字和圖片等等內容。

好處是什麼?

在沒有使用Manifest之前，使用者都是打開瀏覽器，接著打關鍵字、輸入網址或是從書籤中找連結，前往要瀏覽的網頁，但這些步驟必須是使用者主動式的搜尋，才能到達網站，但是網頁如果能以App的形式存在手機頁面上，就能提升網站的曝光度，因為打開手機就會看到，而不是要透過主動尋找才能打開。

支援度

資料來源： https://caniuse.com/#search=Web%20App%20Manifest

目前支援的只有Chrome、Chrome for Android和Samsung Internet，Edge、Firefox和IE都在開發中，而Safari不支援，因此在開發上，先以Chrome來開發比較好Debug，看到IOS不支援上，想必就會有一堆人打消使用的念頭，雖然iOS還是有替代方案，在後面會解釋。

參數說明

name: app名稱
short_name: app短名
如果沒有抓到short_name就會顯示name的名稱，如上圖。
icons:左邊的小圖及使用者加到桌面後顯示的圖片，圖片內可以是一個陣列，加入不同尺寸的icon圖片，依照裝置的大小顯示在裝置上。

{
    "name": "MyGram PWA",
    "short_name": "MyGramDemo",
    "icons": [
        {
            "src": "src/images/icons/demo-icon48.png",
            "type": "image/png",
            "sizes": "48x48"
        }
    ]   
}

start_url: 定義點選icon後會導向的URL位置，如果設定的是相對位址，則會依照manifest.json檔案所在的位置設定。
scope: 定義使用者可以瀏覽的頁面範圍。
diplay: 有四種參數可以選

fullscreen: 隱藏瀏覽器的URL列
standalone: 隱藏瀏覽器的UI
minimal-ui: 顯示最少限度的UI列資訊，使用起來跟standalone差不多。
browser:預設值，依照瀏覽器原本的設定。
如果瀏覽器沒有支援，會自動fallback會比照下一個有沒有支援，舉例來說，設定standalone發現沒有支援，接下來會fallbackminimal-ui。

orientation: 手機瀏覽網站的方向。
dir: 文字顯示方向。
description: 關於網站內容的敘述。
lang: 網站的語言。

其他語言的Tag，可以從這個網站搜尋
https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry

{
    "start_url": "index.html",
    "scope": ".",
    "display": "standalone",
    "orientation": "portrait-primary",
    "description": "簡單的生活紀實Web App 實作PWA",
    "dir": "ltr", //左至右
    "lang": "zh-Hant-TW" //繁體中文
}

接下來為了驗證顏色的變化先將顏色設定成容易辨別的顏色。

{
    "background_color": "#68e86e", //淺綠色
    "theme_color": "#f26d6d", //粉紅色
}

如上圖，淺綠色用在過場的背景色，而粉紅色則是改變資訊列的顏色。

background_color: 設定過場時的背景顏色。
theme_color: 設定上面資訊列的顏色，通常會設定網站的主題色系，達到畫面整體有一致性。

如果專案有網站和App也可以設定related_applications提示使用者要不要下載APP。
platform:play，代表Google Play平台

"related_applications": [{
    "platform": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]

實作

1. 在public資料夾底下新增「manifest.json」檔案

2. 在index.html中，head標籤內加入manifest.json連結

<head>
    //..其他設定
    <link rel="manifest" href="manifest.json">
</head>

3. 設定manifest.json檔案內容

{
    "name": "MyGram PWA",
    "short_name": "MyGramDemo",
    "icons": [
        {
            "src": "src/images/icons/demo-icon48.png",
            "type": "image/png",
            "sizes": "48x48"
        },
        {
            "src": "src/images/icons/demo-icon72.png",
            "type": "image/png",
            "sizes": "72x72"
        },
        {
            "src": "src/images/icons/demo-icon96.png",
            "type": "image/png",
            "sizes": "96x96"
        },
        {
            "src": "src/images/icons/demo-icon144.png",
            "type": "image/png",
            "sizes": "144x144"
        },
        {
            "src": "src/images/icons/demo-icon168.png",
            "type": "image/png",
            "sizes": "168x168"
        },
        {
            "src": "src/images/icons/demo-icon192.png",
            "type": "image/png",
            "sizes": "192x192"
        }
    ],
    "start_url": "index.html",
    "scope": ".",
    "display": "minimal-ui",
    "orientation": "portrait-primary",
    "background_color": "#68e86e", //淺綠色
    "theme_color": "#f26d6d", //粉紅色
    "description": "簡單的生活紀實Web App 實作PWA",
    "dir": "ltr",
    "lang": "zh-Hant-TW"
}

4. 在command line輸入「npm start」在chrome瀏覽器中，檢視結果

在瀏覽器中開啟開法者工具點選「Application」，左邊第一個Manifest，右邊就會顯示所有在json檔裡面設定的參數是否有成功被讀取。
也可以丟至Web Manifest Validator網站驗證內容有沒有錯誤。

常見錯誤：json檔裡不能寫註解!

模擬機操作示意圖

點選「Add to Home screen」後，點選「Add」。

網站的icon就會新增到了桌面。

總結

今天我們新增了manifest.json檔案，透過一個json檔案就能實現類似app的操作體驗，包含在桌面產生一個網站的icon及點擊後的過場畫面，但是我們還沒提到iOS的替代方案及進入網站及出現安裝提示的功能，留著明天說明囉!

其他資源

MDN: https://developer.mozilla.org/en-US/docs/Web/Manifest
Web Fundamentals: https://developers.google.com/web/fundamentals/web-app-manifest/
Web Manifest Validator: https://manifest-validator.appspot.com