将 TransferState 与 PWA 一起使用是否合理？
Is it reasonable to use TransferState with PWA?
当我在 Angular 5 中使用 Universal 创建我的应用程序以实现服务器端渲染时，我使用 TransferState 不将我的请求复制到 API 端点。
我已将我的应用程序升级为渐进式 Web 应用程序，但现在浏览器请求所有资源。据我了解，node.js 服务器发送的 index.html 无法发送状态为 html 的数据。
那么当应用程序作为 PWA 时使用 TransferState 是否合理？
是的，在 Angular 中将 Transferstate 与 PWA 一起使用是合理的，但有一个警告。
Transferstate 将在您首次访问 webapp 时生效。 Angular universal 将完全呈现与您的 URL 匹配的视图的 html，并按照您的预期发送通过 Transferstate 检索到的任何数据，以防止 "flash"客户端应用程序加载并再次进行所有相同的 API 调用。
在后台，serviceworker 将缓存或主动下载应用程序的额外 PWA 元素，例如 index.html 文件。之后，对 webapp 的后续访问将完全由现在缓存在浏览器中的 PWA 处理，从浏览器发起任何 API 调用，完全绕过服务器端渲染和传输状态的需要。即使您碰巧在您之前未访问过的路线上跳入 Web 应用程序，也会发生这种情况。
在这种情况下，transferstate 的目的是防止在支持 PWA 的浏览器上首次访问 webapp 时发生的 "flash"，以及随后在不支持 PWA 的浏览器上访问 webapp 时发生的情况因为这些请求将始终转到 Angular 通用服务器。
这里需要注意的是，transferstate 不应被视为唯一可能的数据源。如果您要查找的数据不在传输状态中，则应该始终有一些 API 可以回退。
我个人经验的一个例子：我使用 transferstate 将从服务器环境变量读取的配置值发送到浏览器。当 PWA 接管时，找不到配置，因为 PWA 的 index.html 中没有传输状态。解决方案是设置一个 API 端点来为配置提供服务，而不是依赖于传输状态。
上一个答案（忽略此处的建议）：
在 PWA 中使用 Transferstate 时似乎存在限制。我发现存储 Transferstate json 的脚本标签在 'DOMContentloaded' 触发器触发时不在 DOM 中。
打开 Chrome Devtools 到“应用程序”选项卡，在 'Service Workers' 下取消选中 'Update on reload' 和 'Bypass for network' 框。然后重新加载您的应用程序并观察您可能已缓存在 Transferstate 中的任何 XHR 请求实际上是在浏览器中发出的，尽管它们应该已经在服务器端渲染期间发出。
它并不完美，但一种选择是从您的 ngsw-config.json 文件中的任何 assetGroups.resources.files 数组中删除 /index.html 条目。这可以防止您的应用程序成为具有离线功能的完整 PWA，但它仍然具有从 service worker 加载其他资源的好处。
当我在 Angular 5 中使用 Universal 创建我的应用程序以实现服务器端渲染时，我使用 TransferState 不将我的请求复制到 API 端点。
我已将我的应用程序升级为渐进式 Web 应用程序，但现在浏览器请求所有资源。据我了解，node.js 服务器发送的 index.html 无法发送状态为 html 的数据。
那么当应用程序作为 PWA 时使用 TransferState 是否合理？
是的，在 Angular 中将 Transferstate 与 PWA 一起使用是合理的，但有一个警告。
Transferstate 将在您首次访问 webapp 时生效。 Angular universal 将完全呈现与您的 URL 匹配的视图的 html，并按照您的预期发送通过 Transferstate 检索到的任何数据，以防止 "flash"客户端应用程序加载并再次进行所有相同的 API 调用。
在后台，serviceworker 将缓存或主动下载应用程序的额外 PWA 元素，例如 index.html 文件。之后，对 webapp 的后续访问将完全由现在缓存在浏览器中的 PWA 处理，从浏览器发起任何 API 调用，完全绕过服务器端渲染和传输状态的需要。即使您碰巧在您之前未访问过的路线上跳入 Web 应用程序，也会发生这种情况。
在这种情况下，transferstate 的目的是防止在支持 PWA 的浏览器上首次访问 webapp 时发生的 "flash"，以及随后在不支持 PWA 的浏览器上访问 webapp 时发生的情况因为这些请求将始终转到 Angular 通用服务器。
这里需要注意的是，transferstate 不应被视为唯一可能的数据源。如果您要查找的数据不在传输状态中，则应该始终有一些 API 可以回退。
我个人经验的一个例子：我使用 transferstate 将从服务器环境变量读取的配置值发送到浏览器。当 PWA 接管时，找不到配置，因为 PWA 的 index.html 中没有传输状态。解决方案是设置一个 API 端点来为配置提供服务，而不是依赖于传输状态。
上一个答案（忽略此处的建议）：
在 PWA 中使用 Transferstate 时似乎存在限制。我发现存储 Transferstate json 的脚本标签在 'DOMContentloaded' 触发器触发时不在 DOM 中。
打开 Chrome Devtools 到“应用程序”选项卡，在 'Service Workers' 下取消选中 'Update on reload' 和 'Bypass for network' 框。然后重新加载您的应用程序并观察您可能已缓存在 Transferstate 中的任何 XHR 请求实际上是在浏览器中发出的，尽管它们应该已经在服务器端渲染期间发出。
它并不完美，但一种选择是从您的 ngsw-config.json 文件中的任何 assetGroups.resources.files 数组中删除 /index.html 条目。这可以防止您的应用程序成为具有离线功能的完整 PWA，但它仍然具有从 service worker 加载其他资源的好处。