将 sw-precache 与客户端 URL 路由一起用于单页应用

Question

如何配置 sw-precache 以服务 index.html 多个动态路由？

这适用于以 index.html 作为入口点的 Angular 应用。 current setup 允许应用程序只能通过 / 离线访问。因此，如果用户在离线时转到 /articles/list/popular 作为入口点，他们将无法浏览它，并且会收到您离线的消息。（虽然在线时他们会在所有请求上获得相同的 index.html 文件作为入口点）

dynamicUrlToDependencies可以用来做这个吗？或者这是否需要通过编写单独的 SW 脚本来处理？像下面这样的东西可以吗？

function serveIndexCacheFirst() {
  var request = new Request(INDEX_URL);
  return toolbox.cacheFirst(request);
}

toolbox.router.get(
   '(/articles/list/.+)|(/profiles/.+)(other-patterns)', 
    serveIndexCacheFirst);

Answer 1

是的，我认为您可以使用 dynamicUrlToDependencies，如 directoryIndex 选项的文档中所述：https://github.com/GoogleChrome/sw-precache#directoryindex-string.

Answer 2

您可以为此使用 sw-precache，而无需通过 sw-toolbox 配置运行时缓存或推出您自己的解决方案。

navigateFallback 选项允许您在导航到缓存中不存在的 URL 时指定要用作 "fallback" 的 URL .它是相当于在您的 HTTP 服务器中配置单个入口点 URL 的服务工作者，使用通配符将所有请求路由到该 URL。这显然在单页应用中很常见。

还有一个 navigateFallbackWhitelist 选项，它允许您将 navigateFallback 行为限制为匹配一个或多个 URL 模式的导航请求。如果您有一小部分已知路线，并且只希望这些路线触发导航回退，这将很有用。

作为 app-shell-demo 的一部分使用这些选项的示例包含在 sw-precache 中。

在您的特定设置中，您可能需要：

{
  navigateFallback: '/index.html',
  // If you know that all valid client-side routes will begin with /articles
  navigateFallbackWhitelist: [/^\/articles/],
  // Additional options
}

将 sw-precache 与客户端 URL 路由一起用于单页应用

Using sw-precache with client-side URL routes for a single page app

web-technologies

angularjs

service-worker

sw-precache