angularjs – 为单页面应用程序使用带有客户端URL路由的sw-preca

发布时间：2020-12-17 06:48:17 所属栏目：安全来源：网络整理

导读：如何配置sw-precache为多个动态路由提供index.html？这适用于以index.html作为入口点的Angular应用程序. current setup允许应用程序只能通过/离线访问.因此,如果用户在离线时转到/ articles / list / popular作为入口点,他们将无法浏览它并且会给您离线消息

如何配置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);

解决方法

您可以使用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
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!