Desenvolvimento Front-end

Devo transformar meu site em uma PWA?

Você sabe o que é uma PWA? Será que vale a pena transformar o seu site em uma?

há 6 anos 4 meses

Formação Desenvolvedor Especialista Front-end
Conheça a formação em detalhes

Olá, Web Developers!

Vocês sabem o que são PWA’s? Será que vale a pena transformar uma página web em uma PWA?

PWA - Progressive Web Apps
Curso PWA - Progressive Web Apps
Conhecer o curso

O que são PWA’s?

PWA vem de “Progressive Web App” e a ideia é juntar o melhor dos aplicativos nativos e tecnologias web. É importante notar que não estamos falando de aplicativos híbridos.

PWA’s são aplicações web comuns, então só precisamos de HTML, CSS e JavaScript. Porém, possuem características que fazem o usuário se sentir em um aplicativo nativo.

Aqui as características que definem uma PWA:

1. São progressivas

Elas vão funcionar em qualquer contexto, não importando o dispositivo ou navegador. Deve-se verificar se alguma funcionalidade que você vai usar encontra-se disponível no navegador do seu usuário. Se não, proporcionar algum comportamento para que a página não quebre e passe uma má experiência.

2. São responsivas

A interface e funcionalidades se adequam a qualquer tamanho de tela, desde um pequeno smartphone até uma grande Smart TV.

3. Não precisam de conexão

Nós projetamos essas aplicações para poderem funcionar mesmo quando o usuário não estiver conectado, usando o Cache para servir os arquivos e o Storage do navegador para armazenar dados.

4. Parecem aplicativos

Criamos a interface e as interações de modo que se pareçam com um aplicativo ao invés de um simples site.

5. Sempre Atualizadas

Fazemos com que a aplicação sempre esteja atualizada. As aplicações podem sincronizar em background, mesmo quando estiverem fechadas.

6. Seguras

PWAs devem ser obrigatoriamente fornecidas pelo protocolo HTTPS.

7. Fáceis de Descobrir

Criamos um arquivo de manifesto para que eles possam ser identificados como “aplicativos”, e por ser uma página web, os mecanismos de busca, como o Google, conseguem indexá-los.

8. Envolvente

Podemos estimular a interação do usuário com a aplicação graças às notificações.

9. Instaláveis

Os apps podem ser salvos na tela inicial como um aplicativo instalado, dispensando a necessidade do usuário abrir o navegador.

10. Simples de Compartilhar

Por serem páginas web, podem ser facilmente compartilhadas por sua URL.

Steve Jobs já pensava nisso em 2007

Em 2007, a ideia original de Steve Jobs para o iPhone era que os aplicativos fossem aplicações web.

Segundo ele:

Toda a engine do Safari está dentro do iPhone. Sendo assim, vocês podem escrever incríveis aplicativos para a Web 2.0 com Ajax que se parecem e se comportam exatamente como aplicativos no iPhone. E esses aplicativos podem se integrar perfeitamente com os serviços do iPhone. Eles podem fazer chamadas, enviar um email e procurar por uma localização no Google Maps.

E, adivinha? Não há SDK que você precise! Você tem tudo o que precisa se você souber como escrever aplicativos usando os mais modernos padrões web para escrever aplicativos incríveis para o iPhone hoje. Então, desenvolvedores, achamos que temos uma história muito doce para vocês. Vocês podem começar a construir seus aplicativos para iPhone hoje.

Mas, essa ideia foi alterada em 2008.

Quem usa?

Um ótimo lugar para ver uma lista de PWA’s é o site PWA Rocks.

Várias companhias grandes estão testando PWA e integrando em seus sites, como Washington Post e Flipboard, e outras estão começando a lançar sites betas para testes.

O Twitter Lite é uma PWA completa, e você pode acessá-la por: https://mobile.twitter.com

Quando usar PWA?

Caso precise de várias funcionalidades nativas do dispositivo ou um processamento mais pesado, então pode ser melhor criar um app nativo mesmo. Caso esteja pensando em criar um site ou webapp, criar como PWA é uma boa escolha.

Se você já tem um site ou uma aplicação web, você pode implementar aos poucos as características que definem uma PWA, como notificações, cache de arquivos e dados para o usuário poder acessar offline (que faz a página carregar mais rapidamente também), a possibilidade de salvar o app na tela inicial, receber atualizações de dados mesmo quando estiver com o app fechado, etc.

Implementar apenas algumas dessas características não fará com que você tenha uma PWA completa, mas terá pelo menos uma aplicação otimizada.

Caso queira saber mais sobre o assunto, acabamos de lançar um curso completo sobre PWA aqui no TreinaWeb. Confira:

PWA - Progressive Web Apps
Curso PWA - Progressive Web Apps
Conhecer o curso

Autor(a) do artigo

Akira Hanashiro
Akira Hanashiro

Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.

Todos os artigos

Artigos relacionados Ver todos