Se você é um líder técnico ou analista de marketing digital interessado em fornecer uma experiência moderna da Web para seu aplicativo da Web Adobe Experience Manager (AEM), e está procurando suas opções para fazer isso, chegou ao artigo certo. Este guia abordará o que são Progressive Web Apps (PWA) e o que você precisa para criar um PWA no AEM utilizando a biblioteca do WorkBox por meio de configuração, sem programação.
Por que usar o PWA?
Os Progressive Web Apps aproveitam os recursos da Web moderna. Eles podem ser instalados no seu dispositivo, carregam rapidamente e os visitantes subsequentes são carregados instantaneamente. Eles respondem às entradas rapidamente. Eles funcionam bem em uma conexão não confiável ou off-line. Os PWAs usam APIs modernas para oferecer uma experiência envolvente como a do app, com interface em tela cheia opcional, atualização em segundo plano e acesso off-line aos dados.
Para transformar um app da Web em um Progressive Web App, é necessário adicionar dois artefatos:
- Um manifesto de app da Web: um arquivo de configuração JSON que define o URL do ponto de entrada do app, o ícone usado para representar o PWA e outras configurações que descrevem a aparência e o comportamento do aplicativo.
- Um service worker: um script que fornece serviços em segundo plano que aprimoram o PWA definindo os recursos que ele usa e as estratégias para acessá-los.
O que é um service worker?
Basicamente, um service worker é apenas um script que seu navegador executa de maneira independente à medida que você interage com seu aplicativo da Web. Um service worker ativo fornece serviços como armazenamento em cache inteligente usando a API Cache, manutenção dos dados atualizados usando a API Background Sync e integração com notificações push. Um service worker com a estratégia certa de armazenamento em cache fornece experiências de usuário estáveis e confiáveis em vários cenários, retornando recursos pré-armazenados em cache instantaneamente, armazenando dados em cache e atualizando recursos quando conectado à Web.
Os service workers podem ser difíceis de escrever do zero. A caixa de trabalho foi criada para facilitar esse processo. O Workbox é um conjunto de bibliotecas para ajudar você a gravar e gerenciar service workers e o armazenamento em cache com a API Cache Storage. Os service workers e a API Cache Storage, quando usados juntos, controlam como os recursos (HTML, CSS, JS, imagens etc.) são solicitados da rede ou do cache, permitindo inclusive que você retorne o conteúdo armazenado em cache quando estiver off-line. Com o Workbox, você configura e gerencia rapidamente essas duas ferramentas e muito mais, com códigos prontos para produção.
Upgrade de um site do AEM para um PWA
O Adobe Experience Manager (AEM) é uma solução de gerenciamento de conteúdo abrangente para a criação de sites, aplicativos para dispositivos móveis, formulários e sinalização digital. Ele facilita o gerenciamento do seu conteúdo e recursos de marketing.
Embora o AEM forneça uma biblioteca avançada para a criação de aplicativos da Web, até agora foi difícil criar um PWA adicionando um service worker e um manifesto.
O Adobe Experience Manager Sites é a ferramenta de criação de interface que faz parte do Adobe Experience Manager. Quando usado com o Adobe Experience Manager como serviço na nuvem, o AEM Sites facilita a conversão de qualquer site do AEM ou aplicativo de página única existente em um Progressive Web App instalável off-line, com apenas configuração e sem programação. Ele usa o Workbox para fornecer as práticas recomendadas para Progressive Web Apps e abstrai as complexidades de escrever manifestos boilerplate e service workers.
O AEM oferece suporte à localização de conteúdo, o que significa que você pode ter diferentes marcas e até conteúdos off-line diferentes em cada localidade. Para fazer isso, crie configurações de PWA diferentes para cada mestre de linguagem.
Primeiros passos com a configuração de PWA no AEM
Faça login no Adobe Experience Manager como um serviço do Cloud, selecione qualquer página de sites ou mestre de idioma do Adobe Experience Manager e clique nas propriedades. Você verá uma guia chamada Progressive Web App. Observação: se essa guia não for exibida, entre em contato com a Adobe para ativar esse recurso. Você pode configurar a instalação e a aparência dos seus Progressive Web Apps com apenas alguns cliques.
Se você concluiu os tutoriais do AEM Sites, provavelmente já viu o site do WKND antes. Este artigo usa a demonstração WKND como ponto de partida. Quando terminar, você terá atualizado o WKND de um app da Web para um PWA usando o WorkBox.
Configurar o manifesto
O manifesto do app da Web é um arquivo JSON com propriedades que descrevem a aparência e o comportamento de um PWA. O Adobe Experience Manager Sites oferece uma interface do usuário amigável para configurar as propriedades.
O URL inicial é o ponto de entrada do PWA. Quando um usuário tocar no ícone do PWA no smartphone, ele acessará o URL de inicialização. O modo de exibição define se o app vai ser uma experiência em tela cheia ou em janela. Também é possível especificar a orientação da tela do aplicativo. A cor do tema é a cor da janela e da barra de ferramentas, enquanto a cor do plano de fundo é a cor da tela de apresentação quando o aplicativo é iniciado. O ícone é a imagem mostrada na tela inicial ou na gaveta de aplicativos do dispositivo quando o aplicativo está instalado. A configuração mostrada na imagem gera o JSON do manifesto mostrado abaixo.
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
Esse URL pode ser diferente da página de destino padrão do seu domínio. Ao mudar o parâmetro start_url, você pode direcionar os usuários diretamente para a experiência do aplicativo em vez da página padrão que um usuário novo ou não autenticado seria apresentado. Isso proporciona aos usuários do PWA uma experiência mais suave e semelhante à dos apps.
A AEM entende que diferentes localidades podem ter uma aparência diferente. Você pode configurar diferentes propriedades, cores e ícones para diferentes localidades ou idiomas e sincronizar a configuração com as páginas vinculadas.
Depois de acessar o PWA no navegador, clique com o botão direito do mouse e inspecione para abrir o DevTools e visualizar o manifesto no painel "Applications".
Configurar o service worker
Você pode configurar o conteúdo a ser armazenado em cache e a estratégia a ser usada.
Se você tem usado service workers, deve conhecer as estratégias de armazenamento em cache. As estratégias de armazenamento em cache especificam quais recursos devem ser armazenados em cache e se eles precisam ser procurados primeiro no cache, na rede primeiro ou no cache com um substituto de rede. Em seguida, escolha os recursos que vão ser pré-armazenados em cache quando o service worker estiver instalado. Os service workers de aplicativos do AEM implementam uma estratégia de cache quente que significa que a experiência do usuário não será interrompida mesmo se você especificar um caminho ausente ou corrompido.
No AEM, o termo "clientlibs" se refere a bibliotecas do lado do cliente: a combinação de JavaScript, CSS e recursos estáticos relacionados que foram adicionados ao seu projeto e usados pelo navegador da Web do cliente. Você pode facilmente configurar suas bibliotecas do lado do cliente para serem usadas off-line especificando-as na interface do usuário.
Você também pode incluir recursos de terceiros, como fontes. Essa configuração de cache off-line fornece informações de configuração para um service worker que é gerado para seu aplicativo que usa a caixa de trabalho internamente. Isso é praticamente tudo o que há para tornar seu aplicativo instalável. Depois de instalado, o ícone do aplicativo aparecerá na tela inicial do seu dispositivo móvel, assim como um aplicativo de plataforma. Clique no ícone para acessar o site.
Você pode mudar seu conteúdo ou essas configurações a qualquer momento. Quando você publicar as alterações, o service worker será atualizado no cliente pelo navegador e uma mensagem será apresentada ao usuário informando que uma versão mais recente do PWA está disponível. O usuário pode clicar na mensagem para recarregar o aplicativo e obter as atualizações mais recentes. É possível abrir o painel de ferramentas e aplicativos para desenvolvedores do navegador para ver os detalhes do service worker.
É possível expandir o armazenamento em cache para visualizar o conteúdo armazenado em cache localmente:
Os resultados
Chegou a hora de conferir os resultados do seu trabalho. Com apenas configuração e sem programação, você acaba de aprimorar seu site do AEM para se tornar um App Web Progressivo.
As ferramentas para desenvolvedores do Chrome oferecem uma auditoria de farol que permite verificar a conformidade do seu aplicativo da Web e da sua configuração com os padrões do Progressive Web App.
Conclusão
Os Progressive Web Apps fornecem uma experiência semelhante a um app para seu site, que usa a natureza aberta e em várias plataformas da Web por um custo menor de desenvolvimento e manutenção, além de oferecer controle sobre a distribuição. Isso melhora o engajamento, a retenção e, o mais importante, gera taxas de conversão mais altas. Com o AEM e o Workbox, é fácil transformar seu site em um PWA com apenas configuração e sem codificação.
Referências
- Tutorial de WKND
- Service workers
- API Cache
- Manifesto do aplicativo da Web
- Suporte para ícones adaptativos em PWAs com ícones mascaráveis (link em inglês)
- Saiba mais sobre o Adobe Experience Manager Sites
- Saiba mais sobre o Workbox:
- Estratégias de armazenamento em cache da caixa de trabalho:
- Saiba mais sobre Progressive Web Apps