O autor do material, cuja tradução estamos publicando hoje, diz que pode estar com pressa, mas o que ele quer falar é pelo menos uma notícia muito interessante. Estamos falando de aplicativos da Web progressivos para desktop, que podem muito bem deslocar a posição dos aplicativos baseados no Electron.
Inovações do Chrome v70
A versão mais recente do Chrome (v70) suporta Desktop Progressive Web Apps (PWA) nas plataformas Linux e Windows.
Suporte para PWA da área de trabalho no ChromeSe você olhar para a lista de sistemas suportados, imediatamente se torna aparente a ausência de MacOS. No entanto, isso ocorre apenas até o lançamento do Chrome v72.
Suporte de PWA da área de trabalho no MacOSÉ importante observar que, embora esse recurso não esteja ativado por padrão no MacOS, ele pode ser ativado usando o sinalizador apropriado. Para fazer isso, abra o Chrome, acesse
chrome: // flags e encontre esse sinalizador lá. Você também pode ir diretamente para o sinalizador usando o link
chrome: // flags / # enable-desktop-pwas .
O que são aplicativos da web progressivos?
Não entraremos em detalhes específicos sobre a PWA aqui.
Aqui está a seção de documentação do Google, onde você pode ler sobre eles. Para ver o PWA com seus próprios olhos e testá-lo, abra o Chrome para Android ou Safari no iOS (aqui, no entanto, nem todos os recursos do PWA são suportados) e veja
estes exemplos. E
aqui está um discurso sobre esse assunto com o Google I / O '18.
O que é o elétron?
A Electron é uma plataforma que permite aos desenvolvedores criar aplicativos de desktop multiplataforma usando JavaScript, HTML e CSS. Algumas ótimas bibliotecas e estruturas JavaScript também são usadas aqui. Isso facilita para os programadores da Web entrar no desenvolvimento de aplicativos de desktop. Aplicações baseadas em elétrons ganharam imensa popularidade nos últimos anos. Como parte de projetos como Slack, VS Code, Atom, Discord, um esforço considerável foi investido no desenvolvimento de aplicativos usando o Electron. Se você não estiver familiarizado com esses projetos, deve definitivamente olhar para os aplicativos e serviços correspondentes. Os aplicativos de desktop tradicionais geralmente pareciam desajeitados, seus elementos de interface pareciam algo desatualizado. A Electron definitivamente trouxe beleza e graça ao mundo dos aplicativos de desktop.
O que a PWA tem a ver com isso?
Embora os aplicativos Electron sejam um fenômeno crescente e em evolução, e sua implementação esteja próxima da implementação de aplicativos Web, eles ainda apresentam algumas desvantagens. Primeiro, esses aplicativos usam suas próprias instâncias do navegador Chromium. Muitas pessoas sabem quanta RAM é necessária para o Chrome funcionar. Agora, para avaliar a situação que surge no sistema quando vários aplicativos Electron são iniciados simultaneamente, você precisa pegar o número deles e multiplicar por essa quantidade de memória. Se estiver interessado, abra alguns aplicativos Electron e verifique quanta memória eles consomem.
O uso excessivo de memória não é muito bom por si só, e aqui devemos acrescentar que muitos aplicativos Electron interagem de maneira específica com o Node.js, não necessariamente fazendo da mesma maneira que os aplicativos Web correspondentes.
O uso do Electron aumenta as dificuldades associadas ao suporte de versões mais antigas de programas e à configuração do processo de atualização do aplicativo.
Agora vamos falar sobre o PWA da área de trabalho. Imagine aplicativos semelhantes aos escritos em Electron, que também são convenientes para trabalhar, mas, ao mesmo tempo em que é simples instalá-los, eles também são atualizados sem problemas durante a transferência de materiais para um cliente a partir de um único aplicativo da Web. Parece que o Chrome está definindo o padrão para um cenário de comportamento semelhante nos PWAs de desktop. Quando um usuário que trabalha no Chrome visita uma determinada página da Web e o aplicativo apresentado a ela atende a
esse conjunto de critérios, o desenvolvedor do aplicativo poderá oferecer ao usuário a instalação do aplicativo em seu computador. O prompt se parece com o abaixo.
Convite para instalação do PWAO desenvolvedor pode mostrar esse prompt somente depois que o navegador
beforeinstallprompt evento
beforeinstallprompt do objeto
beforeinstallprompt . Após a instalação do aplicativo, o ícone correspondente aparece na área de trabalho.
Ícone do PWA LauncherDepois de iniciar um aplicativo, ele é aberto em uma janela do navegador que não está equipada com controles convencionais. Esse aplicativo é percebido como um aplicativo de desktop real.
Lançado PWAExemplo de PWA
Aqui está um exemplo de um PWA da área de trabalho cujas capturas de tela foram usadas como ilustrações acima.
Aqui está seu repositório no GitHub. Para instalar este aplicativo, você precisa ativar o sinalizador correspondente no Chrome e passar pelo menos 30 segundos no site.
Como já mencionado, um aplicativo Web, para ser considerado um PWA de desktop, deve atender a um determinado conjunto de
requisitos . Se você deseja criar e testar seu próprio PWA da área de trabalho, pode levar
esse repositório como base e levar em conta os requisitos. Se você fizer um breve resumo deles, obterá o seguinte:
- O aplicativo deve ser servido por HTTPS.
- Ele deve ter um trabalhador de serviço instalado com pelo menos um manipulador de
fetch . - Ele deve conter um arquivo
manifest.json formatado corretamente. - Suas páginas devem ser projetadas usando técnicas de design responsivas.
Exemplos adicionais
Se você estiver trabalhando no MacOS, o PWA poderá considerar que você não pode instalá-los e eles não mostrarão um convite para instalá-los. Se você ativar os sinalizadores e os ajustes adequados no console do desenvolvedor, poderá fazer com que o PWA exiba um prompt de instalação. Aqui estão alguns dos PWAs existentes que foram instalados no Mac.
BStarbucks
A Starbucks investiu muito no desenvolvimento de um ótimo PWA. O aplicativo de desktop deles era realmente impressionante.
PWA Starbucks▍Google Maps
Este é apenas um ótimo aplicativo. Ele faz seu trabalho e não carrega muito o sistema, diferindo no trabalho rápido e no design responsivo. Para instalar este aplicativo, você precisa criar e baixar o site móvel do Google Maps.
PWA Google Maps▍Twitter
O Twitter tentou desenvolver um PWA móvel, e a versão para desktop pode ser considerada uma adição valiosa para o aplicativo móvel.
PWA TwitterSumário
Apesar de muito barulho ter sido gerado nos PWAs de desktop, você precisa estar ciente de que essa tecnologia ainda está engatinhando. Em particular, podem ser observadas as seguintes instruções de desenvolvimento para PWAs de desktop:
- Links diretos: os links abertos no Chrome invocam o aplicativo instalado.
- Notificações sobre ícones de aplicativos: mostre notificações nos ícones do iniciador de aplicativos para computador, assim como nos ícones de aplicativos para dispositivos móveis.
- Suporte para teclas de atalho: a capacidade de ouvir eventos do teclado para uso em aplicativos de teclas de atalho.
Uma vez que as tecnologias de desenvolvimento de desktops da PWA tenham se desenvolvido o suficiente, esses aplicativos se tornarão sérios concorrentes aos atuais projetos baseados em elétrons.
Caros leitores! Você planeja desenvolver o PWA para desktop?
