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 将活动的文件集视为新版本。
一个典型的 ngsw.json
例子:
{
"configVersion": 1,
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"updateMode": "prefetch",
"urls": [
"/favicon.ico",
"/index.html",
"/inline.5646543f86fbfdc19b11.bundle.js",
"/main.3bb4e08c826e33bb0fca.bundle.js",
"/polyfills.55440df0c9305462dd41.bundle.js",
"/styles.1862c2c45c11dc3dbcf3.bundle.css"
],
"patterns": []
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"urls": [],
"patterns": []
}
],
"dataGroups": [],
"hashTable": {
"/inline.5646543f86fbfdc19b11.bundle.js": "1028ce05cb8393bd53706064e3a8dc8f646c8039",
"/main.3bb4e08c826e33bb0fca.bundle.js": "ae15cc3875440d0185b46b4b73bfa731961872e0",
"/polyfills.55440df0c9305462dd41.bundle.js": "c3b13e2980f9515f4726fd2621440bd7068baa3b",
"/styles.1862c2c45c11dc3dbcf3.bundle.css": "3318b88e1200c77a5ff691c03ca5d5682a19b196",
"/favicon.ico": "84161b857f5c547e3699ddfbffc6d8d737542e01",
"/index.html": "cfdca0ab1cec8379bbbf8ce4af2eaa295a3f3827"
}
}
这篇好文章是转载于:编程之路
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 编程之路
- 本文地址: /boutique/detail/tanhgkfcfe
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13