恢弘志士之气，不宜妄自菲薄。这篇文章主要讲述PWA(Progressive Web App)入门系列：相关准备相关的知识，希望能为你提供帮助。
前言 在上一章中，
对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)入门系列（相关准备）】
推荐阅读
- Android RecyclerView利用Glide加载大量图片into(Target)导致OOM异常
- U盘分区工具免费下载
- 最容易的U盘量产工具安装办法
- U盘安装64位系统免费下载
- 教你如何用U盘破解电脑开机密码
- 安装系统 下载到U盘的重装系统办法
- U盘装win7系统免费下载
- 教你用U盘怎样装系统
- 教你bios之家如何设置