当我使用Universal在Angular 5中创建我的应用程序以实现服务器端渲染时，我使用TransferState不将我的请求复制到API端点。
我已将我的应用程序升级为Progressive Web APP，但现在浏览器请求所有资源。据我所知，node.js服务器发送的index.html不能发送带状态数据的html。
当应用程序作为PWA使用时，使用TransferState是否合理？
答案 0 :(得分：0)
是的，在Angular中将Transferstate与PWA一起使用是合理的，但有一个警告。
当您首次访问网络应用时，Transferstate将会生效。 Angular Universal将完全呈现与您的URL匹配的视图的html，并按照您的期望发送通过Transferstate检索到的所有数据，以防止在客户端应用加载并再次进行所有相同的API调用时发生“闪光” 。
在后台，服务人员将缓存或主动下载应用程序的其他PWA元素，例如index.html文件。之后，对Webapp的后续访问将完全由现在缓存在浏览器中的PWA处理，从浏览器启动任何API调用，完全绕过服务器端渲染和对transferstate的需求。即使您碰巧以以前从未访问过的路线跳入Web应用程序，也会发生这种情况。
在这种情况下，转移状态的目的是防止在具有PWA功能的浏览器上首次访问Webapp时发生“闪现”，以及随后针对那些不具有PWA功能的浏览器对Webapp进行后续访问时，总是转到Angular Universal服务器。
这里的警告是，不应将transferstate视为唯一可能的数据源。如果您要查找的数据不在传输状态中，则应该始终有一些API可以回退。
一个我的个人经验示例：我正在使用transferstate将从服务器的环境变量读取的配置值发送到浏览器。当PWA接管配置时，找不到位置，因为PWA的index.html中没有传输状态。解决方案是设置一个API端点来服务配置，而不必依赖于传输状态。
上一个答案（此处忽略建议）
在将Transferstate与PWA一起使用时似乎有一个限制。我发现在触发“ DOMContentloaded”触发器时，存储Transfer状态json的脚本标签不在DOM中。
在打开Chrome Devtools的“应用程序”选项卡的“服务工作者”下，取消选中“重新加载时更新”和“绕过网络”框。然后重新加载您的应用程序，观察您可能已经在传输状态中缓存的任何XHR请求实际上是在浏览器中发出的，尽管它们应该已经在服务器端渲染期间发出了。
这并不完美，但一种选择是从ngsw-config.json文件中的任何assetGroups.resources.files数组中删除/index.html条目。这样可以防止您的应用成为具有脱机功能的完整PWA，但仍然具有从服务工作者加载其他资源的好处。