Angular 8 - Service Worker 和 PWA

渐进式 Web 应用程序 (PWA) 是普通的 Web 应用程序，几乎没有任何增强功能，其行为类似于本机应用程序。 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。

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