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 呢?基本上會集中在這區塊 ↓

但是這邊我個人覺得在實作的時候再來講會比較清楚，因為這邊只是一些基本的開發環境操作觀看而已，所以在這邊就稍微了解東西在哪裡就好。

參考文獻

你的首個 Progressive Web App