关于 Angular PWA 应用中的 ngsw.json 文件

简介: 关于 Angular PWA 应用中的 ngsw.json 文件

将 Angular Service Worker 想象为安装在最终用户的 Web 浏览器中的前向缓存(Forward Cache)或内容交付网络 (CDN) 边缘。Service Worker 响应 Angular 应用程序对本地缓存中的资源或数据的请求,而无需等待网络。

与任何缓存一样,Service Worker 缓存具有内容过期和更新方式的规则。

关于应用版本的概念

在 Angular Service Worker 这个特殊的上下文中,版本是代表 Angular 应用程序的特定构建的资源集合。 每当部署应用程序的新 build 时,Service Worker 都会将该构建,视为应用程序的新版本。 即使只更新一个文件也是如此。 在任何给定时间,Service Worker 可能在其缓存中拥有多个版本的应用程序,并且可能同时为它们提供服务。

为了保持应用程序的完整性,Angular Service Worker 将所有文件组合成一个版本。 分组为一个版本的文件通常包括 HTML、JS 和 CSS 文件。 这些文件的分组对于完整性至关重要,因为 HTML、JS 和 CSS 文件经常相互引用并依赖于特定内容。 例如,一个 index.html 文件可能有一个引用 bundle.js 的 <script> 标记,它可能会尝试从该脚本中调用函数 startApp()。 每次提供此版本的 index.html 时,都必须提供相应的 bundle.js。 例如,假设 startApp() 函数在两个文件中都重命名为 runApp()。 在这种情况下,将调用 startApp() 的旧 index.html 与定义 runApp() 的新包一起提供是无效的。

这种文件完整性在延迟加载模块时尤其重要。 一个 JS 包可能会引用许多惰性块,并且惰性块的文件名对于应用程序的特定构建是唯一的。 如果正在运行的版本 X 的应用程序尝试加载延迟块,但服务器已经更新到版本 X + 1,则延迟加载操作将失败。

应用程序的版本标识由所有资源的内容决定,如果其中任何一个发生变化,它就会发生变化。 实际上,版本由 ngsw.json 文件的内容决定,该文件包括所有已知内容的哈希值。 如果任何缓存文件发生更改,则 ngsw.json 中文件的哈希值会更改。 此更改导致 Angular Service Worker 将活动的文件集视为新版本。


相关文章
|
23天前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
12 0
|
27天前
|
存储 JSON NoSQL
解锁JSON的奇妙世界:从基础到高级应用,一文搞懂JSON的妙用(下)
解锁JSON的奇妙世界:从基础到高级应用,一文搞懂JSON的妙用(下)
|
27天前
|
JSON 前端开发 JavaScript
解锁JSON的奇妙世界:从基础到高级应用,一文搞懂JSON的妙用(上)
解锁JSON的奇妙世界:从基础到高级应用,一文搞懂JSON的妙用(上)
解锁JSON的奇妙世界:从基础到高级应用,一文搞懂JSON的妙用(上)
|
2月前
|
JSON 程序员 数据格式
深入探索 “JSON for Modern C++“:安装、构建与应用
深入探索 “JSON for Modern C++“:安装、构建与应用
41 0
|
27天前
|
JSON JavaScript 前端开发
解锁JSON的奇妙世界:从基础到高级应用,一文搞懂JSON的妙用(中)
解锁JSON的奇妙世界:从基础到高级应用,一文搞懂JSON的妙用(中)
|
23天前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
14 1
|
22天前
|
XML JSON JavaScript
Java中XML和JSON的比较与应用指南
本文对比了Java中XML和JSON的使用,XML以自我描述性和可扩展性著称,适合结构复杂、需验证的场景,但语法冗长。JSON结构简洁,适用于轻量级数据交换,但不支持命名空间。在Java中,处理XML可使用DOM、SAX解析器或XPath,而JSON可借助GSON、Jackson库。根据需求选择合适格式,注意安全、性能和可读性。
28 0
|
23天前
|
JavaScript 前端开发 开发工具
Angular 项目中一个 index.d.ts 文件的具体例子介绍
Angular 项目中一个 index.d.ts 文件的具体例子介绍
16 0
|
27天前
|
JavaScript 前端开发 开发者
Angular 项目里 tsconfig.schematics.json 文件的作用
Angular 项目里 tsconfig.schematics.json 文件的作用
9 0
|
28天前
|
XML JSON JavaScript
使用JSON和XML:数据交换格式在Java Web开发中的应用
【4月更文挑战第3天】本文比较了JSON和XML在Java Web开发中的应用。JSON是一种轻量级、易读的数据交换格式,适合快速解析和节省空间,常用于API和Web服务。XML则提供更强的灵活性和数据描述能力,适合复杂数据结构。Java有Jackson和Gson等库处理JSON,JAXB和DOM/SAX处理XML。选择格式需根据应用场景和需求。

热门文章

最新文章