¿Qué es service worker en react js?


93

Al crear una aplicación de reacción, el service worker se invoca de forma predeterminada. ¿Por qué se utiliza el trabajador de servicio? ¿Cuál es el motivo de la invocación predeterminada?

Respuestas:


105

Es posible que no necesite un trabajador de servicio para su aplicación. Si está creando un proyecto con create-react-app, se invoca de forma predeterminada

Los trabajadores de servicios están bien explicados en este artículo. Para resumir de eso

A service workeres un script que su navegador ejecuta en segundo plano, separado de una página web, lo que abre la puerta a funciones que no necesitan una página web o la interacción del usuario. Hoy en día, ya incluyen características como push notificationsy background syncy tienen ability to intercept and handle network requests, incluido programmatically managing a cache of responses.

En el futuro, los trabajadores de servicios pueden admitir otras cosas como periodic synco geofencing.

Según este PR para create-react-app

Service workersse introducen con create-react-app a través de SWPrecacheWebpackPlugin.

El uso de un trabajador del servidor con una estrategia de caché primero ofrece ventajas de rendimiento, ya que la red ya no es un cuello de botella para cumplir con las solicitudes de navegación. Sin embargo, sí significa que los desarrolladores (y usuarios) solo verán las actualizaciones implementadas en la visita "N + 1" a una página, ya que los recursos almacenados en caché previamente se actualizan en segundo plano.

La llamada a register service workerestá habilitada de forma predeterminada en las nuevas aplicaciones, pero siempre puede eliminarla y luego volverá a su comportamiento habitual.


2
por ahora, la aplicación reactjs generada tiene código sw, pero el comentario indica que no se llama a la función de registro. Entonces la pregunta es ¿dónde podría llamarlo?
Daneel Yaitskov

@ DaneelS.Yaitskov, podría llamarlo en un archivo index.js de nivel superior o similar.
Siddhartha

1
@Siddhartha, ¿podría tener la amabilidad de proporcionar un ejemplo concreto y tal vez actualizar la respuesta? Encontré esto muy útil, pero me faltan esos detalles finales. Gracias.
Ted Stresen-Reuter

17

En palabras simples y sencillas, es un script que el navegador se ejecuta en segundo plano y no tiene relación alguna con las páginas web o el DOM, y proporciona funciones listas para usar. También le ayuda a almacenar en caché sus activos y otros archivos para que cuando el usuario esté desconectado o en una red lenta.

Algunas de estas características son solicitudes de red proxy, notificaciones push y sincronización en segundo plano. Los trabajadores del servicio garantizan que el usuario tenga una rica experiencia sin conexión.

Puede pensar en el trabajador del servicio como alguien que se sienta entre el cliente y el servidor y todas las solicitudes que se realizan al servidor pasan a través del trabajador del servicio. Básicamente, un intermediario. Dado que todas las solicitudes pasan por el trabajador del servicio, es capaz de interceptar estas solicitudes sobre la marcha.

ingrese la descripción de la imagen aquí


6

Me gustaría agregar 2 consideraciones importantes sobre los trabajadores de servicios a tener en cuenta:

  1. Los trabajadores de servicios requieren HTTPS. Pero para habilitar las pruebas locales, esta restricción no se aplica a localhost. Esto es por razones de seguridad, ya que un Service Worker actúa como un intermediario entre la aplicación web y el servidor.

  2. Con Create React App Service Worker solo se habilita en el entorno de producción, por ejemplo, cuando se ejecuta npm run build.

Service Worker está aquí para ayudar a desarrollar una aplicación web progresiva . Un buen recurso al respecto en el contexto de la aplicación Create React se puede encontrar en su sitio web aquí .

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.