PWA - Web App Manifest

  展示用的專案的結構如下:

其中 manifest.json 用途在於將web 應用程式安裝於設備的主畫面，可以設定名稱、圖示、作者等。

manifest.json 於示範的專案內容如下: 

大致上常用的屬性如上，至於詳細的介紹於https://developer.mozilla.org/en-US/docs/Web/Manifest 可以查閱。

其中認為最重要的屬性是 display 與 orientation。

-display:

• browser: 與一般網站類似，有網址列表。
• standalone: 就像是獨立應用程式一樣，包括有不同的執行視窗、有圖示的應用程式啟動器。在這模式下，使用者代理將不包含控制導覽列，但能包含其他的 UI 元素，像是狀態列。
• fullscreen: 全螢幕且沒有網址列表。
• minimal-ui: 像是獨立應用程式一樣，但將有控制導覽列 UI 元素的最小設置，元素會因瀏覽器而不同。

• portrait: APP為橫的方式。
• landscape: APP為直的方向。

當我們的專案成功順利註冊 service work 後，可於於開發者工具，點選Application頁籤，於左方點選 Manifest，可以看見於 manifest.json檔中所設定的內容。 

接下來要模擬安裝到裝置上。如果有裝android或iphone模擬器，可以安裝home screen。這邊我們使用chrome 的安裝來模擬。於網址列上有個下載的按鈕，點選起來:

之後會於桌面上產生APP圖示：

再點選此圖示，即會看見此示範專案設定display為standalone的顯示：

當display 設定為minimal-ui，其會多出導覽箭頭與重新讀取的功能(左上角)。

而要移除安裝的APP可於由上方點選解除安裝即可：