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

Question

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

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

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

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

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

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

我们研究了使用 react-router(在其他应用程序中使用)或 aurelia(小尺寸)或 polymer [抱歉 angular，你死于自己的体重] 但这似乎通过添加很多东西来扼杀 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 和服务 worker ，并将 SPA 拆分为 MPA，从而增加拆分每个页面所需资源的好处，而不必下载SPA 工作需要一个巨大的 js 文件。” - PWA 和框架选项。

如果 PWA 是您要寻找的目标，则不需要任何框架。您可以让多个服务人员管理您网站的不同部分/模块，范围不同(例如，“/users/”和“/products/”页面)。但是你需要小心地做这件事，因为我调试多个服务 worker 的经验是一场噩梦。

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

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

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

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

这里有一篇来自 Jake Archibald 的精彩文章:https://jakearchibald.com/2014/offline-cookbook/具有不同的缓存策略。