create-react-app 的最佳 Service Worker 策略是什么？

Question

生产版本的每次代码更新都会向用户显示白屏，直到用户刷新页面。将代码更新无缝推送给用户的最佳 Service Worker 策略是什么？ （无需刷新页面或清除缓存）

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

Answer 1

嘿蒂莫西！

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

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

• networkOnly – 仅从网络获取
• cacheOnly – 仅从缓存中获取
• fastest – 从两者中获取，并以先到者为准
• cacheFirst – 从缓存中获取，也从网络中获取并更新缓存

默认情况下，CRA 的服务工作者使用cache-first 策略。

在您的情况下，您可以选择两种策略：

• networkOnly策略

优点：将始终呈现最新版本的应用（无白屏）

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

• networkFirst策略

此策略可用于您的情况。您可以将您的软件设置为留意版本更新。如果发现新版本，您可以显示一个小烤面包机，上面写着“嘿，有新版本，请点击此处刷新”

---

您还可以查看以下链接了解更多信息：

• https://serviceworke.rs/caching-strategies.html
• https://blog.bitsrc.io/understanding-service-workers-and-caching-strategies-a6c1e1cbde03
• https://medium.com/@glukmann/let-users-know-when-you-have-updated-your-service-worker-in-create-react-app-b0c2701995b3