2. PWA 相关准备

本文主要包含以下知识点：

  • 浏览器环境准备
  • 手机端环境准备
  • 安装网络服务器
  • 调试环境

浏览器环境准备

因为目前各大浏览器对于 PWA 的支持度各不一样，所以这里为了对 PWA 有更好的体验及使用，需要对浏览器做一下统一要求。PWA 既然是 Google 力推的项目，所以在支持度上我们首选 Chrome 浏览器。电脑端这边建议使用 Chrome 42+，或者用最新的。

可以通过在 Chrome 浏览器的地址栏中输入chrome://settings/help，来查看版本信息。

sngrep 浏览器支持_pwa

手机端环境准备

因为目前，对于 PWA 中 Push API 实现最好的浏览器只有 Chrome 浏览器，所以这里我们仍然选择 Chrome 62+ 的浏览器。因为 PWA 的一些技术需要依赖于系统支持，所以这里建议使用纯正的 Android OS，或者可以在一些国际版的 ROM 系统上进行。

sngrep 浏览器支持_Chrome_02

安装网络服务器

因为 PWA 的一些技术需要运行在 https 或者 localhost（127.0.0.1）上，不能直接通过打开 HTML 文件的方式运行，所以这里需要安装一下本地的服务器。本地服务器我们选择 Web Server for Chrome。

下载链接为：https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

sngrep 浏览器支持_pwa_03

安装完成后，搜索栏输入chrome://apps/，找到安装后的 Web Server for Chrome 应用，单击打开。如下图：

sngrep 浏览器支持_sngrep 浏览器支持_04

点击 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)]

手机上浏览器访问效果如下：

sngrep 浏览器支持_sngrep 浏览器支持_05

调试环境

所有调试都是基于浏览器的开发者工具进行，可以通过快捷键打开。

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

开发 PWA，我们主要用到的是 Application 面板。包含 Manifest 的调试、Service Worker 的调试，以及 Cache 的调试等。

sngrep 浏览器支持_Chrome_06

总结

本文主要介绍了开发 PWA 之前的环境准备工作。无论是 PC 端，还是手机端，我们都选择支持度最好的 Chrome 浏览器。服务器环境我们选择安装了 Web Server for Chrome 插件。最后，调试 PWA 程序时最常用的是 Application 面板。包含 Manifest 的调试、Service Worker 的调试，以及 Cache 的调试等。