Aplicativos da Web progressivos para desktop: um grande avanço

Publicados: 2019-09-10

Índice

Quando se fala em Progressive Web Apps (PWAs), os aplicativos móveis são a primeira coisa que vem à mente, pois sempre foi assim.

 Leitura recomendada: O que é Progressive Web App

No entanto, à medida que o tempo está mudando, os principais navegadores, como o Chrome, com suas iniciativas de PWA, estão agora entrando no mercado de desktops, expandindo ainda mais o potencial aparentemente ilimitado dos PWAs.

A partir do Chrome 70, os usuários agora podem instalar aplicativos da Web progressivos para desktop no Windows e no Linux. Uma vez instalados, eles são iniciados no menu Iniciar e executados como todos os outros aplicativos instalados, sem barra de endereços ou guias.

Veja esta postagem no Instagram

Sendo quase indistinguível de aplicativos nativos, o Progressive Web App (PWA) é o futuro da Web com seus recursos semelhantes a aplicativos, um dos quais é a capacidade de instalar (adicionar PWA à tela inicial) que pode revolucionar potencialmente a experiência na web. ?Construa um PWA hoje com SimiCart. . . #pwa #simipwa #app #nativeapp #websitedesign #web #google #chromedevsummit #chromedevsummit2019

Uma postagem compartilhada por SimiCart (@simicart.official) em

E não para por aí . A base de um PWA híbrido da Microsoft Store está sendo apresentada passo a passo: na Microsoft Store, os Progressive Web Apps agora estão no mesmo nível do aplicativo nativo do Windows, expandindo assim seu alcance para toda a base de instalação do Windows 10 de quase 700 milhões usuários mensais ativos.

Entendendo os PWAs da área de trabalho e por que é tão importante

Possuindo todas as vantagens dos Progressive Web Apps e muito mais , o Desktop Progressive Web App está se tornando a tendência no desenvolvimento de aplicativos para desktop.

 Leitura recomendada: 12 exemplos de aplicativos da Web progressivos para sua inspiração

Para uma breve compreensão do Desktop PWA, você pode imaginar que o Desktop PWA é como um documento online ou um documento do Google que funciona utilizando os componentes da web. Os aplicativos de desktop nativos, por outro lado, são como o Microsoft Word : são bons, vêm com um pouco de tamanho e são projetados para funcionar sem problemas. A razão pela qual o Desktop PWA está em alta agora é porque o Desktop PWA pode praticamente fazer o trabalho de um aplicativo de desktop nativo com uma experiência muito mais envolvente e ocupa pouco ou nenhum espaço em seu disco rígido.

Em resumo, os PWAs de desktop são:

  • Rápido – o PWA oferece uma experiência imediata, responsiva e geral agradável
  • Instalável – um PWA pode ser instalado como qualquer outro aplicativo nativo e ser exibido na área de trabalho ou na tela inicial, em vez de exigir um navegador. As instalações do PWA são sempre instantâneas e pequenas em tamanho de pacote.
  • Envolvente – O PWA adota a melhor diretriz para UX e UI de alta qualidade, além de poder trabalhar independentemente do estado da rede ou da capacidade do dispositivo.

O exemplo mais proeminente de Desktop PWA é o Twitter Lite . Apesar de ter sido feito com foco em usuários móveis, o Twitter teve um crescimento notável em suas interações com usuários de desktop.

65% de aumento de páginas por sessão

Aumento de 75% nos Tweets enviados

Redução de 20% na taxa de rejeição

O primeiro tiro marcando o estágio inicial do movimento PWA certamente foi disparado pelo Twitter. Seguem-se marcas influentes como Spotify e Pinterest com pressa e também com uma qualidade de produto excepcional:

Desktop Spotify e Pinterest PWA

Caso você tenha perdido, temos aqui uma revisão completa do Spotify PWA. Destacando-se acima do resto, o Spotify PWA vem com uma reformulação que mudou drasticamente a experiência do usuário, tornando-a mais personalizada e adaptável às necessidades do usuário - como um player de música deve ser.

Cores de fundo adaptáveis ​​do Spotify PWA

O Pinterest também experimentou várias melhorias positivas nas principais métricas de negócios.

O tempo gasto aumentou 40% em comparação com a antiga experiência da Web para dispositivos móveis, a receita de anúncios gerada pelo usuário aumentou 44% e os principais engajamentos aumentaram 60%

Sua nova experiência na web móvel é um avanço para o monólito de um site anterior.

Eles não apenas dividiram e eliminaram centenas de KB de seu JavaScript, reduzindo o tamanho de seu pacote principal de 650 KB para 150 KB, mas também melhoraram as principais métricas de desempenho. A Primeira Pintura Significativa caiu de 4,2s para 1,8s e o Tempo para Interação foi reduzido de 23s para 5,6s.

Para os leitores interessados ​​em um estudo de caso específico do PWA PWA, recomendamos este artigo: Um estudo de caso de desempenho de aplicativo da Web progressivo do Pinterest.

Estatísticas de PWA do Pinterest
Fonte: PWAstats

Como instalar aplicativos da Web progressivos na área de trabalho

O processo de instalação de um Desktop Progressive Web App é bastante simples e simplificado. Sua etapa mais importante é apenas encontrar o endereço PWA correto do seu aplicativo.

Em nosso tutorial de hoje, usaremos o Twitter como exemplo de Desktop PWA:

Etapa 1 : usando o Google Chrome versão 70 e superior, acesse https://mobile.twitter.com/home

Etapa 2 : verifique se há um botão (+) na extremidade direita da barra de endereço

Pop-up do aplicativo de instalação do Twitter PWA

ou se houver uma opção “ Instalar Twitter ” no menu suspenso

Opção de instalação do Twitter PWA

Passo 3 : Clique em Instalar e o processo terminará instantaneamente.

Etapa 4 : inicie seu PWA recém-instalado a partir de sua área de trabalho.

desktop-twitter-ícone
Ícone do Twitter na área de trabalho

Como desinstalar Progressive Web Apps na área de trabalho

Para usuários despreocupados, excluir o ícone do Desktop PWA é uma maneira aceitável de desinstalar o PWA. No entanto, para usuários que procuram uma maneira mais segura de desinstalar PWAs, as etapas abaixo são recomendadas:

Etapa 1 : abra seu PWA da área de trabalho (neste caso é o Twitter )

Passo 2 : Selecione “ Desinstalar Twitter …” no menu suspenso

Opção de desinstalação do Twitter PWA

Etapa 3 : marque ou desmarque a opção sugerida e, finalmente, clique em “ Remover

Pop-up de desinstalação do PWA do Twitter

E é isso! Seu PWA do Twitter agora foi removido do seu computador em apenas algumas etapas simples.

Observações Finais

O Desktop PWA é inegavelmente o próximo passo revolucionário na interação e funcionalidade de aplicativos da web. Para estar à frente da concorrência, as empresas devem adotar o movimento PWA agora e ficar alertas sobre a tendência de mudança no desenvolvimento da web/aplicativos.

Para comerciantes on-line que procuram uma solução completa de Magento Progressive Web App perfeita, aqui no SimiCart oferecemos um pacote completo para você e sua loja.

CONSTRUA PWA COM SIMICART