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

Question

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

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

Answer 1

嘿蒂莫西!

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

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

• networkOnly – 仅从网络获取
• cacheOnly – 仅从缓存中获取
• 最快 – 从两者获取，并以先到者响应
• cacheFirst – 从缓存中获取，但也从网络中获取并更新缓存

默认情况下，CRA 的服务工作线程使用缓存优先策略。

就您的情况而言，您可以选择两种策略:

• 仅网络策略

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

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

• 网络优先策略

此策略可用于您的情况。您可以设置您的软件来查找版本更新。如果发现新版本，您可以显示一个小 toastr ，上面写着“嘿，有新版本可用，请单击此处刷新”

<小时/>

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

• 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