PWA 學習筆記 – 4:manifest.json

/

Manifest.json 參考資源

manifest.json 是在學 PWA 這塊時最簡單的部份,主要是建一支 JSON 檔就可以,相關的參數 MDN上 或是 Google 一下就會看到,不用花太多的時間去記。

本篇參考了三篇,以這三篇的文章來做個整理,包含了大部份建 manifest.json 會用到的成員(MDN 上講成員,就跟著用)。

MDN:Web App Manifest

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

The Web App Manifest


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 有一隻影片介紹:

Web App Manifest: Totally Tooling Tips

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 應用程式的平台,可填 playitunes
  • 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主 動提示加入主畫面的話,這項必須填寫。

"start_url": "./?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 主動詢問是否加入主畫面的條件如下:

  1. 使用者還沒加入主畫面
  2. 在有 manifes.json 的網域下,互動了至少 30 秒
  3. manifset.json 裡有幾項成員一定要有:name || short_name、icons、start_url、display
  4. 頁面要是 https
  5. 頁面有裝 service-worker(sw.js),裡面有監聽並處理 beforeinstallprompt 事件

第 5 點,是否要有寫 beforeinstallprompt,好像不是必填項目,即便沒填,在測試時也會在底部出現一條詢問框。

在參考了這篇以後:PWA 實戰經驗分享

發現別人是用在 UX 上更優化的地方,就是自己選擇要出現詢問框時用的。


PWA 學習筆記系列

Summary
PWA 學習筆記 - 4:manifest.json
Article Name
PWA 學習筆記 - 4:manifest.json
Description
本篇大綱:Manifest.json參考資源、manifest.json是做什麼用的?manifest.json成員、關於「chrome主動提示加入主畫面」。manifest.json是在學PWA這塊時最簡單的部份,主要是建一支json檔就可以,相關的參數MDN上或是google一下就會看到。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

不會寫程式,也能自己架一個免費網站:Publii + GitHub Pages

Vue

Vue CLI 安裝 Tailwind CSS

Firebase Google

Firebase Dynamic Links 從後台建立縮網址

Firebase Google

Firebase Authentication 第三方登入 – Google、FB

WordPress

WordPress:Site Kit by Google 介紹及使用

Front-End

mailto: 點擊連結 開啟寄送 email

Front-End

用原生 JS 做一個簡單的手風琴 Accordion / Collapse 功能

Bot LINE

用 LINE Push Messaging API 推播每日氣象預報

API

GitHub API:取 Issue、Comments

Vue

用 Storybook 做一個 UI 整理集

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言