DART - Operador spread (...)

PWA - Apresentando Progressive Web App

Hoje vamos tratar um pouco sobre as PWAs ou Progressive Web Apps.

O mundo da tecnologia adora acrônimos, e PWA é mais deles, e, significa Progressive Web App ou Aplicação Progressiva para Web.

Mas o que é uma PWA ?

"Progressive Web App é um termo usado para denotar uma nova metodologia de desenvolvimento de software. Ao contrário dos tradicionais aplicativos, um Progressive Web App pode ser visto como uma evolução híbrida entre as páginas web regulares e um aplicativo móvel." Wikipédia

Assim uma aplicação PWA é uma aplicação híbrida entre web e mobile.

O objetivo das PWAs é fazer com que o usuário tenha uma melhor experiência com aplicações Web de forma que o uso de uma página Web pelo celular seja semelhante a de um aplicativo mobile.

Dessa forma as aplicações PWAs tentam combinar os recursos oferecidos pelos navegadores com os benefícios da experiência móvel de forma a entregar ao usuário uma experiência parecida com um aplicativo nativo.

O termo progressiva significa que se o navegador do usuário não suportar um determinado recurso, como notificações, a aplicação continua funcionando.

Atualmente as principais características que uma aplicação PWA deve ter são:

Poder serem usadas independente do dispositivo ou do navegador;
Funcionarem Offline;
Serem atualizadas automaticamente;
Oferecer ao usuário a experiência parecida com um aplicativo nativo;
Enviar notificações push;
Permitir a inclusão do ícone da aplicação na tela do dispositivo;

Como vantagens das aplicações PWAs podemos elencar :

A instalação simples
A praticidade
A conectividade
A atualização constante
A responsividade
A segurança (https)
A economia

Dois recursos importantes que as aplicações PWA utilizam são : o arquivo manifest.json e o service worker.

O arquivo manifest.json fornece meta dados para a aplicação PWA e fica armazenado no servidor da aplicação web e um dos seus propósitos é transformar a aplicação web em algo instalável no dispositivo móvel.

A seguir temos uma arquivo manifest.json gerado por uma aplicação Blazor:

{
  "name": "Blazor_PWA1",
  "short_name": "Blazor_PWA1",
  "start_url": "./",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#03173d",
  "icons": [
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

E o service worker é um arquivo de script que seu navegador executa em segundo plano, separado da página da Web, permitindo acesso a recursos que estão em cache para apresentar as páginas ao usuário e possibilitando o acesso Offline da aplicação.

Usando o service worker sua aplicação terá condições de funcionar, mesmo que de forma limitada, sem uma conexão com a internet.

A Google possui uma ferramenta chamada Lighthouse de código aberto que aprimora a qualidade de apps Web. Ela pode ser executada como extensão do Chrome ou na linha de comando e pode ser usada para inspecionar sua aplicação quanto a aderência às aplicações PWAs.

Obs: No momento, o Lighthouse se concentra principalmente em recursos de Progressive Web Apps, como Adicionar à tela inicial e suporte ao modo off-line.

Atualmente dos navegadores que dão suporte ao PWA podemos usar o Chrome e o Edge.

Como a PWA é uma tecnologia da Google o melhor ponto de partida para conhecer seus recursos é o site : https://web.dev/progressive-web-apps/

"Mas Deus escolheu as coisas loucas deste mundo para confundir as sábias; e Deus escolheu as coisas fracas deste mundo para confundir as fortes;
E Deus escolheu as coisas vis deste mundo, e as desprezíveis, e as que não são, para aniquilar as que são;
Para que nenhuma carne se glorie perante ele."
1 Coríntios 1:27-29

Referências:

José Carlos Macoratti