如何配置 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。它是 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
}
关于angularjs - 将 sw-precache 与客户端 URL 路由一起用于单页应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35597285/