什么是 PWA？
PWA 是 Progressive Web Apps（渐进式 Web 应用程序）的缩写。PWA 可以让你的 Web 应用程序在不依赖于网络连接的情况下也能够像本地应用程序一样运行。这些应用程序可以离线使用，并且加载速度非常快。
PWA 通常使用 Service Worker，这是一个在后台运行的脚本，可以使应用程序在离线或低信号强度环境中继续运行。使用 PWA 可以大幅度提高 Web 应用程序的性能和用户体验，还可以消除安装应用程序所需的麻烦。
PWA 功能
PWA 的一些功能包括：
- 离线访问
- 快速响应
- 模板化
- 推送通知
- 安装和启动图标
如何创建 PWA
我们可以使用 Angular 8 来创建并构建 PWA。创建 PWA 主要有以下步骤：
1. 安装 Angular CLI
如果你还没有安装 Angular CLI，可以使用下面的命令来安装：
npm install -g @angular/cli
2. 创建 Angular 项目
使用以下命令创建 Angular 项目：
ng new my-pwa-app --routing --style=scss --skipTests=true
3. 集成 PWA 功能
创建完 Angular 项目后，我们需要使用以下命令来添加 PWA 功能：
ng add @angular/pwa
该命令将会添加必要的组件，包括 service worker 和 manifest。
4. 配置 PWA
在 src/app/app.module.ts 文件中，我们需要导入 ServiceWorkerModule：
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';然后在 @NgModule 装饰器的 imports 数组中添加 ServiceWorkerModule：
-- -------------------- ---- -------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
---------------------------------------------- - -------- ---------------------- --
--
---------- ---
---------- --------------
--
------ ----- --------- - -在 angular.json 文件中，我们需要添加以下内容：
-- -------------------- ---- -------
-
------- -
-
------- -------------
---------------- -----
----------------- ----------------------
-
-
-在 src/manifest.webmanifest 文件中，我们必须指定 Web 应用程序的名称、图标等。例如：
-- -------------------- ---- -------
-
------- ---- -----
------------- ---- -----
-------- -
-
------ ------------------------------
------- ------------
-------- -------
--
-
------ ------------------------------
------- ------------
-------- -------
--
-
------ --------------------------------
------- ------------
-------- ---------
--
-
------ --------------------------------
------- ------------
-------- ---------
--
-
------ --------------------------------
------- ------------
-------- ---------
--
-
------ --------------------------------
------- ------------
-------- ---------
--
-
------ --------------------------------
------- ------------
-------- ---------
--
-
------ --------------------------------
------- ------------
-------- ---------
-
--
------------ ----
---------- ------------
-我们还需要在 index.html 文件的 head 标签中添加以下内容：
<link rel="manifest" href="/manifest.webmanifest"> <meta name="theme-color" content="#ffffff"> <meta name="apple-mobile-web-app-title" content="PWA App"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link rel="apple-touch-icon" href="/assets/icons/icon-512x512.png">
5. 构建应用程序
使用以下命令来构建应用程序：
ng build --prod
完成构建后，我们可以使用以下命令来启动应用程序：
ng serve --prod
PWA 的优劣势
PWA 的优劣势如下：
优势
- 提高 Web 应用程序的速度和性能。
- 使应用程序在离线和低网络质量的环境中也能够运行。
- 不需要从应用商店进行下载和安装。
- 可以通过推送通知向用户发送消息，从而提高用户体验和参与度。
劣势
- 一些 PWA 功能可能不适用于所有浏览器。
- 如果用户使用的是旧版浏览器，可能无法使用 PWA。
结论
PWA 是一种很好的方式来提高 Web 应用程序的性能和用户体验，并消除应用商店下载和安装应用程序的麻烦。使用 Angular 8 可以很容易地创建 PWA，并使其离线可用。试试使用 PWA 来提高你的 Web 应用程序的性能吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6775ef386d66e0f9aa076c79