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选项允许您指定用作＆＃34;后备＆＃34;每当您导航到缓存中不存在的URL时。它是服务工作者，相当于在HTTP服务器中配置单个入口点URL，并使用通配符将所有请求路由到该URL。这显然适用于单页应用。

还有navigateFallbackWhitelist选项，可让您将navigateFallback行为限制为与一个或多个网址格式匹配的导航请求。如果您有一小组已知路线，并且只希望这些路线触发导航回退，那么它非常有用。

这些选项的一个示例是[{3}}的一部分，其中包括sw-precache。

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

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

Answer 2

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

对单个页面应用程序使用带有客户端URL路由的sw-precache

2 个答案: