Angular8教程

Angular8 Service Workers

渐进式 Web 应用程序 (PWA) 是普通的 Web 应用程序,几乎没有增强功能和 b就像本机应用程序一样。 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 开发服务器下运行。使用以下命令安装一个简单的 Web 服务器-
npm install-g http-server
运行 Web 服务器并将应用程序的生产版本设置为根文件夹。
f the application as root folder.
http-server-p 8080-c-1 dist/pwa-sample
打开浏览器并输入 http://localhost:8080。
现在,转到 Developer tools-> Network 并选择 Offline 选项。
如果网络设置为离线,则正常应用程序停止工作,但 PWA 应用程序工作正常,如下所示- PWA
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4