【问题标题】:What is service worker in react jsreact js中的service worker是什么
【发布时间】:2018-08-25 03:29:36
【问题描述】:

在创建 React 应用时,默认会调用 Service Worker。为什么使用 Service Worker?默认调用的原因是什么?

【问题讨论】:

  • 以下所有答案都没有提到为什么默认将服务工作者添加到 React 构建中。答案都在谈论什么是服务工作者。但是如果 99% 的应用程序都没有使用它,为什么要将默认设置设置为 true。

标签: javascript reactjs service-worker


【解决方案1】:

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

this 文章中很好地解释了服务工作者。从中总结

service worker 是您的浏览器在 背景,与网页分开,打开功能之门 不需要网页或用户交互。今天,他们已经 包括 push notificationsbackground sync 等功能,并具有 ability to intercept and handle network requests,包括 programmatically managing a cache of responses

将来,Service Worker 可能会支持其他事情,例如 periodic syncgeofencing

据此PR to create-react-app

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

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

在新应用中默认启用对register service worker 的调用,但您始终可以将其移除,然后您将恢复正常行为。

【讨论】:

  • 目前生成的 reactjs 应用程序具有 sw 代码,但注释指出未调用注册函数。所以问题是我可以在哪里称呼它?
  • @DaneelS.Yaitskov,您可以在顶级 index.js 文件或类似文件中调用它。
  • @Siddhartha 你能否提供一个具体的例子,也许更新答案?我发现这非常有用,但我错过了最后的细节。谢谢。
  • 当我在 nginx 服务器上部署应用程序时,service worker 工作正常吗?
【解决方案2】:

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

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

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

【讨论】:

    【解决方案3】:

    我想补充两个关于 Service Worker 的重要注意事项:

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

    2. 使用 Create React App Service Worker 仅在生产环境中启用,例如在运行 npm run build 时。

    Service Worker 在这里帮助开发Progressive Web App。可以在他们的网站here 中找到有关 Create React App 上下文的一个很好的资源。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-10-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-12-12
      • 2017-01-01
      相关资源
      最近更新 更多