angularjs - 将 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

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

navigateFallback 选项允许您在导航到缓存中不存在的 URL 时指定要用作“后备”的 URL。它是 Service Worker，相当于在 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
}