angular - 离线时使用非基本 URL 打开单页应用 PWA

Question

让我们以一个使用单页应用程序 (SPA) 框架（如 Angular - https://www.ngcolombia.com ）构建的 PWA（渐进式 Web 应用程序）为例。

1. 打开网站。
2. 导航到不同的页面，例如：https ://www.ngcolombia.com/speakers 。
3. 离线并点击重新加载 - 该网站将无法加载。

如果我们尝试从基本 URL 重新加载它可以工作，但在单页应用程序中，通常从具有完整 URL 的不同页面重新加载。

如何解决这个问题，似乎特定于 SPA PWA？

Answer 1

当使用Application Shell 架构时（通常是单页应用程序中的情况），您通常希望服务工作人员使用缓存的 App Shell HTML 响应所有导航请求，无论 URL 是什么。

您可以使用以下navigationUrls选项配置 Angular 的服务工作者：https ://angular.io/guide/service-worker-config#navigationurls

这种方法不需要在您的 URL 中使用哈希值——您可以继续使用真实的 URL 和 History API。