Faça o seu trabalho de aplicativo offline com trabalhadores de serviço

Os trabalhadores do serviço podem ser usados ​​para melhorar os tempos de carregamento e suporte offline para seus sites e aplicativos da Web. Neste tutorial, vamos mostrar como aprimorar progressivamente um aplicativo da Web com um trabalhador de serviço. Primeiro vamos cobrir o que é um trabalhador de serviço e como seu ciclo de vida funciona, então mostraremos como usar em seguida, para acelerar seu site (esta página) e oferecer conteúdo off-line (página 2).

Então nós vamos mostrar-lhe como Como construir um aplicativo com trabalhadores de serviço. Você aprenderá como configurar um trabalhador de ossos nus que irá armazenar em cache e servir ativos estáticos (entregando um enorme aumento de desempenho em cargas subseqüentes), então como armazenar respostas de API dinâmicas e dar ao nosso aplicativo de demonstração completo. Primeiro, vamos examinar o que exatamente os trabalhadores do serviço são e como eles funcionam.

Construindo um site? Agilize seu processo com um ótimo Construtor de sites e mantê-lo com um decente hospedagem na web. serviço. E obter seu armazenamento classificado com estes armazenamento na núvem opções.

O que é um trabalhador de serviço?

Então, o que é um trabalhador de serviço? É um script, escrito em Javascript, que seu navegador é executado em segundo plano. Ele não afeta o segmento principal (onde o JavaScript geralmente é executado em uma página da Web), e não entrará em conflito com o seu código de aplicativo ou afeta o desempenho de tempo de execução.

Um trabalhador de serviço não tem acesso direto ao Dom ou eventos e interação do usuário acontecendo na própria página da Web. Pense nisso como uma camada que fica entre a página da Web e a rede, permitindo que ele intercepte e manipule as solicitações de rede (por exemplo, solicitações AJAX) feitas pela sua página. Isso o torna ideal para gerenciar caches e suportar o uso offline.

O ciclo de vida do trabalhador de serviço

A vida de um trabalhador de serviço segue um fluxo simples, mas pode ser um pouco confuso quando você está acostumado com os scripts JS apenas trabalhando imediatamente:

Instalando & GT; Esperando (instalado) & gt; Ativando e GT; Ativado e gt; Redundante

Quando sua página é carregada pela primeira vez, o código de registro que adicionamos a index.html. inicia a instalação do trabalhador do serviço. Quando não há trabalhador existente, o novo funcionário do serviço será ativado imediatamente após a instalação. Uma página da Web só pode ter um trabalhador de serviço ativo por vez.

Se um trabalhador já estiver instalado, o novo funcionário do serviço será instalado e, em seguida, sentará a etapa de espera até que a página esteja totalmente fechada e, em seguida, recarregada. Simplesmente refrescante não é suficiente porque você pode ter outras guias abertas. Você precisa garantir que todas as instâncias da página estejam fechadas caso contrário, o novo trabalhador não será ativado. Você não precisa fechar as guias, você pode apenas navegar para outro site e retornar.

Ambos instalar e ativar Eventos só ocorrerão uma vez por trabalhador. Uma vez ativado, o trabalhador do serviço terá o controle da página e pode começar a manipular eventos, como buscar solicitar solicitações.

Finalmente, um trabalhador de serviço se tornará redundante se o navegador detectar que o próprio arquivo do trabalhador foi atualizado ou se a instalação ou ativação falhar. O navegador procurará uma diferença de bytes para determinar se um script trabalhador foi atualizado.

É importante notar que você nunca deve mudar (ou rev) o nome do seu trabalhador de serviço. Também não deve armazenar em cache o arquivo trabalhador no servidor, pois você não conseguirá atualizá-lo facilmente, embora os navegadores agora são inteligentes o suficiente para ignorar os cabeçalhos de cache.

01. Clone o aplicativo de demonstração

Ok, vamos começar a aprender a construir um aplicativo da Web com a ajuda dos trabalhadores do serviço. Para este tutorial, você precisará de versões recentes de Node.js e NPM instalados no seu computador.

Nós derrubamos um aplicativo de demonstração que usaremos como base para este tutorial ( Clone o aplicativo demo aqui ). O aplicativo é um pequeno projeto divertido que busca a previsão do tempo cinco dias com base na localização do usuário. Vai então verificar se a chuva é prevista antes do final do dia e atualizar a interface do usuário em conformidade.

Ele foi construído ineficientemente (intencionalmente) usando bibliotecas grandes e desnecessárias, como jquery e bootstrap, com grandes imagens não optimisadas para demonstrar a diferença no desempenho ao usar um trabalhador de serviço. Atualmente pesa em um ridículo 4.1MB.

02. Obtenha sua chave de API

Para buscar os dados meteorológicos da API, você precisará obter uma chave de API gratuita Openweathermap. :

Depois de ter sua chave, abra index.html. e procure o window.api_key. variável no & lt; head & gt; . Cole sua chave no valor:

    window.API_KEY = 'paste-your-key-here';

03. Inicie o servidor de desenvolvimento

Agora estamos prontos para começar a trabalhar no projeto. Primeiro de tudo, vamos instalar as dependências executando:

    npm install

Existem duas tarefas para a ferramenta Build. Corre iniciar o npm. Para iniciar o servidor de desenvolvimento na porta 3000. Executar NPM Run Build. para preparar a versão 'produção'. Tenha em mente que esta é apenas uma demonstração, então não é realmente uma versão de produção - não há minificação ou qualquer coisa - os arquivos apenas ficam "revos".

Um algoritmo é usado para criar um hash, como 9C616053E5, a partir do conteúdo do arquivo. O algoritmo sempre produzirá o mesmo hash para o mesmo conteúdo, o que significa que, desde que você não modifique o arquivo, o hash não será alterado. O hash é então anexado ao nome do arquivo, por isso, por exemplo, estilos.css pode se tornar estilos-9C616053E5.css. O hash representa a revisão do arquivo -, portanto, "reviver".

Você pode armazenar em segurança cada revisão do arquivo em seu servidor, sem nunca ter que invalidar seu cache, que é caro ou se preocupar com alguma outra cache de terceiros que servem na versão incorreta.

04. Introduza o seu trabalhador de serviço

Agora vamos começar com o nosso trabalhador de serviço. Crie um arquivo chamado SW.JS na raiz do src. diretório. Em seguida, adicione esses dois ouvintes de eventos para registrar o instalar e ativar Eventos:

 self.addeventlistener ('install', (evento) = & gt; {
      console.log (evento);
    });

    self.addeventlistener ('ativar', (evento) = & gt; {
      console.log (evento);
    }); 

O auto Variável aqui representa o escopo global de leitura global do trabalhador do serviço. É um pouco como o janela objeto em uma página da web.

Em seguida, precisamos atualizar nosso arquivo index.html e adicionar os comandos para instalar o trabalhador do serviço. Adicione este script antes do fechamento & lt; / corpo & gt; marcação. Ele irá registrar nosso trabalhador e registrará seu status atual.

 & lt; script & gt;
     if ('serviceworker' no navegador) {
       Navigator.Servicworker.Register ('/ sw.js')
         .then (função (reg) {
           if (reg.installing) {
             console.log ('instalação do SW');
           } else se (reg.waiting) {
             console.log ('swping');
           } else se (reg.ativo) {
             console.log ('SW ativado');
           }
         }). Catch (função (erro) {
           // registração falhou
           console.log ('Registro falhou com' + erro);
         });
     }
   & lt; / script & gt; 

Comece seu servidor de desenvolvimento executando iniciar o npm. e abra a página em um navegador moderno. Recomendamos usar o Google Chrome, pois tem um bom suporte de service-trabalhador em seus DevTools, que estaremos nos referindo ao longo deste tutorial. Você deve ver três coisas registradas no seu console; dois do trabalhador de serviço para o instalar e ativar eventos, e o outro será a mensagem do registro.

05. Ative o trabalhador

Nós vamos dizer ao nosso trabalhador para pular o passo de espera e ativar agora. Abra o arquivo SW.JS e adicione esta linha em qualquer lugar dentro do instalar Ouvinte do evento:

 self.skipwait (); 

Agora, quando atualizamos o script do trabalhador, ele assumirá o controle da página imediatamente após a instalação. Vale a pena ter em mente que isso pode significar que o novo trabalhador estará assumindo o controle de uma página que pode ter sido carregada por uma versão anterior do seu trabalhador - se isso for causar problemas, não use essa opção no seu aplicativo.

Você pode confirmar isso navegando da página e retornando. Você deve ver o instalar e ativar Eventos disparam novamente quando o novo trabalhador foi instalado.

Chrome DevTools tem uma opção útil que significa que você pode atualizar seu trabalhador apenas por recarregamento. Abra os DevTools e vá para a guia do aplicativo e escolha Trabalhador de serviço da coluna da esquerda. Na parte superior do painel é uma caixa de carrapato rotulada atualizada na recarga, marque-a. Seu trabalhador atualizado será agora instalado e ativado na atualização.

06. Confirme as alterações

Vamos confirmar isso adicionando console.log ('foo') Ligue em qualquer um dos ouvintes do evento e atualizando a página. Isso nos pegou porque estávamos esperando ver o log no console quando nós atualizamos, mas tudo o que estávamos vendo foi a mensagem 'SW ativada'. Acontece que Chrome atualiza a página duas vezes quando a opção Update on Reload é marcada.

Você pode confirmar isso marcando a caixa de ticket preservar o painel de configurações do console e refrescante novamente. Você deve ver a instalação e ativar os eventos registrados, junto com 'foo', seguido por 'navegado para http: // localhost: 3000 /' para indicar que a página foi recarregada e, em seguida, então a mensagem final 'SW ativada'.

07. Acompanhe o evento de busca

Hora de adicionar outro ouvinte. Desta vez vamos rastrear o buscar Evento que é demitido toda vez que a página carrega um recurso, como um arquivo CSS, imagem ou até mesmo a resposta da API. Nós abriremos um cache, devolveremos a resposta de solicitação à página e, em seguida, - no fundo - cache a resposta. Primeiramente, vamos adicionar o ouvinte e atualização para que você possa ver o que acontece. No console, você deve ver muitos Fetchevent. Histórico.

 self.addeventlistener ('fetch', (evento) = & gt; {
 console.log (evento);
}); 

Nosso modo de saque usa Browsersync, que adiciona seu próprio script à página e torna as solicitações do WebSocket. Você verá os fetchevents por isso também, mas queremos ignorar isso. Também queremos apenas cache obter solicitações de nosso próprio domínio. Então vamos adicionar algumas coisas para ignorar pedidos indesejados, incluindo explicitamente ignorando o / caminho de índice:

 self.addeventlistener ('fetch', (evento) = & gt; {
 // ignore pedidos de crossdomain
 if (! event.request.url.startswith (self.location.origin)) {
   Retorna;
 }
 // ignorar solicitações não get
 if (event.request.method! == 'get') {
   Retorna;
 }
 // ignore o navegador-sincronizar
 if (event.request.url.indexof ('navegador-sync') & gt; -1) {
   Retorna;
 }
 // Impedir a rota do índice sendo armazenada em cache
 if (event.request.url === (self.location.origin + '/')) {
   Retorna;
 }
 // impedir index.html sendo armazenado em cache
 if (event.request.url.endswith ('index.html')) {
   Retorna;
 }
 console.log (evento);
}); 

Agora os logs devem ser muito mais limpos e é seguro começar o cache.

08. Cache os ativos

Agora podemos começar em cachar essas respostas. Primeiro, precisamos dar o nosso cache um nome. Vamos ligar para o nosso ativos v1. . Adicione esta linha ao topo do arquivo SW.JS:

 Conta ContaCacheName = 'V1-ativos'; 

Então precisamos seqüestrar os fetchevents para que possamos controlar o que é devolvido à página. Podemos fazer isso usando o evento respondeu método. Este método aceita uma promessa para que possamos adicionar este código, substituindo o console.log. :

 // Diga ao buscar para responder com essa cadeia promessa
 event.respondwith (
   // abre o cache
   caches.open (ativoscachename)
     .then ((cache) = & gt; {
       // torna a solicitação para a rede
       Return Fetch (event.request)
         .then ((resposta) = & gt; {
           // cache a resposta
           cache.put (event.request, response.clone ());
           // retorna a resposta original à página
           resposta de retorno;
         });
     })
 ); 

Isso encaminhará a solicitação para a rede e armazenará a resposta no cache, antes de enviar a resposta original de volta para a página.

Vale a pena notar aqui que essa abordagem não armazena em cache as respostas até a segunda vez que o usuário carrega a página. A primeira vez instalará e ativará o trabalhador, mas no momento em que o buscar O ouvinte está pronto, tudo já terá sido solicitado.

Atualize um par de vezes e verifique o cache no DevTools & GT; Guia de aplicação. Expanda a árvore de armazenamento de cache na coluna da esquerda e você verá seu cache com todas as respostas armazenadas.

09. Sirva do cache

Tudo é armazenado em cache, mas não estamos realmente usando o cache para atender a qualquer arquivo ainda. Vamos ligar isso agora. Primeiro, procuraremos uma partida para o pedido no cache e se existir, vamos servir isso. Se não existir, usaremos a rede e cache a resposta.

// Diga ao buscar para responder a esta cadeia
 event.respondwith (
   // abre o cache
   caches.open (ativoscachename)
     .then ((cache) = & gt; {
       // Procure solicitação de correspondência no cache
       retorno cache.match (event.request)
         .then ((correspondido) = & gt; {
           // Se uma correspondência for encontrada, retorne a versão em cache primeiro
           if (correspondido) {
             retorno correspondido;
           }
           // Caso contrário, continue para a rede
           Return Fetch (event.request)
             .then ((resposta) = & gt; {
               // cache a resposta
               cache.put (event.request, response.clone ());
               // retorna a resposta original à página
               resposta de retorno;
             });
         });
     })
); 

Salve o arquivo e atualize. Verifique devtools & gt; Tabela de rede e você deve ver (do Serviceworker) listado na coluna Tamanho para cada um dos ativos estáticos.

Phew, terminamos. Para uma quantidade tão pequena de código, há muito a entender. Você deve ver que atualizar a página quando todos os ativos forem armazenados em cache é bastante mal-humorado, mas vamos fazer uma verificação rápida (não científica) de carregamento em uma conexão acelerada (DevTools & GT; guia de rede).

Sem o trabalhador de serviço, o carregamento sobre uma rede rápida de 3G simulada leva quase 30 segundos para tudo para carregar. Com o trabalhador de serviço, com a mesma conexão simplificada, mas carregando do cache, leva apenas abaixo de um segundo.

Verifique a caixa offline e atualize e você também verá que a página é carregada sem uma conexão, embora não possamos obter os dados de previsão da API. Na página 2, vamos voltar a isso e aprender como cache a resposta da API também.

Próxima Página: Use Trabalhador de Serviço para oferecer acesso on-line

• 1.
• 2.

Pagina atual: Página 1: Carregamento mais rápido