Progressive Web Application Day02 — 到底什麼是 Manifest

Progressive Web Application

上一篇文章（ Progressive Web Application Day01 — PWA 的意義）中提到了為什麼要做 PWA ，既然了解了為什麼要做，接下來就進入到該怎麼做，身為工程師當然要捲起袖子動手做一下囉！

在 PWA 中有兩個東西是非常重要的： Manifest 和 Service Worker ，在今天的文章中，會先介紹 Manifest 的部分。 Manifest 決定了 PWA 要怎麼去呈現，讓 Web App 用起來與看起來可以跟 Native App 有 87% 像。

所以今天就先跟大家介紹：到底什麼是 Manifest ？

什麼是 Manifest

Manifest 是 JSON 格式的檔案，提供了 Web App 的相關資訊，同時也包含了一些 Web App 該怎麼呈現的設定。

像是底下這張圖，就是一個標準的 Manifest 檔案，其中可以看到 Web App 的名稱、摘要、 Web App Icon 與一些該如何呈現的設定……等。

Manifest JSON File

對 Manifest 有了基本的認識之後，接著就來看看 Manifest 有哪些屬性可以設定呢？

Manifest 屬性說明

在 Manifest 裡面有非常多的屬性可以設定，以下列出所有的屬性與說明：

• name：完整名稱
• short_name：比較簡短的名稱，用在不能顯示 name的情況
• description：應用程式的簡介
• background_color：背景顏色
• theme_color：主題顏色
• display： 呈現的方式
• orientation：顯示方向
• icons：應用程式名稱
• start_url：應用程式名稱
• lang：語言
• dir：書寫方向
• prefer_related_applications：是否要推薦相關的應用程式，這個應該被用在當 Native App 提供了 Web App 無法替代的功能時
• related_applications：能夠被底層平台安裝或使用的 Native App
• scope：可使用的範圍，如果使用者超出 Manifest 所提供的範圍，將會回到原本的 Web App

這些是在 MDN - Web AppManifest 上有列出的屬性，各屬性可使用的值，可以請參考 MDN - Web App Manifest 的文件。

引入 Manifest

Manifest 設定完成之後， 大概會長得類似像是這樣：

manifest.json

在 index.html 中把 Manifest 引入近來

index.html

接下來，可以透過 Web Server For Chrome 或是類似的工具，開啟一個 Server 來提供靜態檔案。將網站開啟後，開啟 Chrome 的開發者工具，在 Application 的分頁，就可以看到 Manifest 的被成功載入後的效果。

神祕的聲音：開啟 Chrome 的開發者工具可以透過以下快捷鍵

Windows ： ctrl + shift + i

Mac ： cmd + opt + i

Manifest 載入成功

但是，在開發者工具中只能看到 Manifest 有被 Chrome 正確地被引入，也有正確的被解析， Manifest 對於 PWA 的目的在哪呢？

設定 Manifest 的目的

會說 Manifest 在 PWA 中佔了非常重要的地位，那是因為在 PWA 中幾個很重要的功能，例如： Install Banner 、 Splash Screen 或類似 Native App 的呈現方式，這些都是需要 Manifest 屬性有被正確的設定，才能正常的使用，因此才會說 Manifest 在 PWA 中非常重要。

左： Splash Screen 、中： Install Banner 、右： standalone 呈現方式

後記

寫到這邊才發現有些工具或是觀念，對於剛接觸網頁的開發者，可能不是很熟悉，不知道大家是否有看不懂的地方？如果有的話都歡迎在底下留言給我。

今天可能還會再寫一篇有關 Web Server For Chrome 的簡介，對於和 Apache 或 Nginx 不是很熟悉的人，這個工具可以非常容易就開起提供靜態檔案的 Server ，非常值得推薦！

2018–03–15 在好想工作室有分享 PWA — 簡單介紹 這個主題，雖然活動已經結束，但還是放上活動簡報，如果對於 PWA 有興趣的話，都歡迎聯絡我或是在底下留言給我。