Angular Service Worker和PWA-入门

Service Worker 快速上手

本文档解释了如何在 ​Angular CLI​ 项目中启用对 Angular Service Worker 的支持。稍后它会用一个简单的范例来向你展示 Service Worker 实践，包括加载和基础的缓存功能。

前提条件

对 Angular Service Worker 简介中的信息有了基本的了解。

为你的项目添加 Service Worker

要让你的项目支持 Angular Service Worker，可以使用 CLI 命令 ​ng add @angular/pwa​。它会添加 ​@angular/service-worker​ 包，并建立必要的支持文件，小心翼翼地配置你的应用，以便使用 Service Worker。

ng add @angular/pwa --project <project-name>

上述命令完成了如下步骤：

1. 把 @angular/service-worker 添加到你的项目中。
2. 在 CLI 中启用 Service Worker 的构建支持。
3. 在应用模块中导入并注册 Service Worker。
4. 修改 ​index.html​ 文件：
• 包含要添加到 ​manifest.webmanifest​ 文件中的链接。
• 为 ​theme-color​ 添加 meta 标签。
5. 创建图标文件，以支持安装渐进式应用（PWA）。
6. 创建一个名叫 ​ngsw-config.json​ 的 Service Worker 配置文件，它会用来指定缓存的行为以及其它设定。

现在，构建本项目：

ng build

现在，这个 CLI 项目就可以使用 Angular Service Worker 了。

Service Worker 实战：向导

本节用一个范例应用来演示一下 Service Worker 实战。

用 http-server 启动开发服务器

由于 ​ng serve​ 对 Service Worker 无效，所以必须用一个独立的 HTTP 服务器在本地测试你的项目。可以用任何 HTTP 服务器。下面这个例子使用来自 npm 中的 http-server 包。为了减小端口冲突的可能性，我们在一个专用端口上进行测试。

要想使用 ​http-server​ 在包含这些 web 文件的目录上启动服务，运行下列命令：

http-server -p 8080 -c-1 dist/<project-name>

最初的加载

在服务器运行起来之后，你可以在浏览器中访问 ​<http://localhost:8080/>​。你的应用像通常一样加载。

提示：
当测试 Angular Service Worker 时，最好使用浏览器中的隐身或隐私窗口，以确保 Service Worker 不会从以前的残留状态中读取数据，否则可能导致意外的行为。

注意：
如果没有使用 HTTPS，那么 Service Worker 只会在 ​localhost ​上的应用中进行注册。

模拟网络出问题

要想模拟网络出问题的情况，可以为你的应用禁用网络交互。在 Chrome 中：

1. 选择 Tools > Developer Tools（从右上角的 Chrome 菜单）。
2. 进入 Network 页。
3. 在 Throttling 下拉菜单中选择 Offline 复选框。

现在，本应用不能再和网络进行交互了。

对于那些不使用 Angular Service Worker 的应用，现在刷新将会显示 Chrome 的“网络中断”页，提示“没有可用的网络连接”。

有了 Angular Service Worker，本应用的行为就不一样了。刷新时，页面会正常加载。

看看 Network 页，来验证此 Service Worker 是激活的。

注意：
在 “Size” 列中，请求的状态是 ​(ServiceWorker)​。 这表示该资源不是从网络上加载的，而是从 Service Worker 的缓存中。

什么被缓存了？

注意，浏览器要渲染的所有这些文件都被缓存了。​ngsw-config.json​ 样板文件被配置成了要缓存 CLI 用到的那些文件：

• ​index.html ​
• ​favicon.ico ​
• 构建结果（JS 和 CSS 包）
• ​assets ​下的一切
• 图片和字体直接位于所配置的 outputPath (默认为 ​./dist/<project-name>/​) 或 ​resourcesOutputPath ​下。

注意如下两个关键点：

1. 所生成的 ​ngsw-config.json​ 包括一个可缓存字体和图像的有限列表。在某些情况下，你可能要按需修改这些 glob 模式。
2. 如果在生成了配置文件之后修改了 ​resourcesOutputPath ​或 ​assets ​的路径，那么就要在 ​ngsw-config.json​ 中手动修改这些路径。

修改你的应用

现在，你已经看到了 Service Worker 如何缓存你的应用，接下来的步骤讲它如何进行更新。

1. 如果你正在隐身窗口中测试，请打开第二个空白页。这会让该隐身窗口和缓存的状态在测试期间持续活着。
2. 关闭该应用的页面，而不是整个窗口。这也会同时关闭开发者工具。
3. 关闭 ​http-server​。
4. 打开 ​src/app/app.component.html​ 以供编辑。
5. 把文本 ​Welcome to {{title}}!​ 改为 ​Bienvenue à {{title}}!​。
6. 再次构建并运行此服务器：

ng build
http-server -p 8080 -c-1 dist/<project-name>

在浏览器中更新你的应用

现在，看看浏览器和 Service Worker 如何处理这个更新后的应用。

1. 再次在同一个窗口中打开 http://localhost:8080，发生了什么？




错在哪里？哪里也没错，真的。Angular Service Worker 正在做自己的工作，并且用它已经安装过的版本提供服务，虽然，已经有新版本可用了。由于更关注速度，所以 Service Worker 并不会在启动它已经缓存过的版本之前先等待检查更新。

看看 ​http-server​ 的 log，就会发现 Service Worker 请求了 ​/ngsw.json​ 文件，这是 Service Worker 正在检查更新。

2. 刷新页面。




Service Worker 在后台安装好了这个更新后的版本，下次加载或刷新页面时，Service Worker 就切换到最新的版本了。