My first PWA Progressive Web Application Google Part 03 Manifest

主要參考：https://codelabs.developers.google.com/codelabs/your-first-pwapp/#3


manifest.json
網頁沒有manifest.json的時候，Chrome裏面的Application Manifest會顯示找不到manifest

在templates裏面增加manifest.json后，然後在index.html裏面加入后，Chrome會顯示裏面的資料：

<link rel="manifest" href="/manifest.json">

Apple iOS
Safari目前再2019年7月的時候依然不支持manifest.json，網頁强行加到主畫面會產生很差的效果，包括缺乏常見的App圖示，而且打開之後沒有全畫面并且會見到Safari頂部網址欄及底部上下頁操作，明顯不像一個App。

因此在我們可以加入<meta>及"apple-mobile-web"相關的資料到index.html裏面：

<!-- CODELAB: Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="/images/icons/icon-152x152.png">

當capable時候的特別之處在於，啓動WebApp后會進入standalone模式，不會顯示頂部網址欄，不會顯示底部上下頁等操控按鈕。而status-bar-style控制ios頂部顯示信號電信商wifi時間電量的部分，可以選填default的白底黑字、black的黑底白字，或者最進取的black-translucent的app底色白字：

上圖中的navbar的顔色在inline.css裏面設定了為#3f51b5，如果將body background從#ececec改成#3f51b5。改完css檔案之後safari很可能已經cache了舊版本的css檔案，那麽最好在index.html裏面加上<link href="/styles/inline.css?v=1">，WebApp做好了。

Theme Color

在Android Chrome裏面設定了theme-color可以讓status bar也顯示漂亮的顔色

<!-- CODELAB: Add description here -->
<meta name="description" content="A sample weather app">

<!-- CODELAB: Add meta theme-color -->
<meta name="theme-color" content="#2F3BA2" />

End