Noções básicas progressivas sobre aplicativos da Web

Você já viu o botão "Adicionar à tela inicial" que apareceu na tela do seu smartphone Android quando você navegava em qualquer site? Se você clicar neste botão, um determinado aplicativo será instalado no telefone em segundo plano, o ícone de inicialização que será exibido na tela principal. Agora, esse aplicativo pode ser iniciado e funcionar com o site da mesma maneira que antes, mas apenas na interface telefônica comum.

Estamos falando de um aplicativo móvel que foi baixado de um aplicativo da web. Além disso, como você pode ver, para instalar esse aplicativo, você não precisa interagir com o Play Market. Como resultado, a instalação desses aplicativos é o mais simples possível. No entanto, isso está longe de ser o mais interessante. Ao iniciar esses programas, você tem a oportunidade de trabalhar com os dados exibidos, mesmo sem uma conexão com a Internet. Eles permitem que você interaja com páginas da web offline. Bem, isso não é maravilhoso?

O autor do material que publicamos hoje falará sobre esses aplicativos, sobre por que eles são necessários e como criá-los.



Você provavelmente já entendeu que estávamos falando sobre o chamado aplicativo da web progressivo (PWA). Esse aplicativo pode ser instalado diretamente da janela do navegador, o ícone para iniciá-lo se parecerá com o ícone de um aplicativo móvel comum e, como muitos aplicativos móveis, permitirá que você trabalhe com ele sem conexão à Internet.


Botão Adicionar à tela inicial

Agora vamos falar sobre o que é "progressividade" quando aplicado a aplicativos da web. Proponho conhecê-los melhor, descobrir como eles diferem dos aplicativos Web regulares e, além disso, quero dizer por que acredito que o PWA é melhor que os aplicativos móveis tradicionais.

O que é um aplicativo da web progressivo?

O termo "Progressive Web App" foi cunhado por Alex Russell e Frances Berriman. Segundo Alex, aplicativos web progressivos são apenas sites que tomaram as vitaminas certas. O que está no coração da PWA não pode ser chamado de uma nova estrutura ou nova tecnologia. Na verdade, esse é um conjunto de métodos avançados de desenvolvimento que permitem que o comportamento de um aplicativo Web seja muito semelhante ao comportamento de aplicativos móveis ou de desktop clássicos.


Ícone PWA na tela inicial

Os PWAs dão ao usuário nova usabilidade por meio de aprimoramentos progressivos de aplicativos. Em geral, isso significa que o PWA, em dispositivos móveis de diferentes gerações, funcionará aproximadamente da mesma maneira. É claro que alguns recursos de aplicativos de telefone comuns podem não estar disponíveis para eles, mas esses aplicativos geralmente funcionam em dispositivos diferentes da maneira que devem funcionar para eles.

Por que você precisa de aplicativos avançados da Web?

Antes de descobrirmos por que o PWA é necessário, vamos falar sobre os problemas que enfrentamos ao projetar aplicativos da Web e aplicativos móveis regulares.

• Conexão lenta à Internet. Talvez, onde você mora, com a Internet rápida tudo esteja em ordem, para que esse problema não o afete. Mas 60% da população mundial ainda usa Internet 2G. Mesmo nos Estados Unidos, apenas algumas velocidades estão disponíveis para alguns usuários, comparáveis ​​às velocidades de modems comuns usando linhas telefônicas simples.
• Site de carregamento lento. Se o site carregar muito lentamente, você sabe quanto tempo o usuário aguarda antes de clicar no botão fechar janela? Três segundos! 53% dos usuários deixam sites muito lentos.
• A complexidade da instalação de aplicativos. Os usuários não desejam instalar aplicativos móveis regulares. O usuário médio instala 0 aplicativos por mês.
• Envolver os usuários no trabalho com o aplicativo. Os usuários passam a maior parte do tempo em aplicativos móveis regulares, mas o alcance de aplicativos Web móveis é cerca de três vezes maior. Como resultado, a maioria dos usuários não está particularmente ativamente envolvida no trabalho com aplicativos, embora esses usuários passem 80% do tempo nos três aplicativos móveis que usam com mais frequência.

Aplicativos da web progressivos ajudam a resolver esses problemas.


PWA em ação

Há muitas razões para usar o PWA, aqui eu gostaria de destacar os principais recursos que eles fornecem. Se você descrever esses recursos em uma palavra, FIRE significa Rápido, Integrado, Confiável, Envolvente, ou seja, um aplicativo Web progressivo deve ser rápido, integrado ao ambiente de trabalho do dispositivo, confiável e ter meios de envolver os usuários no trabalho com ele. .

1. Se falamos de velocidade, o PWA, em todas as etapas da interação do usuário com eles, trabalha rapidamente. Eles são rapidamente instalados, lançados rapidamente, funcionam rapidamente. Como os PWAs permitem armazenar dados em cache, o reinício desses aplicativos é muito rápido, mesmo sem acessar os recursos de rede.
   
2. A integração do PWA no ambiente do dispositivo é expressa no fato de que esses aplicativos se comportam como aplicativos regulares. O ícone para iniciá-los está na tela principal, eles podem trabalhar com notificações push, eles podem usar as mesmas funções do dispositivo que os aplicativos comuns. Como resultado, ao trabalhar com aplicativos da web progressivos, o usuário não sente que está saindo do ambiente familiar.
3. A confiabilidade dos aplicativos da Web integrados baseia-se no fato de que eles podem funcionar normalmente, mesmo sem se conectar a uma rede, devido à capacidade de armazenar dados em cache usando trabalhadores de serviço.
4. A capacidade da PWA de envolver os usuários com eles se baseia no fato de que eles podem enviar notificações aos usuários. Isso permite que você mantenha o usuário informado sobre eventos interessantes relacionados ao aplicativo e o atrai para trabalhar com esse aplicativo.

Como criar um aplicativo da web progressivo?

O Google publicou uma lista de verificação para o desenvolvimento de aplicativos avançados da Web. Considere os requisitos mínimos para um aplicativo, cuja conformidade nos permite chamá-lo de PWA.

▍1 Manifesto de aplicativo

Um manifesto do PWA é um arquivo manifest.json com algo como isto:

 { "name": "Trending Meme", "short_name": "Meme", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [   {     "src": "images/icons/icon-72x72.png",     "sizes": "72x72",     "type": "image/png"   },   {     "src": "images/icons/icon-96x96.png",     "sizes": "96x96",     "type": "image/png"   },   {     "src": "images/icons/icon-128x128.png",     "sizes": "128x128",     "type": "image/png"   },   {     "src": "images/icons/icon-144x144.png",     "sizes": "144x144",     "type": "image/png"   },   {     "src": "images/icons/icon-152x152.png",     "sizes": "152x152",     "type": "image/png"   },   {     "src": "images/icons/icon-192x192.png",     "sizes": "192x192",     "type": "image/png"   },   {     "src": "images/icons/icon-384x384.png",     "sizes": "384x384",     "type": "image/png"   },   {     "src": "images/icons/icon-512x512.png",     "sizes": "512x512",     "type": "image/png"   } ], "splash_pages": null } 

Antes de nós, existe um arquivo JSON comum que contém metainformações sobre um aplicativo da web. Aqui há dados sobre os ícones do aplicativo (um deles que o usuário vê na tela principal após a instalação do aplicativo), a cor de plano de fundo do aplicativo, seu nome completo e abreviado e assim por diante. Você mesmo pode escrever esse manifesto ou pode usar uma ferramenta especial que automatiza a criação desses arquivos.


Um site que facilita a criação de um arquivo manifest.json

§ 2 Trabalhadores de serviço

Os trabalhadores de serviço são trabalhadores orientados a eventos que executam o plano de fundo do aplicativo e agem como intermediários entre o aplicativo e os recursos de rede. Eles podem interceptar solicitações de rede e armazenar informações em cache para o aplicativo. Eles podem ser usados ​​para baixar dados planejados para garantir que o aplicativo funcione offline. Os trabalhadores do serviço são programas JavaScript que interceptam o processamento de determinados eventos e executam determinadas tarefas.

Aqui está um exemplo do arquivo serviceworker.js .

 self.addEventListener('fetch', event => {   //           const {request} = event;   const url = new URL(request.url);   if(url.origin === location.origin) {       event.respondWith(cacheData(request));   } else {       event.respondWith(networkFirst(request));   } }); async function cacheData(request) {   const cachedResponse = await caches.match(request);   return cachedResponse || fetch(request); } 

▍3 Emblemas

Os ícones são usados ​​para iniciar a instalação no dispositivo PWA. O site mencionado acima, que ajuda a criar arquivos de manifesto, permite gerar automaticamente um conjunto de ícones de aplicativos com base em um único arquivo de imagem com 512x512 pixels de tamanho carregado para este site. Os arquivos gerados são salvos no formato .png .

▍4 Segurança

Para que um aplicativo seja chamado PWA, ele deve, entre outras coisas, oferecer suporte à troca de dados por um canal de comunicação seguro usando HTTPS. É fácil obter um certificado SSL para organizar essa conexão usando os recursos de serviços como Cloudflare e LetsEncrypt. Atualmente, a proteção de aplicativos não é apenas o absolutamente necessário, é também uma maneira de demonstrar a confiabilidade do aplicativo ao usuário e criar relacionamentos confiáveis ​​com ele.

Sumário

Neste artigo, falamos sobre aplicativos da web progressivos, sobre por que eles são necessários, quais problemas eles resolvem, quais requisitos são apresentados a eles. Aqui também abordamos o tópico de seu desenvolvimento, em particular, falamos sobre o manifesto do PWA, trabalhadores de serviço, ícones de aplicativos e que eles precisam ser protegidos usando HTTPS. A tecnologia PWA é frequentemente percebida como algo relacionado exclusivamente aos smartphones Android e, até recentemente, esse ponto de vista tinha direito à vida. No entanto, dados os eventos que ocorreram este ano, podemos dizer que a PWA tem um futuro muito interessante em muitas plataformas. O tópico da PWA, de fato, está longe de esgotar-se com tudo isso. Portanto, é bem possível que voltemos a ele.

Caros leitores! Como você se sente com relação aos aplicativos da web progressivos?