前言

在上一章中，對(duì)PWA的相關(guān)概念做了基本介紹，了解了PWA的組成及優(yōu)勢(shì)。為了能夠更快的進(jìn)入PWA的世界，這一章主要對(duì)在PWA開發(fā)中，需要注意的問題，運(yùn)行的環(huán)境及調(diào)試工具做介紹說明。

瀏覽器要求

因?yàn)槟壳案鳛g覽器對(duì)于PWA的支持度各不一樣，在這里為了對(duì)PWA有更好的體驗(yàn)及使用，需要對(duì)瀏覽器做一下要求。

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

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

電腦端要求

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

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

手機(jī)端要求

因?yàn)槟壳?#xff0c;對(duì)于PWA中Push API實(shí)現(xiàn)最好的瀏覽器只有Chrome，所以這里仍然選擇Chrome 62+。因?yàn)镻WA的一些技術(shù)需要依賴于系統(tǒng)支持，所以這里建議使用純正的Android OS，或者可以在一些國(guó)際版的ROM系統(tǒng)上進(jìn)行。

安裝網(wǎng)絡(luò)服務(wù)器

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

安裝

本地服務(wù)器采用Web Server for Chrome，點(diǎn)擊下載。

測(cè)試

安裝完成后，點(diǎn)擊書簽中的應(yīng)用

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

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

通過點(diǎn)擊HOOSE FOLDER按鈕，在彈出的文本框里選擇自己開發(fā)的項(xiàng)目文件夾即可。

選擇完成后，記住開啟服務(wù)，開啟后會(huì)顯示W(wǎng)eb Server:STARTED,表示服務(wù)開啟。

開發(fā)者工具

打開

所有調(diào)試都是基于瀏覽器的開發(fā)者工具進(jìn)行，可以通過快捷鍵打開。

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

或者通過菜單欄進(jìn)入

面板說明

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

包含Manifest的調(diào)試、Service Worker的調(diào)試，Cache的調(diào)試等，在隨后的章節(jié)里會(huì)詳細(xì)說明。

總結(jié)

這一篇主要對(duì)后的學(xué)習(xí)，在開發(fā)工具和開發(fā)環(huán)境上做了鋪墊，來方便后面的學(xué)習(xí)。

---

博客名稱：王樂平博客

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

本作品采用知識(shí)共享署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際許可協(xié)議進(jìn)行許可。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。