Angular SSR 和 PWA 结合起来使用的一些现象观察

简介: Angular SSR 和 PWA 结合起来使用的一些现象观察

观察到的现象


部署 SSR 服务器,浏览器端发起请求,请求10次,发现只有第一次请求被 SSR 服务器处理了。其他 9 次请求没有落到 SSR 服务器上。


结论


第一个页面访问是由源站(SSR/CDN)渲染的。


然后 - 由于 PWA 功能(或者更准确地说:Service Worker),所有主要 assets(如 shell index.html、javascript 文件等)都由浏览器中的 Service Worker 缓存。


因此,对于后续页面访问(刷新),请求被浏览器中的 Service Worker 拦截并立即返回,而无需离开浏览器。


这就是为什么我们在随后的 9 个页面访问中看不到任何流量的原因。


Service Workers 非常适合提升 Web 应用的用户体验,因为它使得页面加载速度更快。但是对于开发人员来说,Service Worker 有时给开发人员的调试带来了麻烦。


有时我们可能需要手动 uninstall 在第一个页面访问期间 install 的 Service Worker。


例如当我们在重新加载页面时故意想要访问原始服务器(SSR)时。


以下是从站点卸载 Service Worker 的方法:

打开 Chrome 开发工具 -> 顶部选项卡 [应用程序] -> 左侧菜单 [存储] -> 在右侧面板中单击按钮 [清除站点数据]

顺便提一句。 在单击 [清除站点数据] 之前,请确保选中下面的复选框:

31297162f7e33c59bae9d3bc36551a32.png

另一个选项是在浏览器中禁用 Javascript.


这样就不会发生 CSR,也不会发生 Service Worker 注册。


然后刷新页面后,总是会命中 SSR 服务器。


ngsw-worker.js 是 Angular Service Worker 的核心文件,用于实现离线缓存、预缓存、动态更新和推送通知等功能。


具体来说,ngsw-worker.js 主要有以下功能:


离线缓存:使用 CacheStorage API 将应用程序资源缓存到客户端,当应用程序处于离线状态时,可以从缓存中加载资源,以实现离线访问。


预缓存:在应用程序第一次加载时,将应用程序所需的所有资源缓存到客户端,以提高应用程序的性能和速度。


动态更新:在后台更新应用程序时,使用 ServiceWorkerRegistration.update() 方法获取更新的资源,并将它们缓存到客户端。当用户重新访问应用程序时,将使用更新的资源替换旧的资源。


推送通知:使用 Push API 和 Notification API 向客户端发送推送通知。


通过使用 ngsw-worker.js,可以将 Angular 应用程序转换为渐进式 Web 应用程序(PWA),从而提高应用程序的性能、速度和可用性。当用户第一次访问应用程序时,浏览器会下载和缓存 ngsw-worker.js 文件,并在后续的访问中使用缓存数据来提高性能和速度。

相关文章
|
11月前
|
缓存 JSON 前端开发
Angular 应用启用 PWA 特性的 Angular CLI 命令行
Angular 应用启用 PWA 特性的 Angular CLI 命令行
|
20天前
|
Java 数据库 API
JSF与JPA的史诗级联盟:如何编织数据持久化的华丽织锦,重塑Web应用的荣耀
【8月更文挑战第31天】JavaServer Faces (JSF) 和 Java Persistence API (JPA) 分别是构建Java Web应用的用户界面组件框架和持久化标准。结合使用JSF与JPA,能够打造强大的数据驱动Web应用。首先,通过定义实体类(如`User`)和配置`persistence.xml`来设置JPA环境。然后,在JSF中利用Managed Bean(如`UserBean`)管理业务逻辑,通过`EntityManager`执行数据持久化操作。
32 0
|
20天前
|
Java 数据库连接 数据库
强强联手!JSF 与 Hibernate 打造高效数据访问层,让你的应用如虎添翼,性能飙升!
【8月更文挑战第31天】本文通过具体示例详细介绍了如何在 JavaServer Faces (JSF) 应用程序中集成 Hibernate,实现数据访问层的最佳实践。首先,创建一个 JSF 项目并在 Eclipse 中配置支持 JSF 的服务器版本。接着,添加 JSF 和 Hibernate 依赖,并配置数据库连接池和 Hibernate 配置文件。然后,定义实体类 `User` 和 DAO 类 `UserDAO` 处理数据库操作。
43 0
|
4月前
|
缓存 JavaScript 前端开发
关于 Angular PWA 应用中的 ngsw.json 文件
关于 Angular PWA 应用中的 ngsw.json 文件
51 1
|
4月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
|
4月前
|
缓存 JavaScript 前端开发
Angular PWA 应用什么情况下会出现 504 error
Angular PWA 应用什么情况下会出现 504 error
|
10月前
|
缓存 UED
如何删除 Angular SSR 应用 State Transfer 嵌入到 HTML 里的某些字段
如何删除 Angular SSR 应用 State Transfer 嵌入到 HTML 里的某些字段
|
10月前
|
Web App开发 缓存 前端开发
Angular 应用支持 PWA(Progressive Web Application) 特性的开发步骤分享
Angular 应用支持 PWA(Progressive Web Application) 特性的开发步骤分享
|
10月前
|
存储 JSON 前端开发
关于 Angular SSR 应用 index.html 中的 serverApp-state script 元素
关于 Angular SSR 应用 index.html 中的 serverApp-state script 元素
|
10月前
|
JSON 搜索推荐 数据格式
Angular SSR 应用中 serverApp-state script 的工作原理介绍
Angular SSR 应用中 serverApp-state script 的工作原理介绍