Precisa funcionar off-line! E agora?

Durante o desenvolvimento de software é comum surgirem algumas funcionalidades que precisam funcionar independentemente da sua conexão de rede. Dependendo da linguagem ou tecnologia que você está usando pode ser algo banal, mas na Web isso é um grande desafio.

Tentativas para deixar um site funcionando off-line não faltaram, porém foram tentativas que traziam mais efeitos colaterais do que benefícios.

A crise dos aplicativos móveis

Os aplicativos móveis e suas lojas de download foram uma tentativa de suprir essa necessidade de funcionalidades off-line. No início isso deu muito certo e criou-se um mercado altamente lucrativo.

Porém nem tudo são flores, observando alguns números é possível perceber que este mercado está apresentando sinais de desgaste. Por exemplo, você sabia que:

• "60% de todos os aplicativos nunca foram sequer baixados"
• "Em torno de 65% de usuários de smartphones não baixa nenhum aplicativo por mês."
• "Usuários de smartphones gastam 80% do tempo usando apenas os mesmo 5 aplicativos."

Mais informações estão disponíveis neste artigo do TableLess.

Algo precisa ser feito: Service Worker

Com o objetivo de trazer uma melhor experiência off-line, o W3C juntamente com grandes empresas começaram a projetar uma nova solução chamada Service Worker. Segundo o W3C este projeto iniciou em 2014 e vem vendo aprimorado desde então.

Segue links sobre a documentação do W3C:

• Esboço do projeto
• Última versão publicada

O objetivo do Service Worker é fornecer um proxy que permite interceptar as requisições HTTP do seu site. Nestas interceptações várias operações e verificações podem ser realizadas, inclusive disponibilizar conteúdos armazenados em cache.

Service Worker: Como funciona

Service Worker tem uma arquitetura bem simples. Ele funciona em um arquivo exclusivamente JavaScript e separado de outras funcionalidades.

Vale ressaltar que este arquivo não tem acesso ao DOM, ao objeto Window e é nele que as regras de interceptação serão descritas, sempre baseada em eventos.

Sobre a disponibilidade de eventos e o ciclo de vida do Service Worker, existe um excelente artigo escrito por Matt Gaunt e é um ótimo tutorial para quem está começando. Segue o link.

Se tem interesse em descobrir mais detalhes sobre o funcionamento do Service Worker, também existe um tutorial publicado no BrazilJS e recomendo que você leia. Segue o link.

Service Worker: Um exemplo rápido e fácil

Você gosta de ver um exemplo rápido, fácil e funcionando? Então, eu criei uma página Web que traz experiências off-line e on-line. Segue o link do GitHub.

Abaixo as tecnologias que utilizei neste projeto:

• Servidor HTTP implementado com NodeJS
• Bibliotecas utilizadas: Bootstrap, Express, Axios e Grunt
• Destaque especial para template Pricing do Bootstrap

Exemplo em funcionamento

Para colocar o exemplo em funcionamento basta executar os seguintes comandos e nesta ordem:

1. git clone https://github.com/gabrielwillemann/service-worker-in-pricing-page.git
2. cd service-worker-in-pricing-page
3. npm install
4. npm run build
5. npm run server

Pronto! Basta acessar o endereço http://127.0.0.1:3001/ para ver o exemplo funcionando.

Para testar as funcionalidades off-line, é só parar/fechar o servidor HTTP e acessar o site novamente.

Dúvidas ou sugestões é só entrar em contato. Abraço.