Posted in PWA

Workbox PWA

   15/09/2024
PWA
Tempo de leitura: 3 minutos

Workbox PWA: Os Progressive Web Apps (PWAs) revolucionaram a forma como interagimos com a web, proporcionando experiências mais semelhantes a aplicativos nativos. Uma das chaves para o sucesso de um PWA é a implementação eficaz de um service worker para gerenciar o cache e fornecer funcionalidades offline. No entanto, escrever um service worker pode ser complexo e tedioso. É aí que o Workbox entra em cena.

O Workbox é um conjunto de bibliotecas JavaScript que simplifica o desenvolvimento de service workers para PWAs. Ele oferece uma série de módulos que abrangem desde o armazenamento em cache básico até estratégias de atualização mais complexas. Neste artigo, exploraremos os principais módulos do Workbox, como utilizá-los e como eles podem otimizar suas PWAs.

Módulos do Workbox

O Workbox oferece diversos módulos para atender às diferentes necessidades de desenvolvimento de PWAs. Alguns dos módulos mais comuns incluem:

  • workbox-routing: Responsável por roteamento de requisições e definição de estratégias de cache para diferentes rotas.
  • workbox-strategies: Fornece estratégias prontas para uso, como NetworkFirst, CacheFirst, StaleWhileRevalidate e outras.
  • workbox-expiration: Permite definir políticas de expiração para itens armazenados em cache.
  • workbox-precaching: Facilita o pré-cacheamento de arquivos estáticos durante a construção da aplicação.
  • workbox-background-sync: Permite sincronizar dados em segundo plano quando a rede estiver disponível.
  • workbox-core: Contém as classes e funções básicas utilizadas pelos outros módulos.

Como Usar o Workbox

Para utilizar o Workbox em sua aplicação, você precisará instalá-lo via npm ou yarn. Em seguida, importe os módulos necessários e configure seu service worker.

JavaScript

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

// Registra uma rota para arquivos JavaScript
registerRoute(
  /\.js$/,
  new StaleWhileRevalidate({
    cacheName: 'js-cache',
  })
);

Neste exemplo, registramos uma rota para todos os arquivos JavaScript e utilizamos a estratégia StaleWhileRevalidate, que serve o recurso do cache enquanto busca uma versão mais recente na rede em segundo plano.

Armazenamento em Cache e Exibição com o Workbox

Workbox PWA: O Workbox simplifica o processo de armazenamento em cache. Ao registrar uma rota, você define a estratégia de cache que será utilizada para aquele tipo de recurso. O Workbox se encarrega de interceptar as requisições, verificar o cache e servir o recurso de acordo com a estratégia configurada.

JavaScript

// Registra uma rota para imagens, usando a estratégia CacheFirst
registerRoute(
  /\.(?:png|jpg|jpeg|svg)$/,
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 dias
      }),
    ],
  })
);

Neste exemplo, estamos armazenando imagens em um cache com uma capacidade máxima de 60 itens e uma vida útil de 30 dias.

Substituto Offline

O Workbox também facilita a criação de páginas offline personalizadas. Você pode criar uma rota para páginas que não existem e servir um arquivo HTML personalizado como substituto offline.

JavaScript

registerRoute(
  ({ event }) => event.request.destination === 'document' && !navigator.onLine,
  new StaleWhileRevalidate({
    cacheName: 'offline-page',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
  'GET'
);

Neste exemplo, estamos criando uma rota para documentos HTML quando o usuário está offline. A estratégia StaleWhileRevalidate é utilizada para garantir que a página offline seja atualizada quando o usuário voltar a ter conexão com a internet.

Conclusão

Workbox PWA: O Workbox é uma ferramenta poderosa que simplifica significativamente o desenvolvimento de service workers para PWAs. Ao utilizar os módulos do Workbox, você pode criar aplicações web que funcionam offline, carregam rapidamente e oferecem uma experiência de usuário excepcional.

Se você está buscando uma maneira de melhorar o desempenho e o engajamento do seu site, considere transformar seu site em um PWA. Com as ferramentas e frameworks disponíveis atualmente, criar um PWA é mais fácil do que nunca.

Para criar PWAs mais complexos e personalizados, é recomendado aprofundar seus conhecimentos em nossos artigos completos em HTML, CSS, JavaScript e as tecnologias relacionadas a PWAs.

E para você validar seus códigos, para que o back-end do seu PWA funcione sem problemas, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem com potência de verdade!!!

Author: Thiago Rossi