举报投诉联系我们 手机版 热门标签 鳄鱼CMS
您的位置:鳄鱼CMS > angular service worker Angular Service Worker和PWA-入门

angular service worker Angular Service Worker和PWA-入门

2023-06-12 23:31 Angular13

angular service worker Angular Service Worker和PWA-入门

angular service worker

Angular Service Worker 是一个用于构建离线应用的框架,它可以帮助开发者创建和部署高性能的应用。它是一个轻量级的 JavaScript 库,可以在浏览器中运行,并且可以在服务端上运行。它使用 Service Worker API 来处理请求,并将其存储在本地缓存中。

Angular Service Worker 允许开发者创建高性能的应用,而不必担心服务端的性能问题。它使用 Service Worker API 来处理请求,并将其存储在本地缓存中。这样就可以减少对服务端的依赖,同时提高应用的性能。此外,Angular Service Worker 还允许开发者使用 Webpack 打包应用程序,从而减少文件大小并提高性能。

Angular Service Worker 还允许开发者使用 HTTP/2 和 HTTP/3 协议来传输数据。这些协议允许开发者利用多个 TCP 连接来传输数据,从而大大减少了传输时间。此外,Angular Service Worker 还允许开发者使用 WebSocket 和 WebRTC 等新协议来传递数据,这样就可以大大减少传递时间并更好地利用带宽。

Angular Service Worker 还允许开发者使用 Push API 来向客户端推送通知或信息。Push API 使得开发者能够向特定的客户端或所有客户端向后端服务器请求数据或信息。此外,Angular Service Worker 还允许开发者使用 Background Sync API 来将数据后端服务器上传到前端应用中去。

// 代码片断 
const sw = new AngularServiceWorker(); 
sw.register();  //注冊 service worker 
sw.unregister(); //泊銷 service worker 

Angular Service Worker和PWA-入门

Service Worker 快速上手

本文档解释了如何在 ​Angular CLI​ 项目中启用对 Angular Service Worker 的支持。稍后它会用一个简单的范例来向你展示 Service Worker 实践,包括加载和基础的缓存功能。

前提条件

对 Angular Service Worker 简介中的信息有了基本的了解。

为你的项目添加 Service Worker

要让你的项目支持 Angular Service Worker,可以使用 CLI 命令 ​ng add @angular/pwa​。它会添加 ​@angular/service-worker​ 包,并建立必要的支持文件,小心翼翼地配置你的应用,以便使用 Service Worker。

ng add @angular/pwa --project <project-name>

上述命令完成了如下步骤:

  1. 把 @angular/service-worker 添加到你的项目中。
  2. 在 CLI 中启用 Service Worker 的构建支持。
  3. 在应用模块中导入并注册 Service Worker。
  4. 修改 ​index.html​ 文件:
    • 包含要添加到 ​manifest.webmanifest​ 文件中的链接。
    • 为 ​theme-color​ 添加 meta 标签。
  5. 创建图标文件,以支持安装渐进式应用(PWA)。
  6. 创建一个名叫 ​ngsw-config.json​ 的 Service Worker 配置文件,它会用来指定缓存的行为以及其它设定。
  7. 现在,构建本项目:

ng build

现在,这个 CLI 项目就可以使用 Angular Service Worker 了。

Service Worker 实战:向导

本节用一个范例应用来演示一下 Service Worker 实战。

用 http-server 启动开发服务器

由于 ​ng serve​ 对 Service Worker 无效,所以必须用一个独立的 HTTP 服务器在本地测试你的项目。可以用任何 HTTP 服务器。下面这个例子使用来自 npm 中的 http-server 包。为了减小端口冲突的可能性,我们在一个专用端口上进行测试。

要想使用 ​http-server​ 在包含这些 web 文件的目录上启动服务,运行下列命令:

http-server -p 8080 -c-1 dist/<project-name>

最初的加载

在服务器运行起来之后,你可以在浏览器中访问 ​<http://localhost:8080/>​。你的应用像通常一样加载。

提示:
当测试 Angular Service Worker 时,最好使用浏览器中的隐身或隐私窗口,以确保 Service Worker 不会从以前的残留状态中读取数据,否则可能导致意外的行为。
注意:
如果没有使用 HTTPS,那么 Service Worker 只会在 ​localhost ​上的应用中进行注册。

模拟网络出问题

要想模拟网络出问题的情况,可以为你的应用禁用网络交互。在 Chrome 中:

  1. 选择 Tools > Developer Tools(从右上角的 Chrome 菜单)。
  2. 进入 Network 页。
  3. 在 Throttling 下拉菜单中选择 Offline 复选框。


现在,本应用不能再和网络进行交互了。

对于那些不使用 Angular Service Worker 的应用,现在刷新将会显示 Chrome 的“网络中断”页,提示“没有可用的网络连接”。

有了 Angular Service Worker,本应用的行为就不一样了。刷新时,页面会正常加载。

看看 Network 页,来验证此 Service Worker 是激活的。


注意:
在 “Size” 列中,请求的状态是 ​(ServiceWorker)​。 这表示该资源不是从网络上加载的,而是从 Service Worker 的缓存中。

什么被缓存了?

注意,浏览器要渲染的所有这些文件都被缓存了。​ngsw-config.json​ 样板文件被配置成了要缓存 CLI 用到的那些文件:

  • index.html
  • favicon.ico
  • 构建结果(JS 和 CSS 包)
  • assets ​下的一切
  • 图片和字体直接位于所配置的 outputPath (默认为 ​./dist/<project-name>/​) 或 ​resourcesOutputPath ​下。
注意如下两个关键点:
  1. 所生成的 ​ngsw-config.json​ 包括一个可缓存字体和图像的有限列表。在某些情况下,你可能要按需修改这些 glob 模式。
  2. 如果在生成了配置文件之后修改了 ​resourcesOutputPath ​或 ​assets ​的路径,那么就要在 ​ngsw-config.json​ 中手动修改这些路径。

修改你的应用

现在,你已经看到了 Service Worker 如何缓存你的应用,接下来的步骤讲它如何进行更新。

  1. 如果你正在隐身窗口中测试,请打开第二个空白页。这会让该隐身窗口和缓存的状态在测试期间持续活着。
  2. 关闭该应用的页面,而不是整个窗口。这也会同时关闭开发者工具。
  3. 关闭 ​http-server​。
  4. 打开 ​src/app/app.component.html​ 以供编辑。
  5. 把文本 ​Welcome to {{title}}!​ 改为 ​Bienvenue à {{title}}!​。
  6. 再次构建并运行此服务器:
ng build
http-server -p 8080 -c-1 dist/<project-name>

在浏览器中更新你的应用

现在,看看浏览器和 Service Worker 如何处理这个更新后的应用。

  1. 再次在同一个窗口中打开 http://localhost:8080,发生了什么?

  2. 错在哪里?哪里也没错,真的。Angular Service Worker 正在做自己的工作,并且用它已经安装过的版本提供服务,虽然,已经有新版本可用了。由于更关注速度,所以 Service Worker 并不会在启动它已经缓存过的版本之前先等待检查更新。

    看看 ​http-server​ 的 log,就会发现 Service Worker 请求了 ​/ngsw.json​ 文件,这是 Service Worker 正在检查更新。

  3. 刷新页面。

  4. Service Worker 在后台安装好了这个更新后的版本,下次加载或刷新页面时,Service Worker 就切换到最新的版本了。


阅读全文
以上是鳄鱼CMS为你收集整理的angular service worker Angular Service Worker和PWA-入门全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 鳄鱼CMS eyucms.com 版权所有 联系我们