Angular Service Worker - 在 dist/styles.*.css 上的 PurifyCSS 之后哈希不匹配

Question

当我使用 Service Worker 构建 Angular 应用程序时，它会创建一个包含每个文件的哈希值的哈希表，以检测应用程序的新版本何时可用。该哈希表位于 ngsw.json 中。

这是哈希值的示例。

如果我想使用 PurifyCSS 清理未使用的 css，则 dist/styles.*.css 将更改文件内容及其哈希值，但 ngsw.json 具有旧哈希值。

在这种情况下，Angular Service Worker 将失败，因为存在哈希不匹配。

如何避免这种情况？运行 PurifyCSS 后是否应该在 ngsw.json 中手动更新哈希？是否有某种机制可以自动更新此值，或者可以在 angular-cli 为每个文件生成哈希之前执行 PurifyCSS？

这个问题通常针对对服务工作者缓存的 dist 文件进行的任何类型的修改，因为哈希会改变，因此会出现哈希不匹配。这意味着 Service Worker 将无法工作。

提前谢谢您。

Answer 1

我发现了 Angular 官方文档中出现的一些非常有用的东西。对 dist 文件夹中的文件进行所有所需的修改后，您可以使用简单的命令重新创建 ngsw.json 文件。

./node_modules/.bin/ngsw-config ./dist/<project-name> ./ngsw-config.json [/base/href] 这会重新生成 ngsw.json 并且 Service Worker 再次正常工作。

https://angular.io/guide/service-worker-config

Answer 2

我刚刚在我的 Angular Service Worker 中遇到了这个问题。我通过惨痛的经历了解到了这一点（有趣的事实：NGSW 无法在离线模式下工作，也不会缓存结果）。

无论如何，这就是我解决这个问题的方法。

由于 Angular 在 .js dist 输出中内联组件的 CSS，因此 Angular 输出的独立 .css 文件包含任何全局样式（即

styles.css

），例如 Bootstrap CSS。我所做的就是运行 purifyCSS 并将清理后的输出复制到 

src/styles.css

 中。这样您就不必在构建后在 

ngsw.json

 中进行任何 SHA1 哈希修改。缺点是，每当您添加依赖于不同 Bootstrap 选择器的模块时，您都需要重做此过程。

不幸的是，这有点笨拙，但我还没有找到一种方法将净化过程集成到“预构建”过程中。

Answer 3

在构建步骤中使用 Sentry 在 vercel 上部署应用程序时，我遇到了类似的问题。结果是，sentry 在 js 文件中添加了注释，用于跟踪 sha1 校验和的更改。最终像这样修改了我的

package.json

：

"scripts" {
   "build": "ng build --configuration production && npm run sentry:sourcemaps && npm run ngsw:generate",
   "sentry:sourcemaps": "sentry-cli sourcemaps inject ...",
   "ngsw:generate": "npx ngsw-config dist/app/browser ./ngsw-config.json",
   ...
}