PWA Service Worker para Leigos

O fato é que o service worker tem um papel importante a desempenhar nos próximos anos e, quanto mais rápido você se familiarizar com essa nova tecnologia, melhor poderá se ajustar a esse novo futuro da Web.

É por isso que, para ajudá-lo a conhecer melhor essa nova tecnologia, vamos conversar juntos sobre service workers – o que é, o que traz para a Web, como podemos nos preparar melhor para essa nova tecnologia de a teia.

O que é um trabalhador de serviço?

Definições

Considerado universalmente como a tecnologia que faz ou quebra os PWAs, o service worker é uma API que é executada independentemente do navegador e responsável pela interceptação da rede – e por causa disso, ele pode fazer muitas coisas que antes eram impossíveis na Web. Sites (geralmente PWAs) controlados por service workers podem ter uma integração mais profunda com o dispositivo em uso e, consequentemente, trazer mais recursos de hardware e recursos semelhantes a aplicativos para a Web (por exemplo, notificações push, sincronização em segundo plano e muito mais).

Como funciona

Em poucas palavras. service worker é essencialmente uma camada baseada em eventos entre o navegador e o servidor que intercepta, modifica e trata as solicitações de rede de saída:

E como o service worker é baseado em eventos , ele responde e se comunica apenas por meio de eventos e usa promessas para informar quando uma operação está concluída. No entanto, todo o recebimento de eventos (por exemplo, fetch e push ) só é possível quando o service worker está ativo , o que indica quando o navegador reconhece e registra o service worker (e também quando o próprio service worker finalizou a instalação com sucesso) . De forma simplificada, este é o ciclo de vida típico de um service worker:

Além disso, anote todos esses eventos disponíveis no service worker:

Todos os eventos funcionais ( fetch , sync e push ) devem ser autoexplicativos para você, pois são os eventos que compõem quase todos os recursos progressivos característicos do PWA (ou seja, recursos offline, sincronização em segundo plano, notificações push).

 Leitura recomendada: O que é PWA? Tudo o que você precisa saber sobre aplicativos da Web progressivos

Restrições aos trabalhadores de serviço

Como este é um script que é executado independentemente do navegador, existem algumas restrições:

• Protocolo HTTPS : os service workers devem ser executados em sites baseados em HTTPS

• Sem acesso a localStorage , DOM e a janela.
• scope limitado : os service workers só podem operar no scope do diretório atual (e subdiretórios) em que o service-worker.js está localizado.
• Assíncrono : os service workers são assíncronos por natureza, contando com APIs baseadas em Promise.

O que os service workers significam para o PWA

Como dito anteriormente, o service worker é a espinha dorsal do PWA, sem o qual muitos dos recursos revolucionários do PWA simplesmente não são possíveis. Essencialmente, o que o service worker faz é fornecer os meios para:

Melhor performance

O desempenho em visitas repetidas é significativamente melhor em um PWA, pois os service workers fazem tremendamente para ajudar no processo de armazenamento em cache. Comparado com o cache da Web típico (cache HTTP) usado na maioria dos sites, o PWA se destaca em fornecer conteúdo mesmo em condições de rede não favoráveis:

Isso tudo graças ao fato de que os service workers dão aos desenvolvedores total liberdade para exatamente o que e como o cache é feito. Para ver o quão melhor é o desempenho de armazenamento em cache dos service workers, recomendamos o estudo recente do Google: Medindo o impacto no desempenho dos service workers no mundo real. O estudo tem uma metodologia clara, centrada no tempo para pintar pela primeira vez como uma métrica para determinar o desempenho do service worker.

Em média, as páginas carregavam um pouco mais rápido quando um service worker estava controlando a página do que sem um service worker, tanto para visitantes novos quanto para visitantes recorrentes.

Philip Walton, Medindo o impacto no desempenho dos trabalhadores de serviços no mundo real

Acesso off-line

Quando registrados, os service workers armazenam em cache o conteúdo necessário para o site do PWA e o veiculam posteriormente. Isso efetivamente torna os sites com PWA habilitados para off-line, pois os usuários ainda podem interagir com o site e ver todo o conteúdo em cache.

Isso não quer dizer que o acesso offline também seja um recurso inédito na Web - era possível oferecer aos usuários uma experiência offline na Web, apenas que a experiência não era a ideal (consulte Application Cache é um Douchebag) e serviço workers foram inventados para resolver (ou melhor, evitar) as desvantagens do AppCache.

 Leitura recomendada: Como fazer seu PWA funcionar offline

Recursos do aplicativo nativo

Além de oferecer acesso offline e desempenho aprimorado, os service workers também servem como base para mais recursos semelhantes a aplicativos, como notificações push e sincronização em segundo plano (e, em um futuro próximo, geofencing e sincronização periódica). O recurso de notificações push do PWA, por exemplo, é montado usando duas APIs: a API Notifications e a API Push, ambas construídas sobre a API Service Worker.

Ciclo de vida de um service worker

A vida útil de um serviço consiste em três partes: registro, instalação e ativação, todas as quais entraremos em detalhes abaixo:

Cadastro

O primeiro passo que precisamos fazer é registrar o service worker. Sem esta etapa, o navegador não saberá onde seu service worker está localizado e, portanto, impossibilitando a instalação do service worker em segundo plano.
Podemos registrar o service worker usando o seguinte código:

 if('serviceWorker' no navegador) {
    navigator.serviceWorker.register('./pwa-examples/simicart/sw.js', {scope: './sw-scope/'})
.then((reg) => {
   // registro funcionou
       console.log('Registro bem sucedido. Escopo é ' + reg.scope);
};

O código acima começará a procurar a API do Service Worker no navegador e, se o navegador suportar essa API, ele registrará um novo service worker usando o método serviceworkerContainer.register() e fornecerá um scope do service worker. Por exemplo, no código acima, nosso scope é /pwa-examples/simicart/ que significa que nosso service worker funcionaria apenas para páginas que começam com /pwa-examples/simicart/ . Chamamos essas páginas de ' páginas controladas '.

Instalação

Agora que o navegador sabe onde está nosso service worker — e qual é o escopo dele — ele tentará instalar o service worker. Você pode optar por não fazer nada durante esta fase, mas ainda gostaríamos de observar que esta é a fase em que ocorre a maior parte do processo de armazenamento em cache. Por exemplo, normalmente é assim que o processo de armazenamento em cache do ativo é feito:

 const cacheName = 'site-cache-v1'
const assetsToCache = [
    '/pwa-exemplos/',
    '/pwa-examples/index.html',
    '/pwa-examples/css/styles.css',
    '/pwa-examples/js/app.js',
]

self.addEventListener('install', ( event ) => {
    event.waitAté(  
        caches.open(cacheName).then((cache) => {
              return cache.addAll(assetsToCache);
        })
      );
});

Como você pode ver no exemplo acima, usamos a API de cache para armazenar em cache nossos ativos que usaremos posteriormente para tornar nosso PWA compatível com o offline. Esse processo de armazenamento em cache ocorre durante o evento de instalação.

Ativação

Após o estágio de instalação, agora podemos ativar o service worker. No entanto, esse estágio de ativação normalmente não acontece automaticamente e, para que o service worker seja ativado, você deve garantir que não haja nenhum service worker controlando as páginas no momento.

Como alternativa, você também pode automatizar o processo de ativação de seu service worker usando o método skipWaiting() .

 const cacheName = 'site-cache-v1'
const assetsToCache = [
    '/pwa-exemplos/',
    '/pwa-examples/index.html',
    '/pwa-examples/css/styles.css',
    '//pwa-examples/js/app.js',
]
self.addEventListener('install', ( event ) => {
    self.skipWaiting(); // pula espera
    event.waitAté(  
        caches.open(cacheName).then((cache) => {
              return cache.addAll(assetsToCache);
        })
      );
});

A web precisa de um service worker

Neste ponto, todos podemos concordar que o service worker é quase um passo eventual que a Web deve dar. Os usuários estão se tornando cada vez mais exigentes com recursos semelhantes a aplicativos e, combinado ao fato de que o PWA está se tornando o futuro da entrega de software, parece que a Web tem muito potencial nos próximos anos.

Para os comerciantes Magento que desejam transformar a vitrine, fornecemos uma solução PWA sem cabeça completa e econômica para o seu negócio.