时间戳

首页 > 解决方案 > 使用服务器端优化包（例如 Pagespeed 模块）时如何修复 Angular 8 Service Worker 哈希不匹配错误

angular - 使用服务器端优化包（例如 Pagespeed 模块）时如何修复 Angular 8 Service Worker 哈希不匹配错误

问题描述

我得到了哈希不匹配错误Error(Hash mismatch (cacheBustedFetchFromNetwork)，因为我实现了一个 PageSpeed 模块，该模块在创建 @angular/service-worker 后编辑文件（顺便说一句很棒的包！）。是否有可能以某种方式让这些工作一起工作？

禁用 PageSpeed 模块（在本地主机上）一切正常，但我想创建一个样板，其中包含多个最佳实践一起工作。我在 Ubuntu 虚拟服务器上运行应用程序和反向代理（ jwilder nginx 代理）容器。

我不确定什么样的代码在这里会有所帮助，但这里是我使用的 repo：

我的应用程序仓库的代码在这里 带有一些编辑设置的反向代理代码在这里

我希望可以有一些自动化的过程来创建服务工作者，同时以正确的顺序进行页面速度优化，但我还无法想象它是如何工作的。

我得到的完整错误消息是：

Clients: 

=== Idle Task Queue ===
Last update tick: 5s342u
Last update run: 342u
Task queue:


Debug log:

[193u] Error(Hash mismatch (cacheBustedFetchFromNetwork): https://raw3.io/index.html: expected 7bd969964be1eec77b1db64c6ca8d6b26759f961, got 89dc3af453c7dacfa5518ff96d8a514c61cde1f1 (after cache busting), Error: Hash mismatch (cacheBustedFetchFromNetwork): https://raw3.io/index.html: expected 7bd969964be1eec77b1db64c6ca8d6b26759f961, got 89dc3af453c7dacfa5518ff96d8a514c61cde1f1 (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://raw3.io/ngsw-worker.js:699:35)
    at Generator.next (<anonymous>)
    at fulfilled (https://raw3.io/ngsw-worker.js:320:62)) Error occurred while updating to manifest 536ad256c5372555c8f73baed2eefa2280c723ae

标签： angularnginxmod-pagespeedangular-service-worker

解决方案

我对 PageSpeed 不熟悉，但快速浏览一下，它似乎可以即时进行优化（并缓存它们以备将来使用）。的当前实现@angular/service-worker不支持服务文件延迟构建工件的场景（将基于该构建工件ngsw.json生成清单文件）。在 Angular 存储库中跟踪此问题存在问题：#23613

如果可以（实际上不是）“离线”运行优化（例如作为构建步骤），您可以ngsw.json通过运行重新生成清单文件（以考虑更新的文件内容）：

node_modules/.bin/ngsw-config path/to/dist/directory path/to/ngsw-config.json [/base/href]

推荐阅读