O que é o service worker em react js


95

Ao criar um aplicativo de reação, o service worker é invocado por padrão. Por que o service worker é usado? Qual é o motivo da invocação padrão?

Respostas:


108

Você pode não precisar de um service worker para o seu aplicativo. Se você estiver criando um projeto com create-react-app, ele é invocado por padrão

Os trabalhadores de serviço são bem explicados neste artigo. Para resumir a partir disso

Um service workeré um script que seu navegador executa em segundo plano, separado de uma página da web, abrindo a porta para recursos que não precisam de uma página da web ou interação do usuário. Hoje, eles já incluem recursos como push notificationse background synce têm ability to intercept and handle network requests, inclusive programmatically managing a cache of responses.

No futuro, os service workers podem oferecer suporte a outras coisas como periodic syncou geofencing.

De acordo com este PR para criar-reagir-app

Service workerssão introduzidos com create-react-app via SWPrecacheWebpackPlugin.

Usar um trabalhador de servidor com uma estratégia de cache em primeiro lugar oferece vantagens de desempenho, uma vez que a rede não é mais um gargalo para atender às solicitações de navegação. Isso significa, no entanto, que os desenvolvedores (e usuários) verão apenas as atualizações implantadas na visita "N + 1" a uma página, uma vez que os recursos previamente armazenados em cache são atualizados em segundo plano.

A chamada para register service workerestá habilitada por padrão em novos aplicativos, mas você sempre pode removê-la e, em seguida, você volta ao comportamento normal.


2
por enquanto, o app reactjs gerado tem código sw, mas o comentário afirma que a função de registro não é chamada. Então a questão é para onde eu poderia chamá-lo?
Daneel Yaitskov

@ DaneelS.Yaitskov, você pode chamá-lo em um arquivo index.js de nível superior ou semelhante.
Siddhartha

1
@Siddhartha você poderia ser gentil o suficiente para fornecer um exemplo concreto e talvez atualizar a resposta? Achei isso muito útil, mas estou perdendo os detalhes finais. Obrigado.
Ted Stresen-Reuter

19

Em palavras simples e claras, é um script que o navegador executa em segundo plano e não tem qualquer relação com as páginas da web ou o DOM, e fornece recursos prontos para uso. Ele também ajuda a armazenar em cache seus ativos e outros arquivos para quando o usuário estiver offline ou em uma rede lenta.

Alguns desses recursos são proxy de solicitações de rede, notificações push e sincronização em segundo plano. Os service workers garantem que o usuário tenha uma rica experiência offline.

Você pode pensar no service worker como alguém que fica entre o cliente e o servidor e todas as solicitações feitas ao servidor passam pelo service worker. Basicamente, um intermediário. Como todas as solicitações passam pelo service worker, ele é capaz de interceptar essas solicitações em tempo real.

insira a descrição da imagem aqui


7

Eu gostaria de adicionar 2 considerações importantes sobre os prestadores de serviço a serem levados em consideração:

  1. Os prestadores de serviço exigem HTTPS. Mas, para habilitar o teste local, essa restrição não se aplica a localhost. Isso ocorre por motivos de segurança, pois um Service Worker atua como um homem no meio entre o aplicativo da Web e o servidor.

  2. Com Create React App Service Worker só é habilitado no ambiente de produção, por exemplo, durante a execução npm run build.

O Service Worker está aqui para ajudar no desenvolvimento de um Progressive Web App . Um bom recurso sobre isso no contexto do aplicativo Create React pode ser encontrado em seu site aqui .

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.