离线时使用非基础 URL 打开单页应用程序 PWA

Question

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

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

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

的不同页面重新加载

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

Answer 1

当使用 Application Shell architecture 时（通常在单页应用程序中就是这种情况），您通常希望 service worker 做的是响应所有导航请求，而不管 URL，你的缓存应用 Shell HTML.

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

这种方法不需要在您的 URL 中使用散列——您可以继续使用真实的 URL 和历史记录 API。