O que é PWA (Progressive Web Application) ?

Primeiramente você conhece o PWA (Progressive Web Application)? Um PWA é um tipo de aplicação web na qual permite usar recursos nativos do sistema operacional. Como por exemplo localização GPS, notificações push, atalho na pagina Inicial entre outros recursos nativos do sistema operacional.

Com isso os sites web funcionam como se fosse aplicativos nativos sem a barra do browser. Contudo esse tipo de aplicativo é recomendado para aplicativos de serviço de uso ocasional pois aplicação de alta performance não funciona bem.

1. Como surgiu o PWA
2. Como funciona o Progressive Web Application
3. Principais características
4. Performance
5. Sites que usam Progressive Web Application
   1. Twitter
   2. Globoplay
   3. Uol – Univeso Online
   4. Telegram Web
6. Sites que deveriam usar o PWA
   1. Facebook
   2. Netflix
   3. Deezer
7. Meus Projetos com PWA
   1. Site Felipe Mateus
   2. Microblog do Felipe Mateus
   3. Oportunidades.rio
8. Desvantagens do PWA
9. Conclusão

Como surgiu o PWA?

O PWA surgiu com a evolução natural da forma de criação de páginas web, no incio da web as páginas tinha só textos. Porém com o passar dos anos foi evoluindo, a primeira evolução se deu com o javascript que permitiu a criação de páginas dinâmicas.

Com o passar do tempo a internet em geral foi evoluindo com adoção de banda larga que permitiu o carregamento de paginas cada vez maiores e pesadas. Nesse sentido surgiu a Web2.0 no meio dos anos 2000 trouxe bastante do que vemos hoje na internet.

No ano de 2010 o fundador da Apple Steve Jobs criticou fortemente o Adobe Flash, programa usado na época pra exibir mídia. Depois das criticas de Jobs logo o HTML5 tornou se bem recebido já que a ideia de Steve Jobs era que todos os aplicativos do IPhone fossem aplicativos web o que não rolou até hoje.

Como funciona o PWA

O PWA funciona como um site normal hospedado na internet a diferença esta nos recursos que um utiliza do navegador. A Maioria dos sites famosos são construídos com Progressive Web Application assim é possível usa-los em vários sistemas sem precisar de instalação.

Logo A capacidade de parecer com app nativo se da por causa dos recursos que os browsers possuem. Eles são:

• Execução offline – Essa é funcionalidade que mais chama atenção nesses tipos de app já que isso antes só era possível em apps nativos.
• Ícone na tela incio – isso é muito bom, Além de executar como app nativo é possível colocar na tela inicial e também colocar atalhos.
• Notificação push – Acredito que é dos recursos mais famosos desse tipo de app quem nunca entrou em site e perguntou se queria receber notificações?
• Splash screen – Os PWA exibem quando abre a logo e com o tema de cores escolhido pelo dev no manifest.json.
• Manter dados – Com o PWA é possível manter dados tanto permanente quanto enquanto o app estiver em execução essa funcionalidade acontece graças ao WebStorage.
• Execução em 2º plano – É possível rodar funções em segundo plano que como de notificação por exemplo.

Todos esses recursos só são possíveis com a configuração do Service Worker que é o script que executa no browser do usuário fazendo todas essas funções. Entretanto com Exceção de splash screen e do ícone na tela de inicio que é uma função do manifest.json um arquivo que especifica todas as configurações de ícones, atalhos e tema do app.

Principais Características

A característica marcante de um site Progressive Web Application é possibilidade de usa-lo como app nativo mas essa não é a unica característica. Já que os apps PWA são paginas html de web site antes de tudo então vamos vê alguns atributos que devem possui.

• Progressividade – Trata-se do app ser acessível pra qualquer usuário livre do Browser e ter novos recursos disponível dependendo da compatibilidade do browser.
• Responsividade – Capacidade de abrir em qualquer tela livremente do tamanho ou do dispositivo seja ele celular, computador ou tablet.
• Segurança – Os Apps PWA obrigatoriamente precisam ser em https isso garante a segurança das informações do app.
• Instalável – Tem opção do usuário instalar o app colocando na pagina inicial ou baixando na loja de apps.
• Linkável – Para ter acesso basta acessar através de um link sem a necessidade de baixar o app na loja de aplicativos.

Contudo pra criar um bom app não se esqueça pensar sempre na no usuário como ele vai usar o app e suas funções. Pensando sempre no usuário o chrome tem uma ferramenta que testa se o site é compatível com Progressive Web Application e se atende todos os requisitos pra ser instalado.

Performance

Quando o assunto é performance os apps PWA se saem melhor do que os nativos já que os PWA foram feitos para rodar na web. Nesse sentido consomem menos recursos do que os apps nativos já que são apps voltados pra rodar no navegador.

Contudo apps que tem muito gráfico como jogos e editores de imagem e video podem ficar pesado por causa do JavaScript. Por isso o WebAssembly foi criado um novo tipo de código que executa binários no navegador e cria softwares como jogos com desempenho melhor.

Alguns sites que usam PWA

Como dito anteriormente alguns site famosos já usam PWA em suas versões onlines e isso será mais comum. Pois o PWA é uma forma melhor de criar uma versão lite uma versão mais leve e mais resumida dos Apps nativos.

1.Twitter

O Twitter é uma rede social de textos curtos que esta disponível em PWA que possibilita a instalação em qualquer sistema.

2. Globoplay

O Globoplay é um serviço de streaming que distribui videos séries e canais de televisão ele tem suporte PWA. Apesar de não cumprir todos os requisitos do PWA é possível instalar em qualquer sistema eu instalei no linux usando o pwa.

3. uol – Universo Online

O Portal da Uol também tem suporte ao PWA atualmente isso faz com que seja possível instalar e receber atualizações diretamente no seu computado. Igualmente o Globoplay o uol também tem pendencias nos critérios PWA e mesmo assim é possível instalar.

4. Telegram Web

O Telegram tem uma versão web que também é compatível com o PWA contudo pode ser rodado em sistemas que não tem suporte nativo. O app do telegram também não passou em todos os testes assim como os sites anteriores o telegram não passou no ícone mascarado.

5. Youtube

O Youtube também é um serviço criado com progressive web application como visto no teste anterior. Porém apesar de não passar em todos os testes ele esta disponível para instalação pois os itens reprovados não são obrigatórios.

Sites que deveriam usar o PWA

Apesar de vários sites grandes já usarem o Progressive Web Application tem sites que não usam e deveriam usar pra ser compatibilidade com todos os sistemas. Todavia isso acaba sendo um problema pra usar esses apps nos sistemas que não tem compatibilidade.

1. Facebook

Facebook que não usa Progressive Web Application na sua versão web contudo não é possível instalar o app em sistemas sem versões nativas.

2. Netflix

O Netflix é um site que deveria ter suporte ao PWA pois é um site muito utilizado e eu mesmo gostaria de instalar esse app no meu pc não conseguir.

3. Deezer

O Deezer é outro app que deveria esta disponível em PWA pois é um app muito usado e não tem suporte a muitos sistemas. No Linux por exemplo existe diversas formas não oficiais para baixar e instalar o Deezer no pc se tivesse o PWA não precisaria dessas formas alternativas.

Meus Projetos com PWA

Desde que conheci o eu descobrir o Progressive Web Application em 2018 eu procuro fazer projetos usando essa tecnologia. Nesse sentido tenho alguns projetos publicados que usam o PWA e é possível instalar em diversos sistemas, Eles são:

1. Mundo do Felipe Mateus

Mundo do Felipe Mateus é este site que você lê ele construído com WordPress e passou em todos os teste do progressive web application. Contudo trabalha offline com cache das paginas acessadas esta com notifications desabilitada por incaptabilidade.

2. Microblog do Felipe Mateus

O meu microblog foi meu primeiro projeto com Progressive Web Application ficou 2 anos com o PWA inativado pois eu tinha subido a versão errada e em 2020 achei o código fonte e corrigir o erro.

3. Oportunidades.rio

O oportunidades.rio é um projeto de anúncios de empregos para o estado do Rio de Janeiro pra região metropolitana. Entretanto o teste Progressive Web Application passou em quase todos os testes só foi reprovado no teste de ícone mascarado.

Desvantagens do PWA

Até aqui só falei de vantagens mas o Progressive Web Application tem algumas desvantagens associadas ao tipo tecnologia usada como elas estão:

• Não esta nas lojas – Os apps PWA não estão presentes nas lojas de aplicativos então acaba tendo dificuldades de distribuição.
• Funcionalidades – Os apps PWA não tem suporte a funcionalidades do celular como vibração, Bluetooth, faceID e outros recursos.
• incompatibilidade com apple – Os dispositivos da apple não são compatíveis com o PWA ainda e não tem nenhuma previsão pra ter compatibilidade.
• Sem integração – Os apps PWA não tem integração com outros apps eles são isolados caso precise usar uma biblioteca nativa de outro app não vai conseguir.

Conclusão

Em síntese o PWA uma nova forma de criar aplicativos que rodam diretamente no navegador sempre precisar de uma loja. Contudo os PWA tem limitação de performance para aplicativos complexos e tem suporte a função nativas do sistema.

O que é PWA?

O PWA é uma forma de desenvolvimento de aplicações web no qual permite criar paginas webs parecidas com apps nativos. Contudo Podendo usar offline, receber notificações push e localização.

Como surgiu o PWA?

O PWA surgiu na evolução natural do HTML5 e do processo do modelo de desenvolvimento de aplicações front end.

Quais são as características de um PWA?

As características do Progressive Web Application são: Progressividade, Responsividade, Segurança, Instalável e Linkável.

Quais as vantagens e desvantagens do PWA?

As vantagens do PWA são diversas, apesar ter sido lançado a pouco tempo, suas funcionalidades têm agradado cada vez mais aqueles que fazem o uso delas. A maior vantagem de um PWA em comparação a um aplicativo é que o problema do cliente pode ser solucionado imediatamente necessidade de que ele baixe um aplicativo.

Quais empresas usam PWA?

Existem varias como o Youtube, Telegram, Uol, Globoplay, Twitter, Tinder, Aliexpresss, Pinterest, Trivago entre outros.

Quais tecnologias e estratégias são usadas na criação de um PWA?

A tecnologia é basicamente o HTML5 que introduz os recurssos necessarios paraa criação do PWA em compinação com o CSS3 e o javascript.