create-react-app 的最佳服务工作者策略是什么?

What is the best service worker strategy for create-react-app?

生产版本的每次代码更新都会向用户显示一个白屏,直到他们刷新页面。将代码更新无缝推送给用户的最佳服务工作者策略是什么? (无需刷新页面或清除缓存)

默认的 service worker 行为并不理想。似乎每次生产代码更新都会导致浏览器显示白屏,直到用户手动刷新页面。我知道这可能需要一些类似于 sw-precache 和实现自定义服务工作者功能的工作箱的东西 - 这一切都很好,我已经尝试过并获得了那些库 运行 并且正在努力做到这一点它仍然模仿完全相同的行为(所以我认为该项目基本上已经准备好在不弹出的情况下实施正确的服务工作者)。但是,我仍然不知道什么是最好的缓存 strategies/service worker 来实现我想要的结果?

嗨蒂莫西!

我想您现在已经找到问题的答案了。我希望这个答案能帮助未来的开发者。

您所指的策略称为缓存策略。以下是常用的列表:

  • networkOnly – 仅从网络获取
  • cacheOnly – 只从缓存中获取
  • fastest – 从两者中获取,并以先到者为准进行响应
  • cacheFirst – 从缓存中获取,也从网络中获取并更新缓存

默认情况下,CRA 的 service worker 使用 cache-first 策略。

对于您的情况,您可以在 2 种策略之间进行选择:

  • networkOnly 策略

优点:将始终呈现最新版本的应用程序(无白屏)

缺点:这将导致用户每次都从网络中获取应用程序。

  • networkFirst 策略

您的情况可以使用此策略。您可以设置您的软件以查找版本更新。如果找到新版本,您可以显示一个小烤面包机,上面写着 'Hey there, a new version is available please click here to refresh'


您还可以查看以下链接以获取更多信息: