angularjs 将sw-precache与客户端URL路由一起用于单页面应用程序

hsvhsicv 于 2023-10-15 发布在 Angular

关注(0)|答案(2)|浏览(129)

如何配置sw-precache来为多个动态路由提供index.html服务？
这是一个以index.html为入口点的Angular应用程序。目前的设置允许应用程序只能通过/离线访问。因此，如果用户在离线时访问/articles/list/popular作为入口点，他们将无法浏览它，并将得到您的离线消息。（尽管当在线时，他们会在所有请求上提供相同的index.html文件作为入口点）
可以使用dynamicUrlToxicencies来实现这一点吗？或者这需要通过编写单独的SW脚本来处理？像下面这样的东西可以吗？

function serveIndexCacheFirst() {
  var request = new Request(INDEX_URL);
  return toolbox.cacheFirst(request);
}

toolbox.router.get(
   '(/articles/list/.+)|(/profiles/.+)(other-patterns)', 
    serveIndexCacheFirst);

angularjs

来源：https://stackoverflow.com/questions/35597285/using-sw-precache-with-client-side-url-routes-for-a-single-page-app

2条答案

按热度按时间

yqkkidmi1#

您可以使用sw-precache来实现这一点，而无需通过sw-toolbox配置运行时缓存或运行您自己的解决方案。
navigateFallback选项允许您指定一个URL，当您导航到该高速缓存中不存在的URL时，该URL将用作“后备”。它相当于在HTTP服务器中配置一个单一入口点URL，并使用一个URL将所有请求路由到该URL。这在单页应用程序中很常见。
还有一个navigateFallbackWhitelist选项，允许您将navigateFallback行为限制为匹配一个或多个URL模式的导航请求。如果您有一小部分已知路线，并且只希望这些路线触发导航回退，那么它很有用。
有一个例子是作为sw-precache中包含的app-shell-demo的一部分使用的这些选项。
在您的特定设置中，您可能需要：

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

赞(0）回复(0）举报 2023-10-15

jmo0nnb32#

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

赞(0）回复(0）举报 2023-10-15