Angular Service Worker - 在 dist/styles.*.css 上的 PurifyCSS 后哈希不匹配
Angular Service Worker - hash mismatch after PurifyCSS on dist/styles.*.css
当我使用 service worker 构建 Angular 应用程序时,它会创建一个散列 table,其中包含每个文件的散列,以检测何时有新版本的应用可用。此散列 table 在 ngsw.json.
中
这里是散列值的例子。
如果我想用 PurifyCSS 清理未使用的 css,那么 dist/styles.*.css 将更改文件内容并因此更改其哈希值,但 ngsw.json 具有旧哈希。
在这种情况下,angular service worker 将失败,因为哈希不匹配。
如何避免这种情况?我应该在 运行 PurifyCSS 之后手动更新 ngsw.json 中的散列吗?是否有某种机制可以自动更新此值,或者可以在 angular-cli 为每个文件生成哈希之前执行 PurifyCSS?
这个问题一般是针对服务工作者缓存的dist文件进行的任何类型的修改,因为散列会改变,因此会出现散列不匹配。这意味着服务工作者将无法工作。
提前谢谢你。
我刚刚 运行 解决了我 Angular Service Worker 的那个问题。我通过艰难的方式了解到它(有趣的事实:NGSW 不会在离线模式下工作,也不会缓存结果)。
无论如何,这是我解决这个问题的方法。
由于 Angular 在 .js dist 输出中内联组件的 CSS,Angular 输出的独立 .css 文件包含任何全局样式(即 styles.css
),例如 Bootstrap CSS。我所做的是 运行 净化 CSS 并将清理后的输出复制到 src/styles.css
。这样您就不必在构建后对 ngsw.json
进行任何 SHA1 散列修改。缺点是无论何时添加依赖于不同 Bootstrap 选择器的模块,您都需要重做此过程。
不幸的是,这有点笨拙,但我还没有找到将净化过程集成到 'prebuild' 过程中的方法。
我在官方 Angular 文档中发现了一些非常有用的东西。在对 dist 文件夹中的文件进行所需的所有修改后,您可以使用简单的命令重新创建 ngsw.json 文件。
./node_modules/.bin/ngsw-config ./dist/<project-name> ./ngsw-config.json [/base/href]
这会重新生成 ngsw.json 并且 service worker 再次正常工作。
当我使用 service worker 构建 Angular 应用程序时,它会创建一个散列 table,其中包含每个文件的散列,以检测何时有新版本的应用可用。此散列 table 在 ngsw.json.
中这里是散列值的例子。
如果我想用 PurifyCSS 清理未使用的 css,那么 dist/styles.*.css 将更改文件内容并因此更改其哈希值,但 ngsw.json 具有旧哈希。
在这种情况下,angular service worker 将失败,因为哈希不匹配。
如何避免这种情况?我应该在 运行 PurifyCSS 之后手动更新 ngsw.json 中的散列吗?是否有某种机制可以自动更新此值,或者可以在 angular-cli 为每个文件生成哈希之前执行 PurifyCSS?
这个问题一般是针对服务工作者缓存的dist文件进行的任何类型的修改,因为散列会改变,因此会出现散列不匹配。这意味着服务工作者将无法工作。
提前谢谢你。
我刚刚 运行 解决了我 Angular Service Worker 的那个问题。我通过艰难的方式了解到它(有趣的事实:NGSW 不会在离线模式下工作,也不会缓存结果)。
无论如何,这是我解决这个问题的方法。
由于 Angular 在 .js dist 输出中内联组件的 CSS,Angular 输出的独立 .css 文件包含任何全局样式(即 styles.css
),例如 Bootstrap CSS。我所做的是 运行 净化 CSS 并将清理后的输出复制到 src/styles.css
。这样您就不必在构建后对 ngsw.json
进行任何 SHA1 散列修改。缺点是无论何时添加依赖于不同 Bootstrap 选择器的模块,您都需要重做此过程。
不幸的是,这有点笨拙,但我还没有找到将净化过程集成到 'prebuild' 过程中的方法。
我在官方 Angular 文档中发现了一些非常有用的东西。在对 dist 文件夹中的文件进行所需的所有修改后,您可以使用简单的命令重新创建 ngsw.json 文件。
./node_modules/.bin/ngsw-config ./dist/<project-name> ./ngsw-config.json [/base/href]
这会重新生成 ngsw.json 并且 service worker 再次正常工作。