前言
随着移动设备和网络的普及，PWA（Progressive Web App）逐渐成为了前端开发的热门话题。PWA 是一种结合了 Web 应用和原生应用的优点，具有快速、可靠、可以离线访问等优点。在 Angular 6 中，PWA 的支持也得到了显著提升，并且与 Service Worker 配合使用，可以构建出更加强大的 PWA 应用。
本文将详细介绍如何在 Angular 6 中构建 PWA 应用，让读者了解 PWA 的基础知识和实现方式，并通过示例代码演示如何将 PWA 应用部署到服务器上。
什么是 PWA？
PWA（Progressive Web App）是一种结合了 Web 应用和原生应用的优点的应用程序，具有以下特点：
- 快速：加载速度快，不需要等待安装；
- 可靠：即使在不稳定的网络环境下也可以正常访问；
- 可以离线访问：将应用缓存到本地，可以在没有网络的环境下使用；
- 能够推送通知：具有原生应用的通知功能；
- 具有类似于原生应用的功能：可以在主屏幕创建图标，全屏浏览等。
PWA 的实现方式
PWA 的实现主要依靠两个技术：Service Worker 和 Web App Manifest。
Service Worker
Service Worker 是浏览器提供的一种 JavaScript 脚本，可以拦截网络请求，并在网络不稳定或无网络的情况下提供缓存。通过 Service Worker，我们可以实现以下功能：
- 离线缓存：缓存应用所需的静态资源，使应用可以在离线状态下访问。
- 动态缓存：缓存应用的动态数据，使应用在有网络的情况下可以更快地访问。
- 推送通知：将消息推送到用户的设备上。
- 后台同步：在网络恢复后，将用户发出的请求发送到服务器上。
Web App Manifest
Web App Manifest 是一个 JSON 文件，用于定义 PWA 应用的图标、名称、主题色等信息，帮助应用更好地适应各种设备和屏幕大小。
Angular 6 中的 PWA
在 Angular 6 中，通过 @angular/pwa 插件可以很方便地构建 PWA 应用。通过该插件，我们可以一键生成 Service Worker 和 Web App Manifest。
创建 Angular 6 应用
首先，我们需要安装 Angular 6 和 Ionic CLI。
# 安装 Angular 6 npm install -g @angular/cli # 安装 Ionic CLI npm install -g ionic
然后，使用 Angular CLI 创建一个新应用。
ng new pwa-demo
安装 PWA 插件
进入应用目录，安装 @angular/pwa 插件。
cd pwa-demo ng add @angular/pwa
配置 manifest.json
在 src 目录下创建 manifest.webmanifest 文件，添加以下内容：
-- -------------------- ---- -------
-
------- ---- ------
------------- ---- ------
-------------- ----------
------------------- ----------
---------- -------------
-------- ----
------------ ----
-------- -
-
------ ------------------------------
-------- --------
------- -----------
--
-
------ ------------------------------
-------- --------
------- -----------
--
-
------ --------------------------------
-------- ----------
------- -----------
--
-
------ --------------------------------
-------- ----------
------- -----------
--
-
------ --------------------------------
-------- ----------
------- -----------
--
-
------ --------------------------------
-------- ----------
------- -----------
--
-
------ --------------------------------
-------- ----------
------- -----------
--
-
------ --------------------------------
-------- ----------
------- -----------
-
-
-构建并运行
使用 npm run build --prod 命令打包应用。
npm run build --prod
运行应用，并查看控制台输出。
http-server -p 8080 -c-1 dist/pwa-demo/
在浏览器中访问 http://localhost:8080，打开 DevTools，选择 Application -> Manifest，可以看到我们定义的 manifest.json 信息。
在 Chrome 上，可以使用 Lighthouse 工具进行检测，验证应用是否符合 PWA 标准。
Service Worker 配置
接下来，我们需要修改 app.module.ts，引入 ServiceWorkerModule，并注册 Service Worker。
-- -------------------- ---- -------
---
------ - ------------------- - ---- --------------------------
------ - ----------- - ---- ------------------------------
-----------
------------- -
------------
--
-------- -
---
---------------------------------------------- - -------- ---------------------- --
--
---------- ---
---------- --------------
--
------ ----- --------- - -在 environment.ts 文件中，添加以下内容。
export const environment = {
production: false,
apiUrl: 'https://api.example.com',
enableServiceWorker: true
};最后，在 angular.json 文件中，找到 assets 并添加 src/manifest.webmanifest，这样 Web App Manifest 才能被正确地加载。
缓存对象
我们可以使用 Angular 提供的 HttpClient 发送 AJAX 请求，然后使用 Service Worker 缓存响应，使得应用即使在离线状态下也能够运行。
使用 $ ng generate service data 命令生成 Service，然后在 data.service.ts 文件中添加以下内容：
-- -------------------- ---- -------
---
------ - ----------- ----------- - ---- -----------------------
------ - ---------- - ---- -------
----- ---------- - -----------------
-------------
----------- ------
--
------ ----- ----------- -
------------------- ----- ----------- ------- --------- --------- -
-- ------------------------- -
------------------------------------ -- -
-- ------------- ------- ---------- ---- --- ----------- -
-------------------------
-
---
-
-
---------- --------------- -
----- ------- - --- -------------
--------------------- ------------
----- ------- - --------------------------------------------- - -------- ------- ---
------ -------- ---------------------- ------- -- -
--------------------------------------------- - -------- ------- --
------------------- -- -
----- ------------- - -----------------
-----------------------
----------- -- -
------------------------ ---------------
------------------ ----------- ---------------
------------------
---
---
----
-
-在 app.component.ts 文件中，使用 DataService 发送请求并缓存响应，示例如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -----------
--------- -
--------------
------- ---- - ---- --------
-
--
------ ----- ------------ -
----- --- - ---
------------------- ------------ ------------ -
---------------
-
--------- -
--------------------------
--------------- -- -
-------------------- ------
--------- - -----
---
-
-至此，我们的 PWA 应用已经可以离线浏览和进行数据缓存了。
部署
最后，我们需要将我们的 PWA 应用部署到服务器上。
使用 $ npm install -g http-server 命令安装 http-server。
使用 $ http-server dist/pwa-demo/命令，在控制台中打印出服务器地址，访问该地址即可访问 PWA 应用。
总结
本文介绍了如何在 Angular 6 中构建 PWA 应用，通过 Service Worker 和 Web App Manifest 实现了应用离线访问和数据缓存等功能，并通过示例代码演示了如何将应用部署到服务器上。PWA 技术是前端开发中一个重要的方向，在未来的发展中也将更加重要，希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64edc406f6b2d6eab37ed325