Javascript PWA路由和深度链接SPA或无SPA、框架或无框架

总结：如何在不使用繁重的JS框架的情况下处理PWA中的导航、历史记录和深度链接

在领导团队将现有购物网站从Angular 1 SPA转换为多页面应用程序（MPA）PWA的过程中，我遇到了一些设计决策，我几乎不需要帮助，因为PWA是一个相当新的概念（对我和我的团队而言）

到目前为止，我的理解是，我们可以完全避免任何框架，使用普通的老javascript和服务人员，将SPA拆分为MPA，从而增加了拆分每个页面所需资源的好处，而不必下载SPA工作所需的巨大js文件

我们陷入困境的一点是，能够使用浏览器历史API处理路由和深度链接，这样页面的每个部分都有一个唯一的URL，并且可以添加书签

我们当然可以使用fetch调用来管理这一点，使用JS只更新页面的一部分，并将浏览器状态推到历史记录，但这似乎需要做很多工作，我们不应该在2018年这样做

是否已经有一些方法/库/模式在野外解决了这个问题

我们考虑过使用react路由器（在其他应用程序中使用）或aurelia（小尺寸）或polymer[抱歉，你死在自己的体重下]，但这似乎扼杀了PWA的基本理念，因为添加了大量代码只是为了处理导航

有什么想法吗

---

注意：如果是相关的，应用程序90%的目标受众都在慢速网络上（~3G）。

考虑到您的担忧，我想将其分为三个部分进行讨论：

1.“我们陷入困境的一点是，我们能够通过浏览器历史API处理路由和深度链接，这样页面的每个部分都有一个唯一的URL，并且可以添加书签。”-SSR支持

如果你想通过SEO支持、社交媒体共享功能正确地构建一个网站（比如从SPA转换），你需要为SSR（服务器端渲染）和生成静态网页做一些额外的工作。如果使用React框架，您可以查看：

• （适用于大多数需要SSR的应用）
• （适用于博客、新闻等静态网站）
• （如果您的项目从CreateReact应用程序或一些没有SSR的样板文件开始，您可能需要此库）

2.“到目前为止，我的理解是，我们完全可以避免任何框架，使用普通的老javascript和服务人员，将SPA拆分为MPA，从而增加了拆分每个页面所需资源的好处，而不必下载SPA工作所需的巨大js文件。”-PWA和框架选项

如果PWA是您正在寻找的目标，那么您不需要任何框架。您可以让多个服务人员使用不同的范围（例如，“/users/”和“/products/”页面）管理网站的不同部分/模块。但您需要小心地执行此操作，因为我调试多个服务人员的经验是一场噩梦

并分别缓存每个部分的应用程序外壳（包、css、图像等）。然后，您可以选择IndexDB来管理API中的数据并创建适当的索引

对于PWA来说，它也是一个很好的工具，具有很多特性，可以为您节省大量的时间来配置您的服务人员

“注意：如果相关的话，90%的应用程序目标用户都在慢速网络上（~3G）。”-缓存策略

在此情况下，在设计PWA之前，您可能需要考虑缓存策略。我建议使用“先缓存，然后网络”。因此，即使网络速度很慢，无论是在无线网络还是离线网络，您的用户也至少可以看到一些东西

---

杰克·阿奇博尔德（Jake Archibald）的一篇精彩文章：使用不同的缓存策略。

如果主要要求是能够深入链接到应用程序的每个部分，那么从某种程度上说，所有内容都可以添加书签，Aurelia路由器及其子路由器使其非常方便添加书签。考虑到缓慢的网络需求，可能在第一次下载之后，它应该像@MattYao所说的那样。

对于3G，你也指一些低成本的Android设备？