2

当我使用 service worker 构建 Angular 应用程序时,它会使用每个文件的哈希值创建一个哈希表,以检测应用程序的新版本何时可用。这个哈希表在 ngsw.json 中。

这是哈希值的示例。

有桌子

如果我想用 PurifyCSS 清理未使用的 css,那么 dist/styles.*.css 将改变文件内容,因此它的哈希值,但 ngsw.json 有旧的哈希值。

在这种情况下,角度服务工作者将失败,因为会有哈希不匹配。

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

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

先感谢您。

4

2 回答 2

2

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

./node_modules/.bin/ngsw-config ./dist/<project-name> ./ngsw-config.json [/base/href]

这将重新生成 ngsw.json 并且服务工作者再次正常工作。

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

于 2020-08-24T14:02:49.013 回答
0

我刚刚在使用 Angular Service Worker 时遇到了这个问题。我很难了解它(有趣的事实:NGSW 不会在离线模式下工作,也不会缓存结果)。

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

由于 Angular 在 .js dist 输出中内联组件的 CSS,因此 Angular 输出的独立 .css 文件包含任何全局样式(即styles.css),例如 Bootstrap CSS。我所做的是运行 purifyCSS 并将清理后的输出复制到src/styles.css. 这样您就不必ngsw.json在构建后进行任何 SHA1 哈希修改。缺点是每当你添加一个依赖于不同 Bootstrap 选择器的模块时,你都需要重做这个过程。

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

于 2020-08-24T02:33:03.047 回答