Javascript 什么是react js中的service worker

What is service worker in react js

提问by usergs

When creating a react app, service worker is invoked by default. Why service worker is used? What is the reason for default invoking?

创建 React 应用程序时，默认调用 Service Worker。为什么使用 Service Worker？默认调用的原因是什么？

回答by Shubham Khatri

You may not need a service worker for your application. If you are creating a project with create-react-app it is invoked by default

您的应用程序可能不需要 Service Worker。如果您使用 create-react-app 创建项目，则默认情况下会调用它

Service workers are well explained in thisarticle. To Summarise from it

服务人员在很好的解释这个文章。从中总结

A service workeris a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notificationsand background syncand have ability to intercept and handle network requests, including programmatically managing a cache of responses.

In the future, service workers might support other things like periodic syncor geofencing.

Aservice worker是浏览器在后台运行的脚本，与网页分开，为不需要网页或用户交互的功能打开大门。今天，它们已经包括像push notifications和这样的特性，background sync并且有 ability to intercept and handle network requests，包括 programmatically managing a cache of responses。

将来，Service Worker 可能会支持其他东西，例如 periodic sync或geofencing。

According to this PR to create-react-app

根据这个PR 来 create-react-app

Service workersare introduced with create-react-app via SWPrecacheWebpackPlugin.

Using a server worker with a cache-first strategy offers performance advantages, since the network is no longer a bottleneck for fulfilling navigation requests. It does mean, however, that developers (and users) will only see deployed updates on the "N+1" visit to a page, since previously cached resources are updated in the background.

Service workers通过 create-react-app 引入 SWPrecacheWebpackPlugin。

使用具有缓存优先策略的服务器工作者可提供性能优势，因为网络不再是满足导航请求的瓶颈。然而，这确实意味着开发人员（和用户）只会在“N+1”访问页面时看到已部署的更新，因为之前缓存的资源是在后台更新的。

The call to register service workeris enabled by default in new apps but you can always remove it and then you're back to regular behaviour.

register service worker在新应用程序中默认启用调用，但您可以随时将其删除，然后您就会恢复正常行为。

回答by Nikz

In simple and plain words, it's a script that browser runs in the background and has whatsoever no relation with web pages or the DOM, and provide out of the box features. It also helps you cache your assets and other files so that when the user is offline or on slow network.

简单来说，就是一个浏览器后台运行的脚本，与网页或DOM没有任何关系，提供开箱即用的功能。它还可以帮助您缓存资产和其他文件，以便在用户离线或网络缓慢时使用。

Some of these features are proxying network requests, push notifications and background sync. Service workers ensure that the user has a rich offline experience.

其中一些功能是代理网络请求、推送通知和后台同步。Service Worker 确保用户拥有丰富的离线体验。

You can think of the service worker as someone who sits between the client and server and all the requests that are made to the server pass through the service worker. Basically, a middle man. Since all the request pass through the service worker, it is capable to intercept these requests on the fly.

您可以将 Service Worker 视为位于客户端和服务器之间的人，所有向服务器发出的请求都通过 Service Worker。基本上，一个中间人。由于所有请求都通过 Service Worker，因此它能够即时拦截这些请求。

回答by Anouar

I'd like to add 2 important considerations about Service Workers to take into account:

我想添加关于 Service Worker 的 2 个重要注意事项以供考虑：

1. Service Workers require HTTPS. But to enable local testing, this restriction doesn't apply to localhost. This is for security reasons as a Service Worker acts like a man in the middlebetween the web application and the server.

2. With Create React AppService Worker is only enabled in the production environment, for example when running npm run build.

1. Service Worker 需要 HTTPS。但是要启用本地测试，此限制不适用于localhost. 这是出于安全原因，因为 Service Worker 就像处于 Web 应用程序和服务器之间的中间人。

2. 使用Create React AppService Worker 仅在生产环境中启用，例如在运行npm run build.

Service Worker is here to help developing a Progressive Web App. A good resource about it in the context of Create React App can be found in their website here.

Service Worker 是来帮助开发渐进式 Web 应用程序的。在 Create React App 的上下文中可以找到关于它的一个很好的资源，可以在他们的网站上找到。