M

MLOG

Português

Aprenda a usar service workers para criar aplicações web offline-first que são rápidas, confiáveis e envolventes para usuários em todo o mundo.

Service Workers: Construindo Aplicações Web Offline-First

No mundo de hoje, os usuários esperam que as aplicações web sejam rápidas, confiáveis e acessíveis, mesmo quando a conectividade de rede é limitada ou indisponível. É aqui que entra o conceito de design "offline-first". Os service workers são uma tecnologia poderosa que permite aos desenvolvedores construir aplicações web que funcionam perfeitamente offline, proporcionando uma experiência de usuário superior.

O que são Service Workers?

Um service worker é um arquivo JavaScript que é executado em segundo plano, separado da thread principal do navegador. Ele atua como um proxy entre a aplicação web e a rede, interceptando requisições de rede e gerenciando o cache. Os service workers podem lidar com tarefas como:

É importante notar que os service workers são controlados pelo navegador, não pela página web. Isso permite que eles funcionem mesmo quando o usuário fecha a aba ou a janela do navegador.

Porquê Offline-First?

Construir uma aplicação web offline-first oferece inúmeros benefícios:

Como os Service Workers Funcionam

O ciclo de vida de um service worker consiste em várias etapas:

  1. Registro: O service worker é registrado no navegador, especificando o escopo da aplicação que ele controlará.
  2. Instalação: O service worker é instalado, momento no qual ele normalmente armazena ativos estáticos em cache.
  3. Ativação: O service worker é ativado e assume o controle da aplicação web. Isso pode envolver o cancelamento do registro de service workers antigos e a limpeza de caches antigos.
  4. Ocioso: O service worker permanece ocioso, aguardando por requisições de rede ou outros eventos.
  5. Busca (Fetch): Quando uma requisição de rede é feita, o service worker a intercepta e pode servir conteúdo do cache ou buscar o recurso da rede.

Implementando Offline-First com Service Workers: Um Guia Passo a Passo

Aqui está um exemplo básico de como implementar a funcionalidade offline-first usando service workers:

Passo 1: Registrar o Service Worker

No seu arquivo JavaScript principal (por exemplo, `app.js`): 


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registrado com o escopo:', registration.scope);
    })
    .catch(function(error) {
      console.log('Falha no registro do Service Worker:', error);
    });
}

Este código verifica se o navegador suporta service workers e registra o arquivo `service-worker.js`. O escopo define quais URLs o service worker controlará.

Passo 2: Criar o Arquivo do Service Worker (service-worker.js)

Crie um arquivo chamado `service-worker.js` com o seguinte código:


const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/images/logo.png'
];

self.addEventListener('install', function(event) {
  // Realiza os passos de instalação
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Cache aberto');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Encontrado no cache - retorna a resposta
        if (response) {
          return response;
        }

        // IMPORTANTE: Clone a requisição.
        // A requisição é um stream e só pode ser consumida uma vez. Como estamos consumindo isso
        // uma vez pelo cache e uma vez pelo navegador para a busca, precisamos clonar a resposta.
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Verifica se recebemos uma resposta válida
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANTE: Clone a resposta.
            // Uma resposta é um stream e precisa ser consumida apenas uma vez.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Este código faz o seguinte:

Passo 3: Testar Sua Funcionalidade Offline

Para testar sua funcionalidade offline, você pode usar as ferramentas de desenvolvedor do navegador. No Chrome, abra o DevTools, vá para a aba "Application" e selecione "Service Workers." Você pode então simular o modo offline marcando a caixa "Offline".

Técnicas Avançadas de Service Worker

Uma vez que você tenha um entendimento básico de service workers, pode explorar técnicas mais avançadas para aprimorar sua aplicação offline-first:

Estratégias de Cache

Existem várias estratégias de cache que você pode usar, dependendo do tipo de recurso e dos requisitos da sua aplicação:

Escolher a estratégia de cache correta depende do recurso específico e dos requisitos da sua aplicação. Por exemplo, ativos estáticos como imagens e arquivos CSS são muitas vezes melhor servidos usando a estratégia Cache First, enquanto conteúdo dinâmico pode se beneficiar da estratégia Network First ou Cache then Network.

Sincronização em Segundo Plano

A sincronização em segundo plano permite adiar tarefas até que o usuário tenha uma conexão de rede estável. Isso é útil para tarefas como enviar formulários ou fazer upload de arquivos. Por exemplo, um usuário em uma área remota da Indonésia pode preencher um formulário enquanto está offline. O service worker pode então esperar até que uma conexão esteja disponível antes de enviar os dados.

Notificações Push

Service workers podem ser usados para enviar notificações push aos usuários, mesmo quando a aplicação não está aberta. Isso pode ser usado para reengajar os usuários e fornecer atualizações oportunas. Considere uma aplicação de notícias fornecendo alertas de notícias de última hora para os usuários em tempo real, independentemente de o aplicativo estar em execução ativa.

Workbox

O Workbox é uma coleção de bibliotecas JavaScript que facilitam a construção de service workers. Ele fornece abstrações para tarefas comuns, como cache, roteamento e sincronização em segundo plano. Usar o Workbox pode simplificar seu código de service worker e torná-lo mais fácil de manter. Muitas empresas agora usam o Workbox como um componente padrão ao desenvolver PWAs e experiências offline-first.

Considerações para Públicos Globais

Ao construir aplicações web offline-first para um público global, é importante considerar os seguintes fatores:

Exemplos de Aplicações Offline-First

Várias aplicações web populares implementaram com sucesso a funcionalidade offline-first usando service workers:

Conclusão

Os service workers são uma ferramenta poderosa para construir aplicações web offline-first que são rápidas, confiáveis e envolventes. Ao armazenar ativos em cache, interceptar requisições de rede e lidar com tarefas em segundo plano, os service workers podem proporcionar uma experiência de usuário superior, mesmo quando a conectividade de rede é limitada ou indisponível. Como o acesso à rede permanece inconsistente em todo o mundo, focar em designs offline-first é crucial para garantir o acesso equitativo à informação e aos serviços na web.

Seguindo os passos descritos neste guia e considerando os fatores mencionados acima, você pode criar aplicações web que funcionam perfeitamente offline e proporcionam uma experiência agradável para usuários em todo o mundo. Abrace o poder dos service workers e construa o futuro da web – um futuro onde a web é acessível a todos, em todos os lugares, independentemente de sua conexão de rede.