Tudo sobre Progressive Web Apps e sua implementação no Drupal 9

A Internet foi construída inicialmente com o objetivo de melhorar a comunicação entre militares e cientistas durante a década de 1960. Logo, a Web se transformou em um fenômeno revolucionário por volta da década de 1990 e é imparável desde então. Embora o propósito da web sempre mudasse, um propósito que permaneceu constante foi a conveniência.

A necessidade de conveniência trouxe consigo muitas formas inovadoras de acessar a internet. Aplicativos móveis nativos e aplicativos da Web são duas dessas tecnologias que tornaram a navegação na Internet fácil e conveniente. Neste artigo, falaremos sobre Progressive Web Apps e como você pode implementá-lo com o Drupal usando o módulo Drupal Progressive Web App. Mas antes de mergulharmos nisso tudo, vamos examinar os recursos dos aplicativos nativos e da web e como os aplicativos da web progressivos preenchem as lacunas.

Recursos de aplicativos móveis nativos

• Eles são aplicativos específicos da plataforma. Isso também significa que eles precisam ser reconstruídos para cada nova plataforma (iOS, Android).
• Precisa ser baixado.
• Normalmente super rápido.
• Rico em recursos e funcionalidades.
• Pode se misturar perfeitamente a qualquer dispositivo e se sentir parte dele.
• Pode trabalhar offline.
• Eles podem acessar os dados do dispositivo, o hardware do dispositivo e o sistema de arquivos local facilmente.
• Mais caro para desenvolver, manter e atualizar.
• São pré-aprovados para segurança e podem ser baixados em lojas de aplicativos.
• Difícil para os motores de busca rastrear.

Recursos de aplicativos da web

• Não depende da plataforma. Tudo que você precisa é de um navegador para acessá-los. Suporta a maioria dos navegadores modernos. Não precisa ser baixado.
• Nenhum SDK específico para desenvolvê-los. O frontend é desenvolvido usando HTML, CSS, JavaScript e um LAMP ou uma pilha MEAN para o backend.
• Não há necessidade de fazer upgrade. Menores custos de desenvolvimento e manutenção.
• Embora precise de autenticação, a segurança é um problema porque pode ser vulnerável a acessos não autorizados.
• Eles não funcionam offline e podem ser mais lentos do que os aplicativos móveis nativos.
• Eles não estão listados nas lojas de aplicativos, portanto, descobri-los pode ser mais difícil.

O que são Progressive Web Apps e como eles preenchem essa lacuna?

Portanto, em suma, os aplicativos da web nativos são altamente capazes, mas faltam em termos de alcance. Considerando que os aplicativos da web têm um alcance mais amplo, mas carecem de recursos. E é aí que os Progressive Web Apps entram para preencher as lacunas.

Progressive Web Apps é uma combinação ideal dos benefícios de aplicativos nativos e aplicativos da web. Usando recursos da web modernos, os aplicativos da web progressivos (PWA) podem fornecer experiências semelhantes às de um aplicativo para os usuários. Ele combina recursos oferecidos pela maioria dos navegadores modernos com os benefícios de experiências móveis. Você pode construir aplicativos semelhantes a aplicativos nativos, extremamente complexos e instaláveis. Com o Web Assembly sendo suportado pela maioria dos navegadores agora, os PWAs podem ser construídos em linguagens de escolha do desenvolvedor, aumentando amplamente o escopo e a flexibilidade das funcionalidades que podem oferecer.

Recursos de Progressive Web Apps

• Eles são independentes de plataforma e dispositivo. Funciona perfeitamente em qualquer navegador.
• Eles carregam rápido e são extremamente confiáveis ​​(mesmo com baixa velocidade de Internet). A rolagem é muito suave e fluida.
• Também pode trabalhar offline.
• Notificações push semelhantes a aplicativos nativos podem ser habilitadas.
• Pode acessar o hardware e os dados do dispositivo como aplicativos nativos.
• Os atalhos podem ser adicionados na tela inicial do usuário (em vez de baixá-los)
• Não há necessidade de instalações complexas. Pode compartilhar os URLs facilmente.
• Responsivo em todos os dispositivos.
• Eles são mais fáceis e rápidos de desenvolver. A manutenção também é fácil.

Antes de falar sobre o módulo PWA no Drupal, vamos dar uma olhada nos requisitos mínimos para construir um PWA -

• Deve ser executado em HTTPS.
• Deve incluir um Service Worker - Service Worker é um script (javascript) executado em https no navegador e fornece acesso ao navegador. Ele fornece recursos semelhantes a aplicativos nativos, como entrega de conteúdo offline, notificações push, etc.
• Deve ter um Manifesto de Aplicativo da Web - que é um arquivo JSON contendo metadados com informações sobre o aplicativo da Web, como nome, descrição, autor e muito mais. Isso também é útil para otimização de mecanismo de pesquisa.

O Módulo PWA Drupal - Como fazer Progressive Web Apps com Drupal 9 (e 8)

O módulo Drupal PWA é fácil de instalar e vem com o Service Worker (para armazenamento em cache e outros recursos semelhantes a aplicativos off-line) e Manifest.js que você pode configurar. No entanto, você precisará certificar-se de que o SSL está instalado antes de iniciar o processo de instalação do PWA. Se o seu requisito for extremamente específico com toneladas de personalizações, você pode desenvolver o PWA usando frameworks front-end como Angular ou React e personalizar seu próprio Service Worker.

Instalando o Módulo PWA Drupal 9

Com o Drupal 7, instalar o módulo Drupal do Progressive Web App foi tão fácil quanto baixar e habilitar o módulo. Você pode gerar o arquivo manifest.js por meio de um formulário de configuração e validá-lo. No entanto, no Drupal 9, não podemos integrar essa funcionalidade diretamente apenas habilitando o módulo PWA. A razão é que não oferece a opção de configurar o arquivo manfest.js.

1. Instale o módulo baixando e habilitando o módulo PWA Drupal.

2. Para Drupal 9, aplique este patch

3. Uma vez feito isso, navegue para configuração -> PROGRESSIVE WEB APP -> Configurações de PWA e adicione as informações necessárias.

Trabalhador de serviço

URLs para armazenar em cache - Aqui é onde você pode especificar as páginas que você precisa para disponibilizar mesmo quando estiver offline. Os URLs mencionados aqui serão armazenados em cache - certifique-se de limpar o cache sempre que fizer alguma atualização aqui.
URLs a serem excluídos - se você tiver páginas que absolutamente precisam funcionar apenas com a Internet, mencione-as aqui.
Página off-line - exibe uma página personalizada para seus usuários quando eles ficam off-line e a página não é armazenada em cache.

Manifest.json

O arquivo manifest.json do Drupal é o que permite aos usuários adicionar o PWA à sua tela inicial. Ele contém configurações que você pode modificar para alterar como seu PWA se comportará - como o nome, nome de exibição, cor de fundo, orientação e muito mais.

O arquivo será adicionado à tag head de sua página de índice.
<link rel = "manifest" href = "/manifest.json">

A imagem abaixo mostra a opção “Adicionar à tela inicial”. Ao selecionar essa opção, um ícone será criado na tela inicial.