Se você é um líder técnico ou analista de marketing digital interessado em fornecer uma experiência Web moderna para seu aplicativo da Web Adobe Experience Manager (AEM) e está procurando opções para isso, você veio ao artigo certo. Vamos explicar o que são Progressive Web Apps (PWA) e o que é necessário para criar um PWA no AEM, aproveitando a biblioteca WorkBox pela configuração, sem programação.
Por que usar PWA?
Os Progressive Web Apps aproveitam o que a Web moderna pode fazer. Eles podem ser instalados no seu dispositivo e carregados rapidamente, e as visitas subsequentes são carregadas instantaneamente. Eles respondem rapidamente à entrada. Elas funcionam bem em conexões não confiáveis ou off-line. Os PWAs usam APIs modernas para proporcionar uma experiência envolvente, semelhante a um app, com uma interface de 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, é preciso adicionar dois elementos:
- 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 app.
- Um service worker: um script que fornece serviços em segundo plano que enriquecem seu PWA ao definir os recursos que o PWA usa e as estratégias para acessá-los.
O que é um service worker?
Em sua essência, um service worker é apenas um script que seu navegador executa de forma 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, mantendo os dados atualizados usando a API Background Sync e integrando com notificações push. Um service worker com a estratégia certa de armazenamento em cache fornece experiências do usuário estáveis e confiáveis para 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 que ajuda você a escrever e gerenciar service workers e 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 que você retorne conteúdo armazenado em cache quando off-line. Com o Workbox, você configura e gerencia rapidamente ambos e muito mais, com código pronto para produção.
Como fazer upgrade de um site do AEM para um PWA
O Adobe Experience Manager (AEM) é uma solução abrangente de gerenciamento de conteúdo para a criação de sites, apps para dispositivos móveis, formulários e sinalização digital. Ele facilita o gerenciamento dos ativos e do conteúdo de marketing.
Embora o AEM forneça uma biblioteca avançada para a criação de aplicativos da Web, até agora era difícil criar um PWA adicionando um service worker e um manifesto.
O Sites do Adobe Experience Manager é a ferramenta de criação de interface que faz parte do Adobe Experience Manager. Quando usado com o Adobe Experience Manager como um serviço de nuvem, o AEM Sites facilita a conversão de qualquer site AEM ou aplicativo de página única existente em um Progressive Web App instalável ativado off-line com apenas configuração e sem codificação. Ele usa o Workbox para fornecer as práticas recomendadas para Progressive Web Apps e abstrai as complexidades da criação de manifestos boilerplate e service workers.
O AEM oferece suporte à localização de conteúdo, o que significa que você pode ter uma marca diferente e até mesmo conteúdo off-line diferente para diferentes localidades. Para fazer isso, crie diferentes configurações de PWA para cada mestre de idioma.
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 do Adobe Experience Manager ou as propriedades do mestre do idioma. Será exibida uma guia chamada "Progressive Web App". (Observação: se essa guia não aparecer, entre em contato com a Adobe para ativar esse recurso.) Configure a instalação e a aparência dos Progressive Web Apps com apenas alguns cliques.
Se você já concluiu os tutoriais dos sites do AEM, provavelmente já viu o site WKND antes. Este artigo usa a demonstração do 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 de app da Web é um arquivo JSON que contém propriedades que descrevem a aparência e o comportamento de um PWA. Os sites do Adobe Experience Manager têm uma interface do usuário simples para configurar as propriedades.
O URL de início é o ponto de entrada do seu PWA. Quando um usuário toca no ícone do PWA no smartphone, ele acessa o URL de inicialização. O modo de exibição configura se o app é uma experiência em janela ou em tela cheia. 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 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 é instalado. A configuração mostrada na imagem gera o manifesto JSON 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"
}
]
}
O URL de início pode ser diferente da página de destino padrão do seu domínio. Ao alterar o parâmetro start_url, você pode direcionar seus usuários diretamente para a experiência do aplicativo em vez da página padrão que seria apresentada a um usuário novo ou não autenticado. Isso oferece aos usuários de PWA uma experiência mais suave e semelhante a apps.
O AEM entende que localidades diferentes podem ter uma aparência diferente. Você pode configurar diferentes propriedades, cores e ícones para diferentes localidades ou idiomas e, em seguida, sincronizar a configuração com as páginas vinculadas.
Depois que o PWA for acessado no navegador, você poderá clicar com o botão direito do mouse e inspecionar para abrir o DevTools e ver o manifesto no painel Applications.
Configurar o service worker
É possível configurar o conteúdo e a estratégia de armazenamento em cache.
Se você usa service workers, provavelmente já conhece as estratégias de armazenamento em cache. As estratégias de armazenamento em cache especificam quais recursos devem ser armazenados em cache e se devem ser procurados no cache primeiro, na rede primeiro ou no cache com uma rede substituta. Depois, escolha os recursos que serão pré-armazenados em cache quando o service worker estiver instalado. Os service workers de aplicativos do AEM implementam uma estratégia de cache quente, o 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" refere-se às bibliotecas do lado do cliente: a combinação de JavaScript, CSS e recursos estáticos relacionados que foram adicionados ao seu projeto que são veiculados e utilizados pelo navegador da Web do cliente. Você pode configurar suas bibliotecas do lado do cliente para serem usadas off-line especificando-as na interface do usuário.
Também é possível incluir recursos de terceiros, como fontes. Essa configuração de cache off-line fornece informações de configuração para um service worker gerado para seu aplicativo que usa a caixa de trabalho internamente. Isso é praticamente tudo para tornar seu aplicativo instalável. Depois de instalado, o ícone do aplicativo aparecerá na tela inicial do dispositivo móvel, como um aplicativo de plataforma. Clique no ícone para acessar o site do Wknd.
Você pode mudar seu conteúdo ou essas configurações a qualquer momento. Quando você publicar suas 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 aplicativos e ferramentas para desenvolvedores do navegador para visualizar os detalhes do service worker.
É possível expandir o armazenamento em cache para visualizar o conteúdo que foi armazenado em cache localmente:
Os resultados
É hora de olhar para os resultados do seu trabalho duro. Com apenas a configuração e sem programação, você acabou de aprimorar seu site do AEM para se tornar um Progressive Web App.
As ferramentas para desenvolvedores do Chrome oferecem uma auditoria-modelo que permite verificar a conformidade do seu aplicativo da Web e da sua configuração com os padrões do App Web Progressivo.
Conclusão
Os Progressive Web Apps proporcionam uma experiência semelhante à de aplicativo para seu site, que usa várias plataformas e a natureza aberta da Web a um custo menor de desenvolvimento e manutenção, além de fornecer controle sobre a distribuição. Isso melhora o engajamento, a retenção e, o mais importante, gera taxas de conversão mais altas. O AEM e o Workbox facilitam o processo de transformar seu site atual em um PWA sem precisar de programação.
Referências
- Tutorial do WKND (em inglês)
- Service workers
- API Cache
- Manifesto do aplicativo da Web
- Suporte a ícones adaptativos em PWAs com ícones mascaráveis
- Saiba mais sobre os sites do Adobe Experience Manager
- Saiba mais sobre o Workbox:
- Estratégias de armazenamento em cache da caixa de trabalho:
- Saiba mais sobre Progressive Web Apps.