Os usuários esperam que os apps sejam iniciados de maneira confiável em conexões de rede lentas ou instáveis. mesmo off-line. Eles esperam o conteúdo com que interagiram mais recentemente, como faixas de mídia ou ingressos e itinerários, para que estejam disponíveis e usáveis. Quando uma solicitação não é possível, eles esperam que o aplicativo os diga em vez de falhas ou travamentos silenciosos. E eles querem que tudo isso aconteça rapidamente. Conforme como em Milissegundos ganham milhões, até mesmo uma melhoria de 0,1 segundo nos tempos de carregamento pode melhorar a conversão em até 10%. Os service workers são a ferramenta que permite que seu Progressive Web App (PWA) tenha dos seus usuários as expectativas da equipe.
Quando um aplicativo solicita um recurso abrangido pelo escopo do service worker, o O service worker intercepta a solicitação e age como um proxy de rede, mesmo se o usuário está off-line. Ele pode, então, decidir se deve exibir o recurso da cache usando a API Cache Storage, disponibilize-o pela rede como se não houvesse service worker ativo ou crie-o com um algoritmo local. Isso permite que você fornecem uma experiência de alta qualidade como a de um app de plataforma, mesmo quando seu app está off-line.
Registrar um service worker
Antes que um service worker assuma o controle da sua página, ele deve ser registrado para seu PWA. Isso significa que, na primeira vez que um usuário abre seu PWA, toda a rede vão diretamente para seu servidor, porque o service worker não tem das suas páginas.
Depois de verificar se o navegador oferece suporte à API Service Worker, seu PWA pode registrar um service worker. Após o carregamento, o service worker se configura entre seu PWA e a rede, interceptando solicitações e disponibilizando os as respostas correspondentes.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
Verificar se um service worker está registrado
Para verificar se um service worker está registrado, use as ferramentas para desenvolvedores na sua navegador favorito.
Nos navegadores Firefox e Chromium (Microsoft Edge, Google Chrome ou Samsung Internet):
- Abra as ferramentas para desenvolvedores e clique na guia Aplicativo.
- No painel esquerdo, selecione Service Workers.
- Verifique se o URL do script do service worker aparece com o status "Ativado". Para mais informações, consulte Ciclo de vida. No Firefox, o status pode ser "Em execução" ou "Interrompido".
No Safari:
- Clique em Desenvolver > Service Workers.
- Verifique no menu se há uma entrada com a origem atual. Clicando na entrada abre um inspetor sobre o contexto do service worker.
Escopo
A pasta em que o service worker se encontra determina o escopo. Um service worker
que está em example.com/my-pwa/sw.js pode controlar qualquer navegação em ou abaixo
o caminho my-pwa, como example.com/my-pwa/demos/. Os service workers podem
controlam somente itens (páginas, workers, coletivamente "clientes") em seu escopo.
Este escopo se aplica a guias do navegador e janelas do PWA.
Somente um service worker é permitido por escopo. Quando um service worker está ativo e em execução, apenas uma instância costuma estar disponível, não importa quantos clientes (janelas de PWA ou guias do navegador) ficam na memória.
O Safari tem um gerenciamento de escopo mais complexo, conhecido como partições, que afeta a funcionam com iframes de vários domínios. Para saber mais sobre o da implementação, consulte a postagem do blog.
Ciclo de vida
Os service workers têm um ciclo de vida que determina como eles são instalados separadamente da instalação do PWA.
O ciclo de vida do service worker começa com o registro do service worker. A
navegador tenta fazer o download e analisar o arquivo do service worker. Se estiver analisando
for bem-sucedido, o evento install do service worker será disparado. O evento install
é disparada apenas uma vez.
A instalação do service worker ocorre silenciosamente, sem necessidade de permissão do usuário, mesmo que o usuário não tenha instalado o PWA. A API Service Worker está disponível mesmo em plataformas que não oferecem suporte à instalação de PWA, como Safari e Firefox em dispositivos desktop.
Após a instalação, o service worker precisa ser ativado antes de poder
controlar os clientes dele, incluindo o PWA. Quando o service worker estiver pronto para
controlar seus clientes, o evento activate é disparado. No entanto, por padrão, um
O service worker ativado não pode gerenciar a página que o registrou até o próximo
sempre que você acessar a página recarregando a página ou reabrindo o PWA.
É possível detectar eventos no escopo global do service worker usando o self
objeto:
serviceworker.js
// This code executes in its own worker or thread
self.addEventListener("install", event => {
console.log("Service worker installed");
});
self.addEventListener("activate", event => {
console.log("Service worker activated");
});
Atualizar um service worker
Os service workers são atualizados quando o navegador detecta que o service worker controlando o cliente e a nova versão do arquivo do service worker a partir do são diferentes em bytes.
Após uma instalação bem-sucedida, o novo service worker espera para ser ativado até o service worker antigo não controla mais nenhum cliente. Esse estado é chamado "esperando", e é como o navegador garante que apenas uma versão do quando um service worker está em execução.
Atualizar uma página ou reabrir o PWA não vai fazer o novo service worker demorar controle O usuário precisa fechar ou sair de todas as guias e janelas usando o service worker atual e depois navegar de volta para dar ao novo service worker controle Para mais informações, consulte O ciclo de vida do service worker.
Vida útil do service worker
Um service worker instalado e registrado pode gerenciar todas as solicitações dentro do escopo. Ele é executado no próprio thread, com ativação e encerramento controlado pelo navegador, o que permite que ele funcione mesmo antes da abertura do PWA após ele fechar. Os service workers são executados na própria linha de execução, mas no estado na memória pode não persistir entre as execuções de um service worker, portanto, reutilizar para cada execução está disponível no IndexedDB ou em algum outro armazenamento permanente.
Se ainda não estiver em execução, um service worker será iniciado sempre que uma solicitação de rede é enviado no escopo ou quando recebe um evento de gatilho, como um uma sincronização em segundo plano ou uma mensagem push.
Os service workers serão encerrados se ficarem inativos por alguns segundos ou se elas estiveram ocupados há muito tempo. O tempo necessário para isso varia de acordo com o navegador. Se um o service worker for encerrado e ocorrer um evento que vai iniciá-lo. ela será reiniciada.
Recursos
Um service worker registrado e ativo usa uma linha de execução com uma o ciclo de vida de execução da linha de execução principal do PWA. No entanto, por padrão, O arquivo do service worker em si não tem comportamento. Ele não armazena em cache nem veicula recursos; o código precisa fazer isso. Você descobrirá como capítulos seguintes.
Os recursos do service worker não servem apenas para servir como proxy ou solicitações HTTP. Outros recursos estão disponíveis sobre ele para outras finalidades, como plano de fundo execução de código, notificações push da Web e pagamentos de processos. Vamos discutir essas adições em Capabilities.