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

Question

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

在带领团队将现有购物网站从 Angular 1 SPA 转换为多页面应用程序 (MPA) PWA 时，由于 PWA 是一个相当新的概念（对我来说＆ 我的团队）。

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

我们卡住的地方是处理路由和使用浏览器历史 API 进行深度链接的能力，以便页面的每个部分都有一个唯一的 URL 并且可以添加书签。

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

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

我们研究过使用 react-router（在其他应用程序中使用）或 aurelia（小尺寸）或聚合物 [抱歉，你死在自己的体重下] 但这似乎通过添加很多东西来扼杀 PWA 的基本概念仅用于处理导航的代码。

有什么想法吗？

注意：如果相关，应用程序的 90% 的目标受众使用慢速网络 (~3G)。

Answer 1

带着你的顾虑，我想分成三个部分来讨论：

1.“我们被卡住的地方是处理路由和使用浏览器历史 API 进行深度链接的能力，因此页面的每个部分都有一个唯一的 URL 并且可以添加书签。” - SSR 支持

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

• Next.js（非常适合大多数需要 SSR 的应用程序）
• Gatsby（非常适合博客、新闻等静态网站）
• React Helmet（如果你的项目从 create-react-app 或一些没有 SSR 的样板开始，你可能需要这个库）

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

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

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

Google Workbox 也是一个很棒的 PWA 工具，具有很多功能，可以为您节省大量时间来配置 Service Worker。

1. “注意：如果相关，应用程序的 90% 的目标受众在慢速网络 (~3G) 上。” - 缓存策略

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

这是 Jake Archibald 的一篇精彩文章：https://jakearchibald.com/2014/offline-cookbook/，其中包含不同的缓存策略。

Answer 2

如果主要要求是能够与应用程序的每个部分建立深度链接，并且所有内容都可以添加书签，那么 Aurelia 路由器及其子路由器使其对书签非常友好。对于网速慢的顾虑，大概在第一次下载之后，就应该像@MattYao所说的那样了。