前言

在上一章中，對PWA的相關概念做了基本介紹，了解了PWA的組成及優勢。為了能夠更快的進入PWA的世界，這一章主要對在PWA開發中，需要注意的問題，運行的環境及調試工具做介紹說明。

瀏覽器要求

因為目前各瀏覽器對于PWA的支持度各不一樣，在這里為了對PWA有更好的體驗及使用，需要對瀏覽器做一下要求。

下圖是目前各瀏覽器對PWA的支持度：

可以參考ispwaready和caniuse來了解瀏覽器的支持情況。

電腦端要求

電腦端這邊建議使用Chrome 42+，或者用最新的。后面的課程會基于Chrome開發。

可以通過在Chrome瀏覽器的地址欄中輸入chrome://settings/help，來查看版本信息。

手機端要求

因為目前，對于PWA中Push API實現最好的瀏覽器只有Chrome，所以這里仍然選擇Chrome 62+。因為PWA的一些技術需要依賴于系統支持，所以這里建議使用純正的Android OS，或者可以在一些國際版的ROM系統上進行。

安裝網絡服務器

因為PWA的一些技術需要運行在https上，或者localhost(127.0.0.1)上，不能直接通過打開html文件的方式運行，所以這里需要安裝一下本地的服務器。

安裝

本地服務器采用Web Server for Chrome，點擊下載。

測試

安裝完成后，點擊書簽中的應用

或者在地址欄中輸入chrome://apps/。

找到安裝后的Web Server for Chrome應用，單擊即可打開。

通過點擊HOOSE FOLDER按鈕，在彈出的文本框里選擇自己開發的項目文件夾即可。

選擇完成后，記住開啟服務，開啟后會顯示Web Server:STARTED,表示服務開啟。

開發者工具

打開

所有調試都是基于瀏覽器的開發者工具進行，可以通過快捷鍵打開。

• F12 或者 Ctrl + Shift + I （Windows/Linxu）
• Cmd+Opt+I（Mac）

或者通過菜單欄進入

面板說明

開發PWA，我們主要用到的是Application面板。

包含Manifest的調試、Service Worker的調試，Cache的調試等，在隨后的章節里會詳細說明。

總結

這一篇主要對后的學習，在開發工具和開發環境上做了鋪墊，來方便后面的學習。

---

博客名稱：王樂平博客

CSDN博客地址：http://blog.csdn.net/lecepin

本作品采用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

總結

以上是生活随笔為你收集整理的PWA(Progressive Web App)入门系列：（二）相关准备的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。