Angular 8 - Service Worker 和 PWA

渐进式 Web 应用程序 (PWA) 是普通的 Web 应用程序，几乎没有任何增强功能，其Behave类似于本机应用程序。PWA 应用程序不依赖于网络来工作。PWA 缓存应用程序并从本地缓存渲染它。它定期检查应用程序的实时版本，然后在后台缓存最新版本。

PWA可以像原生应用程序一样安装在系统中，并且可以在桌面上显示快捷方式。即使系统中没有任何可用网络，单击快捷方式也会在具有本地缓存​​的浏览器中打开应用程序。

Angular 应用程序可以转换为 PWA 应用程序。要转换 Angular 应用程序，我们需要使用 Service Worker API。Service Worker 实际上是一个代理服务器，位于浏览器、应用程序和网络之间。

Service Worker 与网页是分开的。它无法访问 DOM 对象。相反，Service Workers 通过PostMessage接口与网页交互。

PWA 应用有两个先决条件。它们如下：

  • 浏览器支持- 尽管许多浏览器支持 PWA 应用程序，但 IE、Opera mini 和其他少数浏览器不提供 PWA 支持。

  • HTTPS 交付- 应用程序需要通过 HTTPS 协议交付。https 支持的一个例外是用于开发目的的localhost。

让我们创建一个新应用程序并将其转换为 PWA 应用程序。

使用以下命令创建一个新的 Angular 应用程序 -

cd /go/to/workspace 
ng new pwa-sample

使用以下命令添加 PWA 支持 -

cd pwa-sample
ng add @angular/pwa --project pwa-sample

构建应用程序的生产版本，

ng build --prod

PWA 应用程序不在 Angular 开发服务器下运行。使用以下命令安装一个简单的网络服务器 -

npm install -g http-server

运行 Web 服务器并将应用程序的生产版本设置为根文件夹。

f the application as root folder.
http-server -p 8080 -c-1 dist/pwa-sample

打开浏览器并输入http://localhost:8080。

现在，转到开发人员工具 -> 网络并选择离线选项。

如果网络设置为离线，普通应用程序将停止工作，但 PWA 应用程序工作正常，如下所示 - 渐进式网页应用