简体繁体 English

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

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

原文 2019-01-28 16:00:14 3 1 javascript/ reactjs/ service-worker/ create-react-app

Every code update to the production build shows a white screen to the user until they refresh the page.生产版本的每次代码更新都会向用户显示一个白屏，直到他们刷新页面。 What is the best service worker strategy for code updates to be pushed seamlessly to the user?将代码更新无缝推送给用户的最佳服务工作者策略是什么？ (no page refresh or cache clearing necessary) （无需页面刷新或缓存清除）

The default service worker behavior is not ideal.默认的 Service Worker 行为并不理想。 It seems that every production code update causes the browser to show a white screen until the user manually refreshes the page.似乎每次生产代码更新都会导致浏览器显示白屏，直到用户手动刷新页面。 I understand this may require something along the lines of sw-precache and implementing workbox for custom service worker functionality - that is all fine, and I've tried that out and have gotten those libraries running and working to the point that It still mimics the exact same behavior (so I think the project is essentially ready for the correct service worker to be implemented without ejecting).我知道这可能需要类似于 sw-precache 和为自定义 Service Worker 功能实现工作箱的东西 - 这一切都很好，我已经尝试过了，并且已经让这些库运行并工作到它仍然模仿完全相同的行为（所以我认为该项目基本上已经准备好在不弹出的情况下实施正确的服务工作者）。 However, I'm still lost as to what is the best caching strategies/service worker to use to achieve my desired result?但是，我仍然不知道用于实现我想要的结果的最佳缓存策略/服务工作者是什么？

1 个解决方案

Heyy Timothy!嘿蒂莫西！

I think you already found the answer to your question by now.我想您现在已经找到了问题的答案。 I hope this answer will help future developers in their journey.我希望这个答案能帮助未来的开发人员在他们的旅程中。

The strategies you are referring to are called caching strategies.您所指的策略称为缓存策略。 Here's a list of commonly used ones:以下是常用的列表：

networkOnly – only fetch from the network networkOnly – 仅从networkOnly获取
cacheOnly – only fetch from cache cacheOnly – 仅从缓存中获取
fastest – fetch from both, and respond with whichever comes first fastest - 从两者中获取，并以先到者为准
cacheFirst – fetch from the cache, but also fetch from network and update cache cacheFirst – 从缓存中获取，但也从网络中获取并更新缓存

By default, CRA's service worker uses the cache-first strategy.默认情况下，CRA 的 service worker 使用cache-first策略。

In your case, you have the possibility to choose between 2 strategies:在您的情况下，您可以在两种策略之间进行选择：

networkOnly Strategy networkOnly策略

Pros: Will always render the latest version of the app (No white screen)优点：将始终呈现最新版本的应用程序（无白屏）

Cons: This will cause the user to fetch the app from the network every time.缺点：这将导致用户每次都从网络中获取应用程序。

networkFirst Strategy networkFirst策略

This strategy can be used in your case.此策略可用于您的情况。 You can set your SW to look out for a version update.您可以设置您的软件以查找版本更新。 If a new version is found, you can display a small toaster saying 'Hey there, a new version is available please click here to refresh'如果找到新版本，您可以显示一个小烤面包机，上面写着“嘿，有新版本可用，请单击此处刷新”

You can also check the following links for more information:您还可以查看以下链接以获取更多信息：