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

【问题标题】：How to fix Angular 8 Service Worker Hash mismatch errors when using server-side optimising packages (e.g. Pagespeed Module)使用服务器端优化包（例如 Pagespeed 模块）时如何修复 Angular 8 Service Worker 哈希不匹配错误
【发布时间】：2019-12-05 11:29:39
【问题描述】：

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

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

我不确定哪种代码在这里有用，但这里是我使用的 repo：

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

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

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

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

【问题讨论】：

标签： angular nginx mod-pagespeed angular-service-worker

【解决方案1】：

我对 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]

【讨论】：