什么是 PWA？
PWA 即 Progressive Web App，是一种新型的 web 应用程序，可以提供与本地应用程序相同的用户体验。它们可以像普通的网页那样在浏览器中访问，同时又具备离线访问、推送通知、安装到主屏幕等功能。
Angular PWA 的优势
Angular 是一款功能强大的前端框架，它通过自身的 @angular/service-worker 模块来支持 PWA，其主要优势包括：
- 离线访问，用户不再受到慢速或无互联网连接的限制；
- 快速加载，应用程序可以像本地应用程序一样快速加载并响应；
- 应用推送，可以向用户发送基于时间或事件的通知；
- 用户体验，可以通过添加到主屏幕和全屏模式来提高用户体验。
创建 Angular PWA 应用
首先，我们需要使用 Angular CLI 新建一个项目：
ng new my-pwa
接着，我们需要为该项目添加 PWA 支持：
ng add @angular/pwa
完成后，我们需要在 Angular 的主模块文件中启动 ServiceWorker：
-- -------------------- ---- -------
------ - ------------------- - ---- --------------------------
------ - ----------- - ---- ------------------------------
-----------
-------- -
--------------
-----------------
---------------------------------------------- -
-------- ----------------------- -- ------
---
--
---------- ---------------
--
------ ----- --------- --此外，我们还可以在 index.html 文件中添加以下代码，实现主屏幕添加应用程序的功能：
<link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico"> <link rel="apple-touch-icon" href="assets/icons/192x192.png"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Angular PWA">
为了提高首次加载速度，并降低使用期间的加载和响应时间，我们可以在项目根目录创建一个 manifest.json 文件：
-- -------------------- ---- -------
-
------- -------- -----
------------- --------
-------------- --- ----------- --- -----
------------ ----
---------- -------------
------------------- -------
-------------- -------
-------- -
-
------ ---------------------------
-------- ----------
------- -----------
--
-
------ ---------------------------
-------- ----------
------- -----------
-
-
-优化 Angular PWA 应用
- 预缓存资源
Service Worker 在缓存资源的同时，还可以预先缓存一些资源，从而提高性能。我们可以在 angular.json 中配置需要预缓存的文件：
-- -------------------- ---- -------
-
----------- -
--------- -
------------ -
-------- -
---------- -
--------- -
------------------
-------------
-
------- -------
-------- ------------------------------------------------------
--------- --------------------
-
--
-------- -----------------
------- --------------
------------ -------------------
--------- -
-----------------
--
---------- --
--
----------------- -
------------- -
------------------- -
-
---------- ----------------------------------
------- --------------------------------------
-
--
--------------- -----
---------------- ------
------------ ------
------------- -----
-------------- ------
------ -----
------------------ -----
-------------- ------
----------------- -----
---------------- -----
----------------- -----------------------
--------- -
-
------- --------------
-------- ------
--------- ---
--
-
------- ----------------
-------- ------
--------- ---
--
-
------- -------
-------- ------------------------------------------------------
--------- --------------------
--
-
------- --------------
-------- ------
--------- ---
-
-
-
-
-
-
-
-
-需要注意的是，预缓存的文件不能包括当前版本的 index.html 和 ngsw-manifest.json 文件，因为 ServiceWorker 首先会加载这两个文件，如果资源文件过多，可能会导致缓存为空，从而无法完成预缓存。
- 配置缓存策略
可以通过在 ngsw-config.json 文件中配置缓存策略，优化 ServiceWorker 的性能。例如，我们可以配置缓存策略来使用不同的缓存时间，从而更好地平衡性能和存储空间：
-- -------------------- ---- -------
-
---------- ------------------------------------------------------------
-------- --------------
-------------- -
-
------- ------
-------------- -----------
------------ -
-------- -
---------------
--------------
---------
-------
--
------- -
-------------------------------------------------------------------------
-
--
-------------- -
---------- ---
--------- -----
----------- -----------
-
--
-
------- ---------
-------------- -------
------------- -----------
------------ -
-------- -
------------
--
------- --
--
-------------- -
---------- ---
--------- -----
----------- -------------
-
-
-
-- 预先获取信息
ServiceWorker 工作线程被浏览器隔离，无法通过浏览器的 DevTools 进行调试。为了调试 ServiceWorker，我们可以在控制台输出消息：
if (environment.production) {
enableProdMode();
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('ngsw-worker.js')
.then(() => console.log('ServiceWorker ready'))
.catch((error) => console.error('ServiceWorker error', error));
}
}接着在 ServiceWorker 的脚本中添加以下代码，以接收来自控制台的信息：
self.addEventListener('message', (event) => {
if (event.data === 'skipWaiting') {
self.skipWaiting();
}
});最后，我们可以在控制台中使用以下命令获取版本信息：
let registration;
navigator.serviceWorker.getRegistration().then((reg) => registration = reg);
registration.active.postMessage('version');结论
通过本文的学习，我们了解了 Angular PWA 的概念和优势，并掌握了创建和优化 Angular PWA 应用的方法。在实践中，我们可以进一步通过使用路由懒加载、压缩脚本和样式表、使用 HTTPS 等方法来优化我们的应用程序，以满足不同的业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671c90429babaf620fb15621