Progressive Web Application Day02 — 到底什麼是 Manifest
上一篇文章( 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 有了基本的認識之後,接著就來看看 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 Appscope
:可使用的範圍,如果使用者超出 Manifest 所提供的範圍,將會回到原本的 Web App
這些是在 MDN - Web AppManifest 上有列出的屬性,各屬性可使用的值,可以請參考 MDN - Web App Manifest 的文件。
引入 Manifest
Manifest 設定完成之後, 大概會長得類似像是這樣:
在 index.html 中把 Manifest 引入近來
接下來,可以透過 Web Server For Chrome 或是類似的工具,開啟一個 Server 來提供靜態檔案。將網站開啟後,開啟 Chrome 的開發者工具,在 Application 的分頁,就可以看到 Manifest 的被成功載入後的效果。
神祕的聲音:開啟 Chrome 的開發者工具可以透過以下快捷鍵
Windows : ctrl + shift + i
Mac : cmd + opt + i
但是,在開發者工具中只能看到 Manifest 有被 Chrome 正確地被引入,也有正確的被解析, Manifest 對於 PWA 的目的在哪呢?
設定 Manifest 的目的
會說 Manifest 在 PWA 中佔了非常重要的地位,那是因為在 PWA 中幾個很重要的功能,例如: Install Banner 、 Splash Screen 或類似 Native App 的呈現方式,這些都是需要 Manifest 屬性有被正確的設定,才能正常的使用,因此才會說 Manifest 在 PWA 中非常重要。
後記
寫到這邊才發現有些工具或是觀念,對於剛接觸網頁的開發者,可能不是很熟悉,不知道大家是否有看不懂的地方?如果有的話都歡迎在底下留言給我。
今天可能還會再寫一篇有關 Web Server For Chrome 的簡介,對於和 Apache 或 Nginx 不是很熟悉的人,這個工具可以非常容易就開起提供靜態檔案的 Server ,非常值得推薦!
2018–03–15 在好想工作室有分享 PWA — 簡單介紹 這個主題,雖然活動已經結束,但還是放上活動簡報,如果對於 PWA 有興趣的話,都歡迎聯絡我或是在底下留言給我。