关于前端:关于-Angular-PWA-应用中的-ngswjson-文件

25次阅读

共计 1855 个字符，预计需要花费 5 分钟才能阅读完成。

将 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"
  }
}

正文完