摘要：如何在不使用沉重的JS框架的情况下处理PWA中的导航，历史记录和深层链接？
在带领团队将现有的购物网站从Angular 1 SPA转换为多页应用程序（MPA）PWA时，我陷入了一些设计决策中，在这些决策中我几乎不需要帮助，因为PWA是一个相当新的概念（对我来说＆ 我的团队）。
到目前为止，我的理解是我们可以完全避免使用任何框架，而可以使用简单的旧javascript和服务工作者，并将SPA拆分为MPA，从而增加了拆分每个页面所需资源的好处，而不必下载大量的js。 SPA工作所需的文件。
我们遇到的问题是能够处理浏览器历史记录API的路由和深度链接，以便页面的每个部分都有唯一的URL并可以添加书签。
我们可以肯定地使用fetch调用，使用JS更新页面的一部分并将浏览器状态推向历史记录来进行管理，但这似乎是很多工作，我们不应该在2018年这样做。
是否已经有一些解决该问题的方法/库/模式？
我们调查了使用react-router（在其他应用程序中使用）或aurelia（小尺寸）或聚合物[对不起，您在自己的体重下死亡]，但是这似乎通过添加大量内容来杀死PWA的基本概念代码只是为了处理导航。
有什么想法吗？
注意：如果相关性很高，该应用程序的目标受众中有90％位于慢速网络（〜3G）上。
答案 0 :(得分：2)
关于您的关注，我想分为三个部分进行讨论：
1。“我们遇到的问题是能够处理浏览器历史记录API的路由和深度链接，以便页面的每个部分都有唯一的URL并可以添加书签。” -SSR支持
如果您想通过SEO支持，社交媒体共享功能正确构建网站（例如从SPA转换），则需要为SSR（服务器端渲染）做一些额外的工作并生成静态网页。如果您使用React框架，则可以查看：
2。”到目前为止，我的理解是，我们可以完全避免使用任何框架，并使用普通的旧javascript和服务工作者，并将SPA拆分为MPA，从而增加了拆分每个页面所需资源的好处，而不必下载SPA正常工作需要一个巨大的js文件。” -PWA和框架选项。
如果您要寻找PWA，则不需要任何框架。您可以有多个服务人员，以不同的范围来管理网站的不同部分/模块（例如，“ / users /”和“ / products /”页面）。但是您需要仔细地执行此操作，因为我调试多个服务人员的经历是一场噩梦。
并分别缓存每个部分的应用程序外壳（捆绑包，css，图像等）。然后，您可以选择IndexDB来管理API中的数据并创建适当的索引。
Google Workbox也是PWA的绝佳工具，具有许多功能，可以节省大量时间来配置服务人员。
在这种情况下，您可能需要在设计PWA之前考虑您的缓存策略。我建议使用“首先缓存，然后网络”。因此，即使网络很慢，在Lie-fi或脱机情况下，您的用户也至少需要看一下。
这是杰克·阿奇博尔德（Jake Archibald）的精彩文章：https://jakearchibald.com/2014/offline-cookbook/，具有不同的缓存策略。
答案 1 :(得分：0)
如果主要要求是能够深度链接到应用程序的每个部分，并扩展到所有内容都可以添加书签，则Aurelia路由器及其子路由器使其非常易于收藏书签。对于网络需求缓慢的担忧，可能是在首次下载后，就像@MattYao所述。