Ativação de recursos do aplicativo web progressivo

Por meio de uma configuração simples, um autor de conteúdo agora pode ativar recursos do aplicativo web progressivo (PWA) para experiências criadas no AEM Sites.

Introdução

Os Aplicativos web progressivos (PWAs) habilitam experiências imersivas semelhantes a aplicativos no AEM Sites, permitindo que eles sejam armazenados localmente no computador de um usuário e acessíveis offline. Um usuário pode navegar em um site de qualquer lugar, mesmo sem conexão com a Internet. Os PWAs permitem experiências ininterruptas, mesmo que a rede caia ou fique instável.

Em vez de exigir qualquer novo desenvolvimento de código no site, um autor de conteúdo pode configurar as propriedades do PWA como uma guia adicional nas propriedades da página de um site.

• Quando salva ou publicada, essa configuração aciona um manipulador de eventos que grava os arquivos manifest e service worker que ativam os recursos de PWA no site.
• Os mapeamentos Sling também são mantidos, para garantir que o service worker seja disponibilizado a partir da raiz do aplicativo e ative o conteúdo de proxy, permitindo recursos offline no aplicativo.

Com o PWA, o usuário tem uma cópia local do site, dando uma experiência semelhante a um aplicativo mesmo sem conexão com a Internet.

Pré-requisitos

Para poder usar os recursos de PWA no seu site, há dois requisitos para o ambiente do projeto:

1. Usar componentes principais para aproveitar esse recurso
2. Ajustar as regras do dispatcher para expor os arquivos necessários

Essas são etapas técnicas que o autor precisará coordenar com a equipe de desenvolvimento. Elas são necessárias apenas uma vez em cada site.

Usar componentes principais

Os Componentes principais versões 2.15.0 e posteriores são compatíveis com os recursos de PWA do AEM Sites. Como o AEMaaCS sempre inclui a versão mais recente dos componentes principais, você pode aproveitar os recursos de PWA prontos para uso. Seu projeto AEMaaCS atende automaticamente a esse requisito.

Ajustar seu Dispatcher

O recurso PWA gera e usa arquivos /content/<sitename>/manifest.webmanifest. Por padrão, o Dispatcher não expõe esses arquivos. Para expor esses arquivos, o desenvolvedor deve adicionar a seguinte configuração ao projeto do site.

File location: [project directory]/dispatcher/src/conf.dispatcher.d/filters/filters.any >

# Allow webmanifest files
/0102 { /type "allow" /extension "webmanifest" /path "/content/*/manifest" }

Dependendo do seu projeto, talvez você queira incluir diferentes tipos de extensões para as regras de regravação. Pode ser útil incluir a extensão webmanifest nas condições de regravação quando você introduz uma regra que oculta e redireciona solicitações para /content/<projectName>.

RewriteCond %{REQUEST_URI} (.html|.jpe?g|.png|.svg|.webmanifest)$

Ativar o PWA no seu site

Com os pré-requisitos atendidos, é muito fácil para um autor de conteúdo habilitar os recursos de PWA em um site. Veja a seguir um esboço básico de como fazer isso. As opções individuais são detalhadas na seção Opções detalhadas.

1. Faça logon no AEM.

2. No menu principal, toque ou clique em Navegação -> Sites.

3. Selecione o projeto do site e toque ou clique em Propriedades ou use a tecla de atalho p.

4. Selecione a guia Aplicativo web progressivo e configure as propriedades aplicáveis. No mínimo, você deve querer:

   1. Selecionar a opção Ativar o PWA.

   2. Definir o URL de inicialização.

      

   3. Faça upload de um ícone PNG de 512x512 no DAM e faça referência a ele como o ícone do aplicativo.

      

   4. Configure os caminhos que deseja que o service worker use offline. Os caminhos típicos são:

      • /content/<sitename>
      • /content/experiencefragements/<sitename>
      • /content/dam/<sitename>
      • Qualquer referência de fonte de terceiros
      • /etc/clientlibs/<sitename>

      

5. Toque ou clique em Salvar e fechar.

Seu site agora está configurado e você pode instalá-lo como um aplicativo local.

Usar seu site habilitado para PWA

Agora que configurou o site para oferecer suporte a PWA, você pode experimentá-lo por conta própria.

1. Acesse o site em um navegador compatível.
2. Você verá um novo ícone na barra de endereços do navegador, indicando que o site pode ser instalado como um aplicativo local.
   • Dependendo do navegador, o ícone pode variar e o navegador também pode exibir uma notificação (como um banner ou caixa de diálogo), indicando que é possível instalá-lo como um aplicativo local.
3. Instale o aplicativo.
4. O aplicativo será instalado na tela inicial do dispositivo.
5. Abra o aplicativo, navegue um pouco e veja se as páginas estão disponíveis offline.

Opções detalhadas

A seção a seguir fornece mais detalhes sobre as opções disponíveis ao configurar o site como um PWA.

Configurar experiência instalável

Essas configurações permitem que o site se comporte como um aplicativo nativo, tornando-o instalável na tela inicial dos visitantes e disponível offline.

• Ativar o PWA — este é o principal botão de alternância para ativar o PWA no site.
• URL de inicialização — este é o URL inicial preferencial que o aplicativo abrirá quando o usuário carregar o aplicativo instalado localmente.
  • Pode ser qualquer caminho na estrutura do conteúdo.
  • Não precisa ser a raiz e geralmente é uma página de boas-vindas dedicada do aplicativo.
  • Se esse URL for relativo, o URL do manifest será usado como URL base para resolvê-lo.
  • Quando deixado em branco, o recurso usa o endereço da página web da qual o aplicativo web foi instalado.
  • É recomendável definir um valor.
• Modo de exibição — um aplicativo habilitado para PWA ainda é um site do AEM fornecido por um navegador. Essas opções de exibição definem como o navegador deve ser oculto ou apresentado ao usuário no dispositivo local.
  • Independente — o navegador é completamente oculto do usuário, aparentando ser um aplicativo nativo. Este é o valor padrão.
    • Com essa opção, a navegação do aplicativo deve ser totalmente possível por meio do conteúdo, usando links e componentes nas páginas do site, sem usar os controles de navegação do navegador.
  • Navegador — o navegador é exibido como normalmente seria ao visitar o site.
  • Interface mínima — o navegador é parcialmente escondido, como em um aplicativo nativo, mas os controles básicos de navegação ficam expostos.
  • Tela cheia — o navegador fica completamente oculto, como em um aplicativo nativo, mas é renderizado no modo de tela cheia.
    • Com essa opção, a navegação do aplicativo deve ser totalmente possível por meio do conteúdo, usando links e componentes nas páginas do site, sem usar os controles de navegação do navegador.
• Orientação da tela — como um aplicativo local, o PWA precisa saber como lidar com as orientações do dispositivo.
  • Qualquer — o aplicativo se ajusta à orientação do dispositivo do usuário. Este é o valor padrão.
  • Retrato — isso força o aplicativo a ser aberto no layout de retrato, independentemente da orientação do dispositivo do usuário.
  • Paisagem — isso força o aplicativo a ser aberto no layout paisagem, independentemente da orientação do dispositivo do usuário.
• Cor do tema — isso define a cor do aplicativo que afeta como o sistema operacional do usuário local exibe a barra de ferramentas da interface nativa e os controles de navegação. Dependendo do navegador, isso pode afetar outros elementos de apresentação do aplicativo.
  • Use o pop-up de roda de cores para selecionar uma cor.
  • A cor também pode ser definida por valor hexadecimal ou RGB.
• Cor do plano de fundo — isso define a cor do plano de fundo do aplicativo, mostrado quando o aplicativo é carregado.
  • Use o pop-up de roda de cores para selecionar uma cor.
  • A cor também pode ser definida por valor hexadecimal ou RGB.
  • Certos navegadores criam uma tela inicial automaticamente a partir do nome do aplicativo, cor do plano de fundo e ícone.
• Ícone — isso define o ícone que representa o aplicativo no dispositivo do usuário.
  • O ícone deve ser um arquivo PNG com tamanho de 512x512 pixels.
  • O ícone deve ser armazenado no DAM.

Gerenciamento de cache (avançado)

Essas configurações disponibilizam partes do site de forma offline e local no dispositivo do visitante. Isso permite controlar o cache do aplicativo web para otimizar as solicitações de rede e dar suporte a experiências offline.

• Estratégia de armazenamento em cache e frequência de atualização de conteúdo — essa configuração define o modelo de armazenamento em cache do seu PWA.
  • Moderadamente — esta configuração é o caso da maioria dos sites e é o valor padrão.
    • Com essa configuração, o conteúdo visualizado pela primeira vez pelo usuário será carregado do cache e, enquanto o usuário estiver consumindo esse conteúdo, o restante do conteúdo em cache será revalidado.
  • Frequentemente — é o caso dos sites que necessitam de atualizações muito rápidas, como casas de leilões.
    • Com essa configuração, o aplicativo buscará primeiro o conteúdo mais recente por meio da rede e, se não estiver disponível, recorrerá ao cache local.
  • Raramente — esse é o caso para sites quase estáticos, como páginas de referência.
    • Com essa configuração, o aplicativo procurará primeiro o conteúdo no cache e, se não estiver disponível, recorrerá à rede para recuperá-lo.
• Pré-armazenamento em cache de arquivos — esses arquivos hospedados no AEM serão salvos no cache do navegador local quando o service worker estiver sendo instalado e antes de ser usado. Isso garante que o aplicativo web esteja totalmente funcional quando estiver offline.
• Inclusões de caminhos — as solicitações de rede para os caminhos definidos são interceptadas e o conteúdo em cache é retornado de acordo com a Estratégia de armazenamento em cache e frequência de atualização de conteúdo configuradas.
• Exclusões de cache — esses arquivos nunca serão armazenados em cache, independentemente das configurações em Pré-armazenamento em cache de arquivos e Inclusões de caminho.

Limitações e recomendações

Nem todos os recursos de PWA estão disponíveis para o AEM Sites. Essas são algumas limitações importantes.

• As páginas não são sincronizadas ou atualizadas automaticamente se o usuário não estiver usando o aplicativo.

A Adobe também recomenda o seguinte ao implementar o PWA.

Minimize o número de recursos para pré-armazenar em cache.

A Adobe aconselha limitar o número de páginas a serem pré-armazenadas em cache.

• Incorpore bibliotecas para reduzir o número de entradas para gerenciar ao pré-armazenar em cache.
• Limite o número de variações de imagem para pré-armazenar em cache.

Ative o PWA depois que os scripts do projeto e as folhas de estilos estiverem estabilizados.

As bibliotecas de clientes são entregues com a adição de um seletor de cache, observando o seguinte padrão lc-<checksumHash>-lc. Toda vez que um dos arquivos (e dependências) que compõem uma biblioteca são alterados, esse seletor é alterado. Se você listou uma biblioteca do cliente para ser pré-armazenada em cache pelo service worker e deseja fazer referência a uma nova versão, recupere e atualize manualmente a entrada. Como resultado, recomendamos que você configure o site para ser um PWA depois que os scripts do projeto e as folhas de estilos estiverem estabilizados.

Minimize o número de variações de imagem.

O Componente de imagem dos Componentes principais do AEM determina no front-end a melhor representação para buscar. Esse mecanismo também inclui um carimbo de data e hora que corresponde à hora da última modificação desse recurso. Esse mecanismo complica a configuração do pré-armazenamento em cache do PWA.

Ao configurar o pré-armazenamento em cache, o usuário precisa listar todas as variações de caminho que podem ser buscadas. Essas variações são compostas de parâmetros como qualidade e largura. É recomendado reduzir o número destas variações para no máximo três — pequenas, médias e grandes. Você pode fazer isso através da caixa de diálogo de política de conteúdo do Componente de imagem.

Se não for configurado com cuidado, o consumo de memória e de rede podem afetar seriamente o desempenho do seu PWA. Além disso, se você pretende realizar o pré-armazenamento em cache de, por exemplo, 50 imagens, e tiver 3 larguras diferentes por imagem, o usuário que mantém o site terá que manter uma lista de até 150 entradas na seção pré-armazenamento em cache das propriedades da página do PWA.

A Adobe também aconselha configurar o site como um PWA após o uso de imagens do projeto ser estabilizado.

Recursos de Business.Adobe.com