2. PWA 相关准备
本文主要包含以下知识点：
- 浏览器环境准备
- 手机端环境准备
- 安装网络服务器
- 调试环境
浏览器环境准备
因为目前各大浏览器对于 PWA 的支持度各不一样，所以这里为了对 PWA 有更好的体验及使用，需要对浏览器做一下统一要求。PWA 既然是 Google 力推的项目，所以在支持度上我们首选 Chrome 浏览器。电脑端这边建议使用 Chrome 42+，或者用最新的。
可以通过在 Chrome 浏览器的地址栏中输入chrome://settings/help，来查看版本信息。
![[外链图片转存失败(img-80IZEKJi-1562758215455)(media/15539557443184/15540158740468.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/6cc23815f5de6319a01eb1fc9cb75506.jpeg)
手机端环境准备
因为目前，对于 PWA 中 Push API 实现最好的浏览器只有 Chrome 浏览器，所以这里我们仍然选择 Chrome 62+ 的浏览器。因为 PWA 的一些技术需要依赖于系统支持，所以这里建议使用纯正的 Android OS，或者可以在一些国际版的 ROM 系统上进行。
![[外链图片转存失败(img-cCwKSzFY-1562758215456)(media/15539557443184/15540216954639.jpg)]（图为手机端（Android）Chrome 浏览器截图）](https://i-blog.csdnimg.cn/blog_migrate/2e6cefa4925af6074631a904a068d477.jpeg)
安装网络服务器
因为 PWA 的一些技术需要运行在 https 或者 localhost（127.0.0.1）上，不能直接通过打开 HTML 文件的方式运行，所以这里需要安装一下本地的服务器。本地服务器我们选择 Web Server for Chrome。
![[外链图片转存失败(img-NsA5JgVJ-1562758215456)(media/15539557443184/15540219266188.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/18b6800ab5f46772eaf457323d9756a0.jpeg)
安装完成后，搜索栏输入chrome://apps/，找到安装后的 Web Server for Chrome 应用，单击打开。如下图：
![[外链图片转存失败(img-gTEewJPs-1562758215457)(media/15539557443184/15540222913382.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/c06eb9d90a4333133f4ee860e6f2cc9a.jpeg)
点击 CHOOSE FOLDER 按钮可以配置项目目录，勾选 Accessible on local network 可以让其他终端也访问到此服务器，Enter Port 用于设置端口号。
这里我在桌面创建项目根目录 app，里面创建一个 index.html，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Learning PWA</h1>
<p>this service is running on Web Server for Chrome.</p>
</body>
</html>
打开浏览器，访问 Web Server URL（s）下所提供的任意一个 URL，效果如下：
[外链图片转存失败(img-WQeAfWZi-1562758215457)(media/15539557443184/15540225348142.jpg)]
手机上浏览器访问效果如下：
![[外链图片转存失败(img-FKKT3HBT-1562758215458)(media/15539557443184/15540227000288.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/c0979327ab0758d79142f845302ab662.jpeg)
调试环境
所有调试都是基于浏览器的开发者工具进行，可以通过快捷键打开。
- F12 或者 Ctrl + Shift + I （Windows/Linux）
- Cmd+Opt+I（Mac）
开发 PWA，我们主要用到的是 Application 面板。包含 Manifest 的调试、Service Worker 的调试，以及 Cache 的调试等。
![[外链图片转存失败(img-RNtdRzPp-1562758215459)(media/15539557443184/15540228731596.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/ea54a676d52d4c7c41f1cdfd54268fc2.jpeg)
总结
本文主要介绍了开发 PWA 之前的环境准备工作。无论是 PC 端，还是手机端，我们都选择支持度最好的 Chrome 浏览器。服务器环境我们选择安装了 Web Server for Chrome 插件。最后，调试 PWA 程序时最常用的是 Application 面板。包含 Manifest 的调试、Service Worker 的调试，以及 Cache 的调试等。
获取更多知识请关注公众号“朗沃it学习”
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
