如何在 Angular 应用程序（Angular 7）中添加 Service Worker
引言
Service workers 是一种很实用的技术，能够帮助我们创建离线可访问的 Web 应用程序。Service workers 允许您的 Web 应用程序发送推送通知、在后台运行脚本以及管理事务。在这篇文章中，我们将全面了解如何在 Angular 7 应用程序中添加 Service Worker。
- 简介
Service workers 是一个网页环境的小型的 JavaScript 程序，可以在后台执行一些任务，比如消息推送、网络请求、后台运行等。Service workers 应用程序运行在自己的进程中，拥有更高的可靠性和更快的响应速度。
Service workers 还自带缓存 API，可以实现离线存取，压缩请求，加速响应。
- 安装 Angular Service Worker 相关依赖
首先，你需要安装 Angular Service Worker 及其所需的库，你可以通过以下命令：
npm install --save @angular/service-worker
在你的 Angular 应用程序中，为了使用 Service Worker，你还需要安装 @angular/pwa：
ng add @angular/pwa
这个命令执行后，会将 Angular 服务工人集成到你的应用程序中，准备离线支持等功能。
- 配置 Angular Service Worker
安装依赖后，您需要在 Angular 应用程序中配置 Service Worker。开发人员可以使用 Angular CLI 来生成一个默认的设置。为此，您需要使用以下命令：
ng set apps.0.serviceWorker=true
这将自动将 Service Worker 安装并启用在你的应用中。服务工人默认从一个名为 ngsw-config.json 的 JSON 配置文件读取配置。
ngsw-config.json 是配置你 ServiceWorker 的重要文件，需要配置 cache 模式，如果需要新增一些缓存，可以继续添加 cache ，具体示例代码如下所示：
-- -------------------- ---- -------
-
---------- ------------------------------------------------------------
-------- --------------
-------------- -
-
------- ------
-------------- -----------
------------ -
-------- -
---------------
---------
--------
---------
---------
--------
--
------- -
-------------------------------------------------------------
----------------------------------------------------------
------------------------------------------------------------------
----------------------------------------------------------------------------------
-
-
--
-
------- ---------
-------------- -------
------------- -----------
------------ -
-------- -
------------
-
-
-
---由于限制篇幅，这里不再赘述每个参数的含义，具体可以参考 Angular 官方文档。
- 编写 Angular Service Worker
接下来是我们希望你们最喜欢的部分，写代码! 这里我们将提供以下示例代码，展示如何读取 Service Worker，为 Worker 添加 push 消息及缓存操作等。
angular-register-sw
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------- - ---- --------------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
----- - -------------
--------- -------
---------------- ------- - ------
------------------- --------- --------- - -
----------- ---- -
-------------------- - ------------------------
-- ---------------------- -
------------------------------------ -- -
----- ------------- -
----------------
-- ------------------------ -
-------------------------
-
---
-
--------------------------------------------------- ----- -- -
------------ - ----------- -- ------------ -- --- ---------
---
-
------------- -
-------------------------------------------------
----- -----------------
-------- ------ ---- --- ------- ------ -----------------------
---
-
-sw.js
-- -------------------- ---- -------
----- ---------- - ----------
----- ------------- - --
----- -------------- - ------- ----------- --------
----- -------------- - --------------
----- --------------- - -------------- --------
-- ------- --- ---
-------------------------------- ----- -- -
-----------------------------
----------------
---------------------------------- -- -
--------------
----
--------------
---------------
---
--
--
---
-- -- --------- ------ --- ------ --- --- -------
--------------------------------- ----- -- -
-----------------------------
----------------
----------------------- -- -------------
---------------- -- -
-- ---- --- ----------- -------------------
------------------- -------- ---------
--
----------- -- -
-------------------- ------ ----------------- -------------
--
--
---
-- ---------- -----
----------------------------------------------- ----- ----- -- -
----------------------- ----- --------------
----- ----- - ----- ----------------------------
-- ------ ---------- ------- ---- -----
----- -------- - --- ----------------------------------
----- --------------- - -------------------------- -- ----------------------------------
----- ------- - ----- -------------------------------------- -- -----------------------
----- -------------------------- -- --- ---------------- -----
----------------
------------------------------------------- ----------- -
----- ----------- ----------------- --------
----- -----------------
--
--
---
-------------------------------------------- ----- -- -
----------------------- ----- --------- -------
---
--------------------------------------------- ----- -- -
----------------------- ----- --------- -------
---
--------------------------------------------- ----- -- -
----------------------- ----- ------------ ---------- -------
----------------
------------------
----- --------
------------------ -- -
-- -- ----- -- ------- - ------- ---- -------- -- ---- -----
-- ---------- ---- - --- --- ---- --- ------
--- ---- - - -- - - ------------------ ---- -
----- ------ - --------------
-- -- -- ------- ---- - ------ ---- -- --- ----- ----- ---
-- ----------- --- ------------------------- -
------ ---------------
-
-
------ ------------------------
--
--
---
----------------------------- ----- ----- -- -
----------------- ---------- -------------------
----- ------ - ----- ----------------------------------
----- ------- - ------------------------------
-- -------- -- ------- -
--------------------
-------- ---------------
---
-
---
-- ------ --- -------- -------- ---- -------
-------------------------------- ----- ----- -- -
-- ----------- -- --------------- --- ----------------- -
--------------------- ------- ------- ----------- --------------------
----------------
------------------------------------------- -
----- -------------------
---- -------------
--
--
-
---
-- ------- ---- ------ ---------
------------------------------ ----- -- -
----- ------------- - -------------------------- -- ----------------------------
------------------
----------------------------------------- -- -
----- ------------- - ---------------------------------- -- -
----- ------------- - -----------------
---------------------------------- -- -
------------------------ ---------------
---
------ ---------
---
-- ------ ------ -------- -- --------- ----- --------
------ -------- -- ---------------------- -- ------------------ ---------- ------------
--
--
---- 运行你的 Angular Service Worker 应用程序
在添加了 Service Worker 后，你需要运行搭建程序来检查是否正常运作。可以使用以下命令运行程序：
ng serve --open
Service worker 相关的 code 最后会被编译到 sw.js 文件，其中的 listeners会随着service worker 程序的运行而启动。
- 总结
以上就
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b613a2add4f0e0ffec6851