5

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

这适用于具有index.html作为入口点的 Angular 应用程序。当前设置仅允许通过/. 因此，如果用户/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);
4

2 回答 2

13

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

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

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

有一个使用这些选项的示例，app-shell-demo其中包括 with sw-precache。

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

{
  navigateFallback: '/index.html',
  // If you know that all valid client-side routes will begin with /articles
  navigateFallbackWhitelist: [/^\/articles/],
  // Additional options
}
于 2016-02-24T21:57:44.913 回答
0

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

于 2016-02-24T11:28:23.267 回答