摘要：如何在PWA中处理导航、历史和深度链接而不使用沉重的JS框架？
虽然领导一个团队将现有的购物网站从Angular 1 SPA转换为多页应用程序（MPA）PWA，但我在一些设计决策上遇到了困难，因为PWA是一个相当新的概念（对我和我的团队来说）。
到目前为止，我的理解是，我们可以完全避免任何框架，使用普通的旧javascript和服务工作者，并将SPA拆分为MPA，从而增加了拆分每个页面所需资源的好处，而不必下载SPA工作所需的巨大js文件。
我们遇到的问题是如何处理路由和浏览器历史API的深度链接，以便页面的每个部分都有一个唯一的URL，并可以添加书签。
我们当然可以使用fetch调用来实现这一点，使用JS只更新页面的一部分，并将浏览器状态推到历史记录中，但这似乎是一项大量的工作，我们不应该在2018年这样做。
目前是否已经有一些方法/库/模式解决了这个问题？
我们考虑过使用react-router（在其他应用程序中使用）或奥雷利亚（小尺寸）或聚合物[抱歉，有棱角，你死在自己的体重下]，但这似乎扼杀了PWA的最基本的想法，通过添加大量的代码来处理导航。
有什么想法吗？
注：如果是相关的，90%的应用程序的目标受众是在一个缓慢的网络（~3G）。
2条答案
按热度按时间bwntbbo31#
鉴于大家的关注，我想将其分为三个部分来讨论：
1.“我们遇到的问题是，我们无法通过浏览器历史记录API处理路由和深度链接，因此页面的每个部分都有一个唯一的URL，并且可以添加书签。”- SSR支持
如果你想建立一个合适的网站（比如说从SPA转换），有SEO支持，社交媒体分享功能，你需要做一些额外的SSR（服务器端渲染）工作，并生成静态网页。如果你使用React框架，你可以看看：
2.“到目前为止，我的理解是，我们可以完全避免任何框架，使用普通的旧javascript和服务工作者，并将SPA拆分为MPA，从而增加了拆分每个页面所需资源的好处，而不必下载SPA工作所需的巨大js文件。”- PWA和框架选项。
如果PWA是您正在寻找的目标，您不需要任何框架。您可以让多个服务工作者管理您网站的不同部分/模块，具有不同的范围（例如，“/users/”和“/products/”页面）。但您需要小心地这样做，因为我调试多个服务工作者的经验是一场噩梦。
然后，您可以选择IndexDB来管理API中的数据，并创建适当的索引。
Google Workbox也是PWA的一个很好的工具，它有很多功能，可以为您节省大量的时间来配置您的服务人员。
1.“注意：如果它是相关的，90%的应用程序的目标受众是在一个缓慢的网络（~3G）。”-缓存策略
在这种情况下，你可能需要在设计PWA之前考虑你的缓存策略。我建议你选择“先缓存，后网络”。这样你的用户至少会有一些东西可以看，即使网络很慢，在Lie-fi或离线状态下。
这是一个伟大的文章从杰克阿奇博尔德：https://jakearchibald.com/2014/offline-cookbook/，具有不同的缓存策略。
hivapdat2#
如果主要要求是能够深入链接到应用程序的每个部分，扩展到一切都是书签的能力，Aurelia router与其子路由器使它非常书签友好.对于缓慢的网络需求的关注，可能在第一次下载后，它应该像@MattYao已经说.