Blog - Estudante.dev | Escola de programação online

https://www.youtube.com/watch?v=lhnX-2Xc44E Vídeo que demonstra como tranformar um site em App utilizando a tecnologia da PWA e TWA no Youtube. 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

Rubens Flinco

Biografia

Cursos

eBook Dominando GitHub Desktop

Curso Decolando na PWA com React

Links

Recursos

Suporte