PWA學習筆記-4:manifest.json

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

"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
Publisher Logo

留言

avatar
  訂閱  
通知