Service worker和PWA

发表于 更新于 分类于 阅读次数： 本文字数： 3.1k 阅读时长 ≈ 3 分钟

1. 前言

本文向你介绍什么是 PWA, 以及如何在 Angular 项目中启用 PWA。然后使用一个示例向您展示一个正在运行的 service worker，演示如何加载和如何在客户端缓存数据。

2. 什么是渐进式应用 PWA？

渐进式 Web 应用程序可提供高水平的用户体验，因为它具有与 Native app 相同的功能。如今，PWA 已经成为一件大事，越来越多的公司正在转向渐进式 Web 应用程序 (PWA)。

PWA 不需要通过应用商店部署；相反，我们采取稍微不同的方法，通过 URL 通过 Web 服务器进行部署。为了制作与原生应用程序相同的 PWA，我们必须满足以下要求。

2.1. 响应式(Responsive)

几乎可以在适配所有设备桌面、移动设备或平板电脑上运行。

2.2. 自动更新

Service worker 始终保持更新。

2.3. 安全的

使用 HTTPS 提供内容，确保内容在传输过程中是安全的。

2.4. 可靠连接

Service Worker 支持使其在离线和低速网络上工作。

2.5. 渐进式的

Web 应用程序采用现代 Web 功能为每个用户提供类似应用程序的体验。

2.6. 可搜索

可以通过搜索引擎进行搜索

2.7. 注重用户体验

通过采用与 Native app 相同的交互方法，在性能上获得类似于 Native app 的用户体验。

3. 前置条件

在阅读本文以前最好对Angular service worker有基本的了解

4. 在项目中添加 Service Worker

要在项目中设置 Angular Service Worker，请使用 CLI 命令 ng-add@Angular/pwa。它通过添加@angular/service-worker 包以及设置必要的支持文件，将您的应用程序配置为使用 Service Worker。

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

该命令完成以下操作

  1. 添加@angular/service-worker 到工程
  2. 在 CLI 中启用 service worker 构建支持
  3. 在 application 模块中导入并注册 service worker
  4. 更新 index.html 文件:
    包括一个添加 manifest.webmanifest 文件的链接
    为主题颜色添加 meta tag
  5. 添加图标文件
  6. 创建名为 ngsw-config.json 的 service worker 配置文件，该文件指定缓存行为和其他设置。

现在, 我们再次编译项目

1
2
3

ng build

Angular 项目现在已设置为使用 Angular service worker。

5. 探究 Service worker

本节使用一个示例应用程序演示 service worker 如何工作.

5.1. 初始加载

在服务器运行的情况下，打开浏览器访问http://localhost:8080.应用程序应该正常被加载。

提示: 在测试 Angular Service worker 时，最好使用无痕浏览模式或者私密浏览模式在浏览器开一个全新的窗口，以确保 Service worker 不会从以前的剩余状态中读取信息，避免一些怪异行为。
If you are not using HTTPS, the service worker will only be registered when accessing the application on localhost.
注意: 在使用 HTTPS 访问应用或 HTTP 访问 localhost 上的应用时才会注册 service worker 。

5.2. 模拟网络问题

若要模拟网络问题，请禁用应用程序的网络交互。
在 Chrome 中：
选择“工具”>“开发工具”（从右上角的 Chrome 菜单中）。
转到“网络”选项卡。
在“限制”下拉菜单中选择“脱机”。

现在应用程序无法访问网络。
对于不使用 Angular service worker 的应用程序，现在刷新会显示 Chrome 的断开互联网连接的页面，上面写着“没有互联网连接”。
随着 Angular service worker 的加入，应用程序的行为发生了变化。刷新时，页面加载正常。
从“网络”选项卡可以看出 service worker 处于 active 状态。

注意: 在“size”列下，请求状态为（ServiceWorker）。这意味着没有从网络加载资源。相反，它们是从 service worker 的缓存中加载的。

5.3. 哪些内容被缓存了？

请注意，浏览器渲染此应用程序所需的所有文件都已缓存。ngsw-config.json 样板文件配置用于缓存的特定资源：

  • index.html
  • favicon.ico
  • Build artifacts (JS and CSS bundles)
  • Anything under assets
  • 直接在配置的 outputPath（默认情况下./dist/<projectname>/）或 resourcesOutputPath 下的图像和字体。有关这些选项的详细信息，请参阅 ng build。

注意两个关键点：
生成的 ngsw-config.json 包括一个有限的可缓存字体和图像扩展列表。在某些情况下，您可能需要修改 glob 模式以满足您的需要。
如果在生成配置文件后修改了 resourcesOutputPath 或 assets 路径，则需要在 ngsw-config.json 中手动更改路径。

5.4. 对应用程序进行更改

现在，您已经了解了 service worker 如何缓存应用程序，下一步是了解更新的工作原理。对应用程序进行更改，并观察 service worker 安装更新：

如果您正在在无痕模式下进行测试，请打开第二个空白标签页。这样可以在测试期间保持无痕状态和缓存处于活动状态。

关闭应用程序选项卡，但不关闭窗口。这也应该关闭开发者工具。

  • 关闭 http-server。

  • 打开 src/app/app.component.html 进行编辑。

  • 更改文本欢迎使用 ！to Bienvenue à Service worker和PWA！.

  • 再次构建并运行服务器：

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

5.5. 在浏览器中更新应用程序

现在看浏览器和 service worker 如何处理更新后的应用程序。

  1. 在同一窗口中再次打开 http://localhost:8080, 注意是同一个窗口。会发生什么？

此时页面内容没有变化, 即使我们已经修改了页面内容.

这里出了什么问题？实际上没什么。Angular service worker 正在执行其工作并提供已安装的应用程序版本，即使页面有更新也是如此。为了提高速度，服务工作进程不会在为已缓存的应用程序提供服务之前等待检查更新。

查看 http-server 日志信息可以看到 service worker 向服务器端请求了 /ngsw.json。但是为了追求响应速度 service worker 没有等待/ngsw.json 中的更新到来即返回了之前 installed 的页面内容, 这是服务工作进程检查更新的方式。

  1. 刷新页面

让我们刷新一下页面, 此时我们就能看到更新后的内容了.
此过程中, service worker 在后台安装了应用程序更新后的版本，重新加载页面时，服务工作进程将切换到最新版本。

5.6. 更多关于 Angular service worker 的信息

您可能还对以下内容感兴趣：

App Shell

Communicating with service workers

6. Angular 系列文章

最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客

7. 参考文档

Getting started with service workers

PWA ng-add schematic does not work if bootstrapApplication is used (standalone)