Ícone do site Felipe Mateus

O que é PWA (Progressive Web Application) ?

pwa logo

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:

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.

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.

Imagem do lighthouse com testes do PWA

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

Teste de PWA no 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

Teste de PWA no 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

Teste de PWA no uol

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

Teste de PWA no telegram

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

teste PWA no 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

Teste falido no 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

Teste falido do light house do 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

Teste falido do 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

teste lighthouse no desde site

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

teste light house do meu microblog

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

teste lighthouse do site oportunidades.rio.br

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:

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.