Day5-PWA 初體驗 - 開發環境
前言
前面講那麼多東西，也認識了基本的 PWA 架構，接下來就要來準備一下開發環境了。
開發環境
工欲善必先利其器，在開發 PWA 之前我們必須先準備好開發環境，PWA 開發環境最主要是使用 Chrome 來開發，接下來往下實作請具備好以下條件
- Chrome（74或更高版本以上）。
- 懂基本的 HTML、CSS、JavaScript 以及知道 Chrome DevTools。
開啟 Chrome PWA 開發模式
那由於 PWA 模擬環境必須手動開啟，所以這邊首先在 Chrome Url 輸入 chrome://flags/ ↓
接下來找到 Desktop PWAs local updating，將 Default 改 Enabled ↓
接下來只需要重新啟動 Chrome 即可。
驗證 PWA 開啟
那該如何驗證自己 PWA 已經開啟了呢?直接進入 官方網站，然後就可以在右上角安裝 PWA 囉 ↓
安裝之後就會自動開啟 PWA 模式 ↓
接下來你可以在該 PWA 畫面下按下 F12 開啟 DevTools ↓
查看 manifest 與 Service Workers
前面兩篇都在介紹 manifest 與 Service Workers，所以這一篇當然要介紹一下該如何看 manifest 與 Service Workers，首先先開啟 DevTools，然後點 Application，接下來旁邊就可以看到 manifest 與 Service Workers 囉 ↓
manifest
前面我們有講到 manifest.js 就是管理一些應用程式名稱、應用程式圖案等等的 JSON 檔案，所以我們可以在這裡看到各種相關欄位設置 ↓
通常來講 icon 會建議放多種版本的大小，可是這部分我沒有特別研究，所以可以參考 Google 官方的 icon 大小。
- 48x48
- 72x72
- 96x96
- 144x144
- 168x168
- 192x192
- 256x256
- 512x512
(但是這邊我實際應用僅會用 192x192 以及 512x512 的尺寸)
Service Workers
那 Service Workers 呢?基本上會集中在這區塊 ↓
但是這邊我個人覺得在實作的時候再來講會比較清楚，因為這邊只是一些基本的開發環境操作觀看而已，所以在這邊就稍微了解東西在哪裡就好。