Day5-PWA 初體驗 - 開發環境

前言

前面講那麼多東西,也認識了基本的 PWA 架構,接下來就要來準備一下開發環境了。

開發環境

工欲善必先利其器,在開發 PWA 之前我們必須先準備好開發環境,PWA 開發環境最主要是使用 Chrome 來開發,接下來往下實作請具備好以下條件

  • Chrome(74或更高版本以上)。
  • 懂基本的 HTML、CSS、JavaScript 以及知道 Chrome DevTools。

開啟 Chrome PWA 開發模式

那由於 PWA 模擬環境必須手動開啟,所以這邊首先在 Chrome Url 輸入 chrome://flags/

chrome://flags/

接下來找到 Desktop PWAs local updating,將 Default 改 Enabled ↓

Enabled

接下來只需要重新啟動 Chrome 即可。

驗證 PWA 開啟

那該如何驗證自己 PWA 已經開啟了呢?直接進入 Google I/O 2016 官方網站,然後就可以在右上角安裝 PWA 囉 ↓

PWA

安裝之後就會自動開啟 PWA 模式 ↓

PWA 模式

接下來你可以在該 PWA 畫面下按下 F12 開啟 DevTools ↓

DevTools

查看 manifest 與 Service Workers

前面兩篇都在介紹 manifest 與 Service Workers,所以這一篇當然要介紹一下該如何看 manifest 與 Service Workers,首先先開啟 DevTools,然後點 Application,接下來旁邊就可以看到 manifest 與 Service Workers 囉 ↓

Application

manifest

前面我們有講到 manifest.js 就是管理一些應用程式名稱、應用程式圖案等等的 JSON 檔案,所以我們可以在這裡看到各種相關欄位設置 ↓

manifest.js

通常來講 icon 會建議放多種版本的大小,可是這部分我沒有特別研究,所以可以參考 Google 官方的 icon 大小。

  • 48x48
  • 72x72
  • 96x96
  • 144x144
  • 168x168
  • 192x192
  • 256x256
  • 512x512

(但是這邊我實際應用僅會用 192x192 以及 512x512 的尺寸)

Service Workers

那 Service Workers 呢?基本上會集中在這區塊 ↓

Service Workers

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

參考文獻

你的首個 Progressive Web App

0%