javascript - O que é service worker em react js

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

Resposta #1

Você pode não precisar de um service worker para sua aplicação. Se você está criando um projeto com create-react-app, ele é invocado por padrão

Os service workers são bem explicados neste artigo. Para resumir a partir dele

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 notificações push e sincronização em segundo plano e têm capacidade de interceptar e lidar com solicitações de rede, incluindo gerenciar programaticamente um cache de respostas.

No futuro, os service workers podem dar suporte a outras coisas como sincronização periódica ou geofencing.

De acordo com este PR para create-react-app

Service workers são introduzidos com o create-react-app através do SWPrecacheWebpackPlugin.

Usar um worker de servidor com uma estratégia de cache-first 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) só verão as atualizações implantadas na visita "N+1" a uma página, já que os recursos previamente armazenados em cache são atualizados em segundo plano.

A chamada para registrar o service worker é habilitada por padrão em novos aplicativos, mas você sempre pode removê-la e então volta ao comportamento normal.

Resposta #2

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

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

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

Resposta #3

Gostaria de adicionar 2 considerações importantes sobre Service Workers a serem levadas em conta:

1. Service Workers exigem HTTPS. Mas para habilitar testes locais, essa restrição não se aplica ao localhost. Isso é por motivos de segurança, pois um Service Worker atua como um homem no meio entre a aplicação web e o servidor.

2. Com o Create React App o Service Worker só é ativado no ambiente de produção, por exemplo, ao executar 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 Create React App pode ser encontrado no site deles aqui.