Transforme seu site em Aplicativo! Como criar sua PWA e TWA?

Estudante.dev — Wed, 10 Jan 2024 15:30:56 +0000

Olá, sou o Rubens Flinco, um profissional apaixonado por programação com mais de 10 anos de experiência. Trabalhei em grandes empresas como Bradesco, Boticário e IAB, liderando equipes e contribuindo para projetos de e-commerce e banking. Atualmente, leciono aulas na Estudante.dev e no Instituto Infnet, além de ter coordenado eventos para a comunidade Nerdzão. Estou comprometido em compartilhar meu conhecimento, incentivando o pensamento estratégico e a criatividade.

Hoje, estou aqui para guiar vocês na criação de um aplicativo web usando a tecnologia TWA e PWA, partilhando a expertise adquirida ao longo da minha jornada profissional. Antes de começarmos, é crucial ter um site responsivo já desenvolvido e disponível em um domínio na internet. Vamos juntos nessa jornada?

Usaremos o site pwabuilder.com para gerar o PWA do seu site e até mesmo o TWA, se desejar. Você poderá editar o manifesto, gerar ícones e screenshots, além de configurar outras opções, como a categoria do aplicativo e o idioma principal. Por fim, você precisará hospedar o código do manifesto e do serviço de trabalho no seu projeto e importá-los no seu HTML principal para que o PWA funcione corretamente.

Pontos Chaves

Para criar um aplicativo web usando TWA e PWA, você precisará ter um site responsivo já criado e disponível em um domínio na internet.
O site pwabuilder.com é uma ferramenta útil para gerar o PWA do seu site, editar o manifesto, gerar ícones e screenshots e configurar outras opções.
Para que o PWA funcione corretamente, você precisará hospedar o código do manifesto e do serviço de trabalho no seu projeto e importá-los no seu HTML principal.

Criação do site

Para criar um aplicativo web usando a tecnologia TWA e PWA, é necessário ter um site responsivo que já esteja criado e disponível em um domínio na internet. Eu utilizei o Solar Explorer, um aplicativo que já havia construído para o curso Decolando na PWA e React.

Para gerar a PWA, utilizei o site PWA Builder. Após colar o URL do meu site na opção "Start", comecei a editar o manifesto da minha PWA. Nessa etapa, inseri o nome, descrição e cor de tema do meu aplicativo.

Em seguida, configurei as categorias do meu aplicativo na opção "Platform" e gerei os ícones em vários formatos para várias plataformas na opção "Icons". Também utilizei a opção "Screenshots" para gerar imagens das páginas do meu aplicativo.

Por fim, gerei o código do manifesto em JSON e o arquivo de serviço em JavaScript na opção "Code". Precisei hospedar esses arquivos na pasta raiz do meu projeto, além de referenciar o arquivo manifesto em meu HTML principal e importar o arquivo de serviço para que a PWA funcionasse corretamente.

Configuração do Manifesto

Para criar um aplicativo web usando a tecnologia TWA e PWA, é necessário ter um site responsivo e em modo de produção. Eu recomendo o uso do site pwa builder.com para gerar o PWA e TWA do seu aplicativo.

Ao acessar o site, você deve inserir o URL do seu site e clicar em "Start". Em seguida, você pode editar o manifesto do seu aplicativo, adicionando o nome, descrição, cor de fundo, cor do tema e outras configurações.

Na opção "Platform", você pode configurar as categorias do seu aplicativo e relacioná-lo a um aplicativo já publicado na Play Store. Já na opção "Icons", você pode gerar o ícone do seu aplicativo em vários formatos e tamanhos.

Para gerar as screenshots do seu aplicativo, basta inserir o link das páginas que deseja e clicar em "Generate screenshots". O PWA builder irá gerar as screenshots automaticamente para você.

Por fim, é necessário hospedar o código gerado do manifesto e do service worker na pasta raiz do seu projeto e referenciá-los no seu HTML principal. Com essas configurações, seu aplicativo web estará pronto para ser transformado em um PWA ou TWA.

Configurações adicionais

Para criar um aplicativo web usando a tecnologia TWA e PWA, é necessário acessar o site pwabuilder.com. É importante que o site já esteja criado e disponível em um domínio, além de ser responsivo para garantir que o aplicativo fique bom.

Ao acessar o pwa builder.com, é possível gerar o PWA e até mesmo o TWA. Para começar, basta colar o URL do site que já está disponível na internet e clicar em "start". Em seguida, é possível editar o manifesto, que inclui o nome do aplicativo, descrição, cor de fundo, entre outras configurações.

Na seção "settings", é possível configurar a linguagem principal do aplicativo, a orientação, entre outras opções. Já em "platform", é possível configurar as categorias do aplicativo e relacioná-lo a um aplicativo já publicado na Play Store.

Na seção "icons", é possível gerar o ícone em vários formatos para diversas plataformas e escolher uma cor de fundo que combine com a logo. Em "screenshots", é possível gerar as imagens das páginas do aplicativo para salvar e usar posteriormente.

Por fim, na seção "code", é gerado o código do manifesto que deve ser hospedado na pasta raiz do projeto, além de ser necessário importar um arquivo service work para que o PWA funcione corretamente. É possível usar o pwa builder para gerar esse arquivo.

Criação de ícones

Para criar um ícone para o seu aplicativo, você pode usar a ferramenta "Icons" disponível no site pwabuilder.com. Nessa ferramenta, você pode gerar o ícone em vários formatos para várias plataformas em que você pretende construir o seu aplicativo.

Para gerar o ícone, você pode fazer o upload da imagem que deseja usar e selecionar as plataformas para as quais deseja gerar o ícone. A ferramenta irá gerar automaticamente o ícone em vários tamanhos, que serão adequados para as diferentes plataformas.

Também é possível escolher uma cor de fundo que tenha a ver com a sua logo. Essa cor será a cor da tela de carregamento do seu aplicativo.

Com a ferramenta "Icons", você pode criar um ícone para o seu aplicativo de forma simples e rápida, sem precisar se preocupar com a compatibilidade com diferentes plataformas.

Geração de screenshots

Para criar um aplicativo web usando TWA e PWA, você precisará gerar screenshots do seu site. Para isso, eu recomendo o uso do site pwabuilder.com.

Primeiro, certifique-se de que seu site já está criado e responsivo para que ele possa ser transformado em um aplicativo. Em seguida, cole o URL do seu site na opção "Start" do pwabuilder.com.

Para criar os screenshots, você pode selecionar as páginas que deseja gerar e clicar em "Generate Screenshots". O pwa builder irá gerar automaticamente as screenshots para você.

Além disso, você pode usar a opção "Icons" para gerar o ícone do seu aplicativo em vários formatos para várias plataformas. O pwa builder irá gerar vários tamanhos para o seu ícone, que você pode fazer o upload para as plataformas onde você irá publicar o seu aplicativo.

No final, você também precisará hospedar o código gerado do seu manifesto e do service work na pasta raiz do seu projeto para que o seu site possa se tornar uma PWA. Certifique-se de seguir as instruções do pwa builder para importar esses arquivos corretamente.

Código do Manifesto

Para criar uma Progressive Web App (PWA), é necessário editar o manifesto. Para isso, eu utilizei o site pwabuilder.com, que é uma ferramenta gratuita e fácil de usar.

Ao acessar o site, é preciso ter o URL do site que será convertido em PWA. É importante lembrar que o site deve estar em modo de produção e ser responsivo para que funcione corretamente.

Depois de inserir o URL, é possível editar o manifesto. Nessa etapa, é necessário preencher informações como o nome do aplicativo, uma descrição e a cor de fundo. Também é possível configurar outras opções, como a orientação do aplicativo e as categorias na Play Store.

Além disso, é possível gerar o ícone do aplicativo em vários formatos e tamanhos, bem como as screenshots das páginas. É importante lembrar que, em alguns casos, pode ser necessário gerar as screenshots mais de uma vez até que elas sejam geradas corretamente.

Por fim, é gerado o código do manifesto em formato JSON, que deve ser hospedado na pasta raiz do site. Também é necessário adicionar uma linha de código no HTML principal e importar o arquivo service worker para que a PWA funcione corretamente.

Com esses passos, é possível criar uma PWA de forma rápida e fácil, melhorando a experiência do usuário no seu site.

Amplie seu conhecimento em PWA

Se você, assim como eu, é uma pessoa que gosta de se aprofundar nos assuntos que descobre, então considere adquirir meu curso Decolando na PWA e React. Lá, você conseguirá aprender muito mais sobre como o mundo da PWA e TWA funciona. Confira agora mesmo, clicando no botão abaixo.

Quero mais conhecimento em PWA

Veja mais conteúdos como esses gratuitamente com mais qualidade em nosso blog oficial:
https://estudante.curto.dev/blog-devto

DEV Community: Estudante.dev