Por meio de uma configuração simples, um autor de conteúdo agora pode ativar recursos progressivos do aplicativo da Web (PWA) para experiências criadas no AEM Sites.
Este é um recurso avançado que requer:
Antes de usar esse recurso, é recomendável discutir isso com a equipe de desenvolvimento para definir a melhor maneira de aproveitá-lo para o seu projeto.
Aplicativos da Web progressivos (PWA) habilite experiências imersivas semelhantes a aplicativos para sites de AEM, permitindo que eles sejam armazenados localmente na máquina de um usuário e sejam acessíveis offline. Um usuário pode navegar em um site em qualquer lugar, mesmo perdendo uma conexão com a Internet. O PWA permite experiências ininterruptas, mesmo que a rede seja perdida ou instável.
Em vez de exigir qualquer recodificação do site, um autor de conteúdo pode configurar as propriedades do PWA como uma guia adicional no propriedades da página de um site.
Com o PWA, o usuário tem uma cópia local do site, dando uma experiência semelhante ao aplicativo mesmo sem uma conexão com a Internet.
Aplicativos da Web progressivos são uma tecnologia em evolução e suporte para instalação de aplicativos locais e outros recursos depende do navegador usado.
Para poder usar os recursos do PWA para o seu site, há dois requisitos para o ambiente do projeto:
Essas são etapas técnicas que o autor precisará coordenar com a equipe de desenvolvimento. Essas etapas são necessárias apenas uma vez por site.
Os Componentes principais versão 2.15.0 e posteriores são compatíveis com os recursos do PWA dos sites de AEM. Como o AEMaaCS sempre inclui a versão mais recente dos Componentes principais, você pode aproveitar os recursos do PWA prontos para uso. Seu projeto AEMaaCS atende automaticamente a esse requisito.
O Adobe não recomenda usar os recursos do PWA em componentes personalizados ou componentes não estendido dos Componentes principais.
O recurso PWA gera e usa /content/<sitename>/manifest.webmanifest
arquivos. 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. O webmanifest
A extensão pode ser útil para incluir nas condições de regravação quando você introduziu uma regra que oculta e redireciona solicitações para /content/<projectName>
.
RewriteCond %{REQUEST_URI} (.html|.jpe?g|.png|.svg|.webmanifest)$
Com os pré-requisitos já que, para um autor de conteúdo, é muito fácil habilitar os recursos do PWA para 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.
Faça logon no AEM.
No menu principal, toque ou clique em Navegação -> Sites.
Selecione o projeto do site e toque ou clique em Propriedades ou usar a tecla de atalho p
.
Selecione o Aplicativo web progressivo e configure as propriedades aplicáveis. No mínimo, você desejará:
Selecione a opção Ativar o PWA.
Defina as URL de inicialização.
Carregue um ícone de png de 512x512 no DAM e faça referência a ele como o ícone do aplicativo.
Configure os caminhos que deseja que o trabalhador do serviço fique offline. Os caminhos típicos são:
/content/<sitename>
/content/experiencefragements/<sitename>
/content/dam/<sitename>
/etc/clientlibs/<sitename>
Toque ou clique em Salvar e fechar.
Seu site agora está configurado e você pode instale-o como um aplicativo local.
Agora que você configurado seu site para oferecer suporte ao PWA, você pode experimentá-lo por conta própria.
A seção a seguir fornece mais detalhes sobre as opções disponíveis quando configuração do site para o PWA.
Essas configurações permitem que o site se comporte como um aplicativo nativo, tornando-o instalável na tela inicial do visitante e disponível offline.
Essas configurações disponibilizam partes deste site offline e localmente no dispositivo do visitante. Isso permite controlar o cache do aplicativo da Web para otimizar as solicitações de rede e oferecer suporte a experiências offline.
Sua equipe de desenvolvedores provavelmente tem informações importantes sobre como a configuração offline deve ser configurada.
Nem todos os recursos do PWA estão disponíveis para o AEM Sites. Essas são algumas limitações notáveis.
O Adobe também faz as seguintes recomendações ao implementar o PWA.
O Adobe aconselha a limitar o número de páginas a serem pré-armazenadas em cache.
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õe uma alteração de biblioteca, esse seletor é alterado. Se você listou uma biblioteca do cliente para ser pré-armazenada em cache pelo trabalhador do serviço 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.
O Componente de imagem dos Componentes principais do AEM determina em um dos 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é-cache do PWA.
Ao configurar o pré-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. É fortemente aconselhável reduzir o número destas variações para um máximo de três - pequenas, médias e grandes. Você pode fazer isso através da caixa de diálogo da política de conteúdo da variável Componente de imagem.
Se não for configurado com cuidado, o consumo de memória e de rede pode afetar seriamente o desempenho do seu PWA. Além disso, se você pretende realizar o pré-cache, digamos, 50 imagens, e tiver 3 larguras por imagem, o usuário que mantém o site terá que manter uma lista de até 150 entradas na seção pré-cache do PWA das propriedades da página.
O Adobe também aconselha você a configurar seu site como um PWA após a estabilização do uso de imagens do projeto.