[PT-BR] Transformando sua aplicação em um PWA Offline com Vite e React
Tags: react, pwa, vite, javascript
Published: 2023-08-17 00:56:22

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](https://github.com/diaslilian/todo-list-pwa).

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](https://vite-pwa-org.netlify.app/guide/).

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

Bora codar! 🚀👩🏾‍💻