预缓存根 url ("/") 的正确方法

Correct way to precache the root url ("/")

我对预缓存根 url 的正确方法有点困惑,即“/”。

如果我使用 webpack-plugin-workbox 生成 precacheManifest,它不包含“/”的条目。 “/index.html”当然包括在内。现在,如果用户加载应用程序,预缓存启动,并且用户尝试在没有网络连接的情况下加载根 url,则站点将不会加载,因为预缓存对根 url 没有任何作用。如果用户尝试加载“/index.html”,一切正常。但是用户不加载 url,他们加载根目录 url。那么如何缓存呢?

我是否应该使用 navigateFallback: index.html 选项,根据我的理解,该选项会将用户重定向到提供的 url 在连接丢失和缓存未命中的情况下?

或者我应该使用 templatedUrls: { "/": [ "index.html" ] } 选项,据我所知, 根据 index.html 生成哈希,然后根据该哈希值的变化缓存“/”?

或者我应该使用一些完全不同的策略?

万分感谢!

默认情况下,当以 / 结尾的 URL 存在初始预缓存未命中时,Workbox 将再次检查其预缓存文件列表以查看是否存在相同 URL 以 /index.html.

结尾

您可以阅读更多相关信息,以及如何自定义默认行为,in the module guide for workbox-precaching

所以...事情应该会像您描述的那样工作,您无需执行任何操作。 (您需要确保在服务工作者激活并控制当前 window 客户端后进行测试。)

如果您没有看到该行为,听起来 Workbox 中可能存在错误,最好在 issue tracker 中跟进更多详情。