离线时使用非基本 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 architecture（通常是单页应用程序中的情况）时，您通常希望服务工作人员使用缓存的应用程序响应所有导航请求，无论 URL 是什么外壳 HTML。

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

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