在移动设备使用网站变得越来越普遍的趋势下，应用程序不仅仅是 Web 应用程序克隆。 渐进式 Web 应用程序 (PWA) 提供了一种方式来构建最佳全面体验，其中包含了 Web 和原生应用程序的最佳部分。 Workbox 是 Google 实现的一个用于构建 PWA 的开源工具包，它可以提供一些方便的抽象和功能，以简化 PWA 的开发和部署。 在本文中，我们将展示如何使用 Workbox 更改现有的 Angular 应用程序，以使其成为 PWA。
现有 Angular 应用过渡到 PWA
Angular 是一个流行的 Web 应用程序框架，它使前端工程师可以更快地构建 Web 应用程序，比如 SPA（单页应用程序）。 现在，让我们将一个现有的 Angular 应用程序转换为 PWA。
什么是 PWA
渐进式 Web 应用程序 (PWA) 是一种增强式 Web 应用程序的形式，可以让用户安装应用程序并从桌面启动，就像本地应用程序一样。 它还可以提供离线支持和推送通知等功能，使其类似于本地应用程序。
PWA 的要素
要将现有应用程序转换为 PWA，必须具备以下要求:
Web App Manifest - 它提供了使 PWA 能够在移动设备上可以添加到主屏幕的信息。
Service Worker - Service Worker 是一个 JavaScript 脚本，负责缓存应用程序的资源并提供离线支持、网络性能和推送通知的支持。
HTTPS - 安全的协议对于现代 Web 应用程序的访问是必须的，并且 HTTPS 协议对于使用 Service Worker 也是必需的。
在现有 Angular 应用中添加要素
在现有 Angular 应用程序中添加 PWA 资源首先需要通过 Angular CLI 安装 @angular/pwa 包：
ng add @angular/pwa
这会在应用程序中添加所需的文件，例如 service-worker 并配置应用程序以添加 web app manifest。 在安装后，您可以运行应用程序，并在 Chrome 开发者工具的“应用程序”选项卡中查看应用程序的主屏幕图标以及其它必要下发的 metadata。
配置 Service Worker
您可以在 Angular 应用程序中修改 service-worker 代码。
-- -------------------- ---- ------- ------------------------------- ------------------------------ --- ----------------- --- ------------------------------- -- ------------------------------ --- ------------------ --- ------------------------------- -- ------------------------------ --- ------------------- --- ------------------------------- -- ------------------------------ --- ---------------------------------------------- --- ------------------------------- --
此代码片段首先导入 Workbox 资源，然后使用 registerRoute() 方法配置 Service Worker，以将资源缓存在存储中。 在此示例中，我们使用 CacheFirst 策略，因为我们希望尽可能多地使用缓存。
缓存服务 Worker 预缓存资源
在大多数情况下，Service Worker 都需要对应用程序资源进行预缓存。 Workbox 提供了一个名为 injectManifest 的 CLI 工具，可以让您在构建应用程序时自动缓存资源。
首先，将 Service Worker 放在所有其他位置之前，以确保它是首先加载的。 在 angular.json 中找到 projects > your-angular-project > architect > build，将 Service Worker 添加到生成步骤：
"serviceWorker": true, "ngswConfigPath": "src/ngsw-config.json"
接下来，在你的项目根目录下创建一个 ngsw-config.json 文件：
-- -------------------- ---- -------
-
-------- --------------
-------------- -
-
------- ---------
-------------- -------
------------ -
-------- -
------------------
----------------------
-
-
--
-
------- ---------
-------------- -------
------------ -
-------- -
-------------
--------------
-
-
-
-
-在 Angular 应用程序上采用 Push API
在 Angular 应用程序中使用 Web Push API 提供实时消息通知：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------------------- -------------- -
-------------------------------------------------------- -------------- -
-- ------------- --- ----- -
------------------------------------
---------------- -----
--------------------- --- --------------
---------------- -------------- -
---------------- ------------- -- --------------
---
- ---- -
--------------------- ------------- -- --------------
-
--
---
-此示例将检查当前是否已存在订阅，如果没有，则提示用户同意启用推送通知。
结论
使用 Workbox 是将现有 Angular 应用程序转换为 PWA 的最简单方法之一。 Workbox 提供了对 PWA 的多个方面进行抽象的能力，让开发人员可以更轻松地实现 PWA 功能。 学习如何快速将现有 Web 应用程序转换为 PWA 以及如何开始添加推送通知，可以帮助您的堆栈变得更加
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674907c593696b02680b132f