[PT-BR] Transformando sua aplicação em um PWA Offline com Vite e React

Olá!

Esse é um guia para transformar sua aplicação em um Progressive Web App (PWA) usando o poderoso VitePWA! Neste tutorial, você aprendera como disponibilizar sua aplicação offline para os usuários, proporcionando uma experiência mais fluida e rápida.

Bora pro código!

• Passo 1: Configurando o ambiente

Antes de começarmos, certifique-se de ter o Node.js instalado em sua máquina. Em seguida, crie um novo projeto usando o Vite, um build tool moderno e rápido para o desenvolvimento de aplicações JavaScript.

Criar um novo projeto Vite:

 create-vite nome-do-seu-projeto --template react-ts

• Passo 2: Instalando o VitePWA

O VitePWA é uma extensão do Vite que facilita a transformação de seu aplicativo em um PWA.

Instalar o VitePWA:

 npm install vite-plugin-pwa --save-dev

• Passo 3: Configurando o VitePWA

Agora, vamos fazer a configuração para tornar nossa aplicação offline. Edite o arquivo vite.config.js na raiz do projeto.

// vite.config.js
import { defineConfig } from 'vite';
import VitePWA from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      manifest: {
        name: 'Minha Aplicação PWA',
        short_name: 'Minha PWA',
        theme_color: '#ffffff',
        background_color: '#ffffff',
        display: 'standalone',
        start_url: '/',
        icons: [
          {
            src: '/path/para/o/ic_launcher.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/path/para/o/ic_launcher.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
    }),
  ],
});

Podemos personalizar as informações do manifest, incluindo o nome e os caminho para os ícones que serão exibidos quando o aplicativo for instalado no dispositivo do usuário.

• Passo 4: Testando a aplicação localmente

Para garantir que tudo esteja funcionando corretamente, execute sua aplicação localmente com o Vite:

 npm run dev

Abrindo o navegador em http://localhost:3000, verifique o console para confirmar que o Service Worker está registrado. Agora pode usar o modo de desenvolvimento para iterar rapidamente a aplicação.

• Passo 5: Compilando a aplicação

Para implantar a PWA deve compilar a aplicação rodando o build:

 npm run build

O VitePWA irá gerar o arquivo sw.js que permite que a aplicação funcione offline.

Conclusão:

Show! Você transformou sua aplicação em um PWA offline utilizando o VitePWA. Agora, seus usuários podem desfrutar de uma experiência fluida e rápida, mesmo quando estão desconectados. Continue explorando as capacidades do VitePWA para melhorar ainda mais a experiência do usuário em suas aplicações web.

Código de exemplo e documentação:
Você pode encontrar um exemplo completo de aplicação PWA usando o VitePWA no GitHub: link para o repositório.

Para obter mais detalhes sobre as opções de configuração e recursos adicionais do VitePWA, consulte a documentação oficial: link para a documentação.

Agora é sua vez de criar experiências offline incríveis com o VitePWA.

Bora codar! 🚀👩🏾‍💻