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

Question

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

这适用于具有index.html入口点的Angular应用程序.在当前设置允许该应用只能通过是accessable下线/.因此,如果用户/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.它是服务工作者,相当于在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
}