在dist/style上的PurifyCSS之后，角度服务工作者散列不匹配。*..css

Question

当我使用服务工作者构建Angular应用程序时，它会创建一个哈希表，其中包含每个文件的哈希值，以检测何时有新版本的应用程序可用。这个哈希表是ngsw.json格式的。

这是一个哈希值的例子。

​

​

如果我想用PurifyCSS清理未使用的css，那么dist/style.*.css将更改文件内容，从而更改其散列，但ngsw.json具有旧的散列。

在这种情况下，angular服务工作者将失败，因为将存在散列不匹配。

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

这个问题通常适用于对服务工作者缓存的dist文件进行的任何类型的修改，因为散列将更改，因此将存在散列不匹配。这意味着服务工作者不会工作。

提前谢谢你。

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选择器的模块，你都需要重做这个过程。

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