iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 21
1
Modern Web

30 天 Progressive Web App 學習筆記系列 第 21

Day 21 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - Web App Manifest File

Manifest File 是什麼?

Yes

列出一些 PWA 網站的 manifest.json 檔案給大家參考。

下方為 Chrome Dev Summit 2016 的 manifest.json 內容

{
  "name": "Chrome Dev Summit 2016",
  "short_name": "CDS 2016",
  "icons": [{
    "src": "/devsummit/static/images/icons/cds-icon@192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/devsummit/static/images/icons/cds-icon@512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "start_url": "/devsummit/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#FAFAFA",
  "theme_color": "#6387F5"
}

Manifest File 是一個 json 檔案,列舉可以實現的功能如下:

  • Add to Home Screen
  • 顯示 Splash Screen
  • 設定網站顯示模式
  • 變更螢幕顯示方向
  • 修改網站佈景顏色
  • 調整網站起始連結

詳細介紹如下:

Add to Home Screen

  • 如果使用者五分鐘內連到你的網站兩次,設定 Manifest File 之後就會提示你是否要將網站加到 Home Screen。
{
  "name": "Chrome Dev Summit 2016",
  "short_name": "CDS 2016",
  "icons": [{
    "src": "/devsummit/static/images/icons/cds-icon@192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/devsummit/static/images/icons/cds-icon@512.png",
    "sizes": "512x512",
    "type": "image/png"
  }]
}
 
  • name 或 short_name

    • 如果 name 無法完整顯示,則會改為顯示 short_name。
    • 預計會顯示在:
      • Add to Home Screen 的安裝提示文字
      • 網站載入時出現 Splash Screen 的文字
      • App launcher 行動裝置桌面上的 icon 文字
  • icons

    • Array 裡 存放多個 Object,用來指定網站應用到的圖示,瀏覽器會搜尋符合顯示器的密度等對應的資源
    • 預計會顯示在:
      • Add to Home Screen 的安裝提示 icon
      • 網站載入時出現 Splash Screen 的 icon
      • App launcher 行動裝置桌面上的 icon
    • src
      • icon 路徑來源
    • sizes
      • icon 尺寸大小,可以多組
    • type
      • icon 類型,可以快速忽略不支援的圖像

操作流程類似下方動畫這樣,成功將網站加入 Home Screen 後,就會像 APP 一樣,將看到手機桌面上有一個 icon,能讓使用者快速啟動網站。

延伸閱讀:


顯示 Splash Screen

  • 類似 App 的體驗,開啟時、會有一個畫面,中間放 LOGO,閃一下的過場動畫效果
  • Manifest File 可以設定中間 LOGO 的圖檔來源以及 Splash Screen 的背景顏色等

例如下方為 flipkart 的 Splash Screen

圖片來源:flipkart blog

{
    "name": "Flipkart Lite",
    "short_name": "Flipkart Lite"
    "icons": [{
        "src": "https://img1a.flixcart.com/www/linchpin/batman-returns/logo_lite-cbb3574d.png",
        "sizes": "192x192",
        "type": "image/png"
    }],
    "background_color": "#2874f0"
}
  • name/short_name
    • 在前面的文章已經有介紹 name/short_name,這邊是指定 Splash Screen 的文字
  • icons
    • 在前面的文章已經有介紹 icons,這邊是指定 Splash Screen 的圖示
  • background_color
    • 設定 Splash Screen 的背景顏色

延伸閱讀:Web App Manifest - background_color


設定網站顯示模式

  • 設定開啟網站時的顯示模式,例如:要顯示全螢幕畫面還是有 URL bar 的畫面
  • 設定網站顯示類型
    • browser (預設),有 URL 列表,像一般的網站的體驗
    • standalone,隱藏瀏覽器的 UI
    • fullscreen 全螢幕,沒有 URL 列表,像 APP 的體驗
  • 瀏覽器必須支援,否則會 Fallback Display Mode
"display": "standalone"

延伸閱讀:Web App Manifest - display


變更螢幕顯示方向

  • orientation
    • 可以強制指定網站顯示方向
    • 請謹慎使用此指令,通常使用者希望自己選擇方向
    • 通常應用在 GAME 裡,可能會需要強制設定方向
"orientation": "portrait"

延伸閱讀:Web App Manifest - orientation


修改網站佈景顏色

  • theme_color
    • 設定網站每個頁面的主題顏色,例如改變 URL 的顏色
"theme_color": "#2196F3"

延伸閱讀:Web App Manifest - theme_color


調整網站起始連結

  • start_url
    • 使用者點擊行動裝置桌面上的 icon 時,所開啟網站的連結
    • 如果不提供 start_url,將使用當前頁面的URL
    • 通常使用 "start_url": "/""start_url": "."
    • 可以針對 Google Analytics 加入 ?utm_source=homescreen
"start_url": "/?utm_source=homescreen"

延伸閱讀:Web App Manifest - start_url


實作 To-Do List 的 manifest

接著新增 To-Do List 的 Web App Manifest File,實作主要執行 3 個步驟如下:

1.新增 manifest 檔案(一個簡單的 json 檔案)

{
    "name": "PWA To-Do List with Vanilla JS",
    "short_name": "To-Do List",
    "start_url": "/",
    "icons": [{
        "src": "/assets/images/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    }, {
        "src": "/assets/images/icon-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
    }, {
        "src": "/assets/images/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    }, {
        "src": "/assets/images/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }],
    "background_color": "#707477",
    "theme_color": "#f2f2f2",
    "display": "standalone",
    "orientation": "portrait"
}


2.新增 icons 的圖檔
例如: /assets/images/icon-256x256.png


3.載入 manifest 檔案

在 `index.html` 的 `<head>` 加上 `manifest.json` 檔案

```
<link rel="manifest" href="/manifest.json">  
```

Generator your manifest

因為 manifest 的檔案其實蠻簡單的,也可以透過線上的工具自動產生,像是在 Web App Manifest Generator 的網站裡,輸入網站資訊,接著上傳圖檔,按一個按鈕就可以自動生成 manifest.json


Test your manifest

最後,你可以直接在本機透過 Application panel of Chrome DevTools,去驗證你的 web app manifest 是否設定正確。

或者 deploy 網站之後,拿起 Android 手機,進行實測如下

  • 也可以驗證其他網站的 manifest,作為參考:


參考文件


本日小結

本篇文章介紹 Manifest File 是一個單純的 json 檔案,透過 Manifest File 的設定,讓使用者瀏覽變得更像 APP 體驗,包括 Add to Home Screen、顯示 Splash Screen 等效果,也實作 To-Do List 的 manifest,瞭解如何自動生成 manifest 檔案,最後說明可以透過 Chrome DevTools 快速檢查 manifest 檔案是否正確。


本人小小筆記,如有錯誤或需要改進的部分,歡迎給予回饋。
我將會用最快的速度修正,m(_ _)m。謝謝

上一篇
Day 20 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - (新增/修改/刪除待辦事項清單)
下一篇
Day 22 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache 簡介
系列文
30 天 Progressive Web App 學習筆記30

尚未有邦友留言

立即登入留言