Blog sobre WordPress, JavaScript, HTML, CSS, eventos e algo mais
Categoria:PWA – Progressive web apps
Progressive web apps ou PWA é um conceito que utiliza diversos recursos presentes em browsers modernos com um único objetivo melhorar a experiência do usuário.
O termo Progressive web apps surgiu por volta de 2016, mas como conseguimos identificar uma boa experiência do usuário, podemos utilizar três pontos de partida:
Confiável – quando nosso app é carregado instantaneamente e nunca mostre uma tela offline, isso através de recurso que permitem o suporte a aplicações offline.
Rápido – usuários mobile web possuem um grande bounce rate, aplicações que respondem em mais de três segundos possuem uma change muito grande de perde o usuário, para isso utilizamos recursos para reduzir o tempo de resposta de nossa aplicação.
Envolvente – Sinta-se utilizando um aplicativo nativo, com uma experiência imersiva do usuário.
Nesse post vamos ver como editar as propriedades do web app manifest json com o plugin de PWA oficial do google. No meu canal do YouTube recentemente fiz um vídeo falando sobre o plugin, e como transformar seu site WordPress em uma PWA. Nesse vídeo vamos ver como podemos alterar algumas propriedades via código.
Utilizando o plugin temos dois caminhos criar um mini plugin ou adicionar uma função no functions.php do nosso tema. Para esse tutorial vamos utilizar o arquivo functions.php.
Um exemplo básico podemos alterar o short_name do nosso manifest.json essa propriedade pode ter no máximo 12 caracteres por padrão ela ler o título do site, caso tenha um título maior que 12 caracteres não teremos um manifest json válido para resolver esse problema adicionamos o seguinte código em nosso arquivo functions.php de nosso tema:
No código acima adicionamos um filtro na chamada da função web_app_manifest e interceptamos o array com as propriedades do manifest.json e alteramos o elemento responsável pela propriedade short_name.
O segundo exemplo é um pouco mais complexo pois vamos acessar a lista de ícones de nossa aplicação. Recentemente o lighthouse adicionou em sua auditoria a validação para maskable icons e ainda não saiu uma nova versão com essa propriedade, pode ser que no futuro temos essa propriedade disponível mas por enquanto que a atualização não sai podemos ver como editar o nosso manifest.json e corrigir esse problema, para isso vamos adicionar o seguinte código em nosso functions.php:
Novamente adicionamos um filtro na função “web_app_manifest” ela recebe um parâmetro $manifest um array que contém as configurações do web app manifest. Assim conseguimos acessar o item do array com índice ‘icons’ e adicionamos uma nova propriedade ‘purpose’ atrelada ao ícone e por fim retornamos o manifest com os novos valores.
Propriedades
O manifest json é formado com os seguintes valores por padrão:
name: o título do site vindo da função get_option('blogname')
short_name: copia do título do site não maior que 12 caracteres
description: tag line do site vindo da função get_option('blogdescription')
lang: o idioma do site por get_bloginfo( 'language' )
dir: a direção de leitura do site is_rtl()
start_url: a home da aplicação get_home_url()
theme_color: vindo do background customizado via get_background_color()
background_color: também vindo do background customizado
display: minimal-ui é o valor padrão.
icons: os ícones do site via get_site_icon_url()
Todos os valores mencionados anteriormente podem ser alterados com a inclusão de filtros que vimos anteriormente. Então ficamos por aqui com esse post outro tipo de customização que conseguimos fazer com o plugin é a parte de estratégias de cache para isso vou dedicar um segundo post para entrar em mais detalhes. Mais posts sobre WordPress confiram a página da categoria.
Já anunciado nos eventos MSbuild e Web.dev live web app manifest tem algumas novas funcionalidades. Já nas versões 84 do Chrome Mobile e 85 para desktop agora temos a possibilidade de adicionar atalhos dentro de nossa aplicações com manifest.json.
Esse recursos para você usuário Apple, já era comum em apps nativos quando o usuário pressionava e segurava o ícone do aplicativo opções dentro do app eram exibidas. Como na imagem a seguir:
Exemplo de app shortcuts nativos no iOS
O recursos é ideal quando você deseja redirecionar usuários para funcionalidades chave de sua aplicação, navegação principal, buscas ou atividade de entrada de dados. Atualmente esse recurso pode ser implementado em Progressive Web apps em dispositivos Android e Windows desktop com Chrome e Edge o esse recurso em inglês é chamado de “app shortcuts” e conseguimos adicionar essa funcionalidade através da propriedade shortcuts.
Implementação
Para adicionar app shortcuts em nossa PWA precisamos adicionar a seguinte propriedade “shortcuts” em nosso manifest.json:
"shortcuts": [
{
"name": "Abrir Contatos",
"short_name": "Contatos",
"description": "Visualize a lista de contatos cadastrados",
"url": "/contatos",
"icons": [
{ "src": "//contatos.png", "sizes": "192x192" }
]
},
]
Code language:JavaScript(javascript)
Shortcuts espera um array de atalhos com as seguintes propriedades:
name: nome mais descritivo
short_name(opcional): nome alternativo para ser usado em áreas de espaço limitado.
description(opcional): descrição do app pode ser utilizado pelo OS e tecnologias assistivas no futuro.
url: a url a qual o App irá abrir. Essa URL precisa estar no escopo do manifest.json para isso precisa ser uma URL relativa.
icons: um array de ícones para o atalho com as propriedades: src, sizes e type(opcional).
SVG não são suportados para ícones utilize para esse caso PNG. Os tamanhos esperados são 36×36 48×48, 72×72, 96×96, 144×144 e 192×192 pixels.
Caso queira testa os seus apps shortcuts eles estarão visíveis no devtools do chrome ou edge na aba de aplicação dentro da seção do manifest, como podemos ver na imagem a seguir:
Boas práticas
Agora que sabemos como implementar atalhos em nossa pwa vamos falar sobre algumas boas práticas:
Ordene os app shortcuts por prioridades
Utiliza nomes distintos para seus atalhos
Mesure o uso dos atalhos via google analytics exemplo “/contatos?utm_source=homescreen”
Para finalizar vamos dar uma olhada em nosso código do manifest.json completo:
Fiz um pequeno texto com a aplicação que estamos desenvolvendo no curso de PWA e no windows o resultado será o seguinte:
Como podemos ver no screenshot no menu de opções temos os atalhos que definimos em nosso web app manifest.
Publiquei um post recentemente sobre o recurso em meu canal do youtube:
Então é isso pessoal o recurso novo nem todos os sistemas operacionais, windows e android já adicionaram o suporte agora só falta o suporte no iOS e MacOS. Para ler mais posts sobre PWA acesse a página da categoria PWA e até o próximo post.
Para adicionar ícones para PWA no iOS precisamos adicionar tags com diferentes tamanhos de imagens para serem usadas na tela principal dos usuário Apple, esses tamanhos mudaram com o passar dos anos em diferentes versões do Sistema operacional.
Nesse post vamos ver como Implementar esse recurso, Agosto de 2020 Safari ainda não segue as recomendações da W3C e utiliza um modo alternativo para definir os ícones de uma PWA, existe uma sinalização de parte do time do WebKit engine responsável pelo safari, mas isso já vem se arrastando a anos.
Enquanto o recurso na é padronizado precisamos, adicionar os ícones através da tag link passando um a propriedade rel=”apple-touch-icon”
Como mencionei anteriormente o tamanho muda entre versões do iOS atualmente os tamanhos esperados são 192×192 ou 180×180. A imagem precisa ser um PNG sem transparência.
Em versões mais antigas do iOS antes da versão 7 a propriedade era rel=”apple-touch-icon-precomposed” nesse caso podemos adicionar mais de uma tag caso queira adicionar fallback em sua aplicação web para versões antigas do iOS. E caso queira implementar os fallbacks os tamanhos serão:
57×57px – iPhone iPod Touch sem display retina
72×72px – iPad and iPad mini rodando iOS ≤ 6
76×76px – iPad and iPad mini rodando iOS ≥ 7
114×114px – iPhone com display retina iOS ≤ 6
120×120px – iPhone com display retina rodando iOS ≥ 7
144×144px – iPad and iPad mini com display retina rodando iOS ≤ 6
152×152px – iPad and iPad mini com display retina rodando iOS 7
180×180px – iPad and iPad mini com display retina rodando iOS 8+
Para adicionar uma aplicação em um dispositivo iOS o processo é um pouco escondido, primeiramente precisamos ir no botão de compartilhar:
Botão de compartilhar do safari
Em seguida precisamos adicionar nossa aplicação na tela principal:
Tela com a opção adicionando a tela principal
Por exemplo, uma aplicação sem a propriedade o ícone será um screenshot da sua aplicação como na imagem a seguir:
Exemplo de ícone sem a propriedade
Depois da adição do ícone apple-touch-icon o resultado será o o seguinte:
Nesse post iremos ver como utilizar o plugin oficial do Google para converter seu site WordPress em uma Progressive Web App, atualmente temos uma série de plugins para converter seu site em uma PWA, os 3 principais plugins são:
Nesse post vamos focar no plugin mantido pelo time do Google e XWP. Esse plugin foi criado com a intenção de fazer parte do core do WordPress aos poucos, no ano passado o plugin foi utilizado no tema do WordCamp Europe Berlin. Pelo fato que o plugin tem como objetivo fazer parte do core uma vez instalado o plugin não ativa nenhum painel mas quando realizamos auditoria com Lighthouse temos o seguinte resultado:
Lighthouse usa um checklist para fazer a validação se nosso site como uma PWA
Lighthouse olha para três categorias:
Rápido e estável: Rápido carregamento e suporte a offline.
Instalável: Uso de HTTPS e uso de web app manifest
Otimizado: Configurações para barra de navegação customizada, design responsivo, conteúdo disponível sem a execução de JavaScript, inclusão de configuração para apple-touch-icon
O plugin gera web app manifest através da REST API uma vez que o plugin é ativado você pode conferir o endereço /wp-json/wp/v2/web-app-manifest.
name: O título do site carregada pela função get_option(‘blogname’)
short_name: copia do site title com no máximo 12 caracteres
description: descrição do site get_option(‘blogdescription’)
lang: idioma do site get_bloginfo(‘language’)
start_url: home URL via get_home_url()
theme_color: background customizado via get_background_color()
background_color: também carregado pelo background customizado
display: por padrão é minimal-ui
icons: o ícone do site via get_site_icon_url()
Para a configuração completa sem modificação no código o título do site precisa ter menos de 12 caracteres, caso contrário precisamos customizar o nosso código, em outras palavras precisamos tocar no código. Weston criador do plugin PWA também criou um mini plugin para incluir essas informações sem código:
A Primeira vez que rodei a auditoria tive dois problemas, o primeiro era o título do menu site era maior que 12 caracteres e o segundo o ícone do meu site era inferior a 512px.
Primeira auditoria com lighthouse
Para resolver o problema do short_name inclui o plugin do Weston, ele inclui um campo extra no meu painel de configuração
Atributo short name
Após corrigir o problema com o short name o segundo problema foi referente aos ícones para isso precisamos adicionar uma PNG com mais de 512px como ícone de nossa aplicação no menu Personalizar > Identidade do site:
Atualizando ícone do site
Com o manifest.json corrigido temos a possibilidade de instalar o nosso site WordPress como na imagem a seguir:
Banner de instalação
Personalizando manifest.json
Lembrando que a ideia que esse plugin faça parte do core, muita coisa ainda pode mudar na versão de Julho de 2020 caso queiramos personalizar informações do manifest.json precisamos adicionar filtros(codificar) em nossa aplicação via tema com function.php ou criando um plugin:
Um dos recursos do plugin é a inclusão de template para usuários offline Erro 500, caso queira enviar uma mensagem personalizada para o usuário você pode incluir uma template com seguinte nome offline.php, 500.php ou error.php para uma mensagem mais genérica.
Versão offline padrão
Caso queira testar seu template você pode acessar o seguinte endereços:
Outro recurso do plugin é a possibilidade de comentários offline, o plugin utiliza Background Sync API para enviar os comentários quando o usuário recuperar a conexão.
Estratégias de Cache
O plugin utiliza WorkBox integrado com PHP para realizar abstração da implementação das estratégias de cache, para isso precisamos indicar extensões e rotas e quais estratégias serão implementadas:
Cache first
Stale while revalidate
Cache only
Network only
Para implementar estratégias de cache precisamos utilizar hooks e adiciona-los em nosso function.php
No segundo exemplo acima realizamos precaching de uma image específica em nosso tema e vinculamos uma versão para manter em cache até o plugin atualizar a versão, mais informações na página do github plugin.
Conclusão
Caso faça parte do core do WordPress isso será uma grande adição para o core do WordPress, o uso de bibliotecas externas como Workbox pode adicionar mais complexidade na incorporação desse plugin, mas o plugin é uma alternativa rápida para implementação de recursos de uma Progressive web app em nossos sites WordPres.
Vantagens
Fácil integração com outros plugins do Google como AMP para WordPress e Site Kit.
Inclusão de template para versão offline.
Possiblidade de comentários offline
API para implementação de estratégias de cache
Geração automática de Web App Manifest
Desvantagens
Necessidade de codificação para alguns recursos
Ausência de um painel de personalização para determinadas informações
Nenhuma integração para service worker
Após as configurações adicionadas corretamente temos nosso site WordPress atingindo as três metas: Rápido, estável, instalável e otimizado.
Nos meses de Maio e Junho tivemos as conferências para desenvolvedores da Microsoft Build e Apple WWDC. Nelas tivemos alguns novidades importantes para as Progressive web Apps.
Primeiramente a Microsoft reforçou sua estratégia de investir em Progressive Web Apps para desktop e o suporte do time da Microsoft ao projeto Fugu, Durante a apresentação: Building rich app experiences with Progressive Web Apps foram exibidas as novas integrações de PWA com o Windows 10 como:
Executando uma PWA quando o OS é inicializado
App Shortcuts
Integração com Share target
Associação de extensões de arquivos com PWAs
Associação de protocolos com PWAs
Proposta para personalizar a barra de título da janela da aplicação.
A seguir irei listar alguns recursos com mais detalhes.
Executando uma PWA quando o OS é inicializado
Assim como aplicações nativas também será possível definir uma PWA auto inicializar quando o usuário realiza o login no sistema operacional. Para habilitar esse recurso no Windows 10 adicionamos a seguinte propriedade em nosso manifest.json:
request_on_install: [
"runonstartup",
]
Code language:JavaScript(javascript)
Quando requisitado a instalação o usuário terá a opção de habilitar o novo recurso como na imagem abaixo:
Esse recurso estará disponível no Edge canary em julho
Share Target API para desktop
PWAs agora podem registrar se registrar como destino de compartilhamento em aplicações desktop. A share target API já um recursos disponível on Android, agora também estará disponível para Windows 10.
App shortcuts
Confesso que é um dos recursos que estou animado para testar, app shortcuts permite criar atalhos nas ações rápidas de sua aplicação, geralmente acessado pelo ícone na barra de tarefas(Desktop) ou na home screen(Android), este recurso estará em breve disponível para Chrome/Edge para mobile/desktop como podemos ver nas imagens abaixo:
app shortcuts windowsApp shortcuts android
Para adicionar shortcuts incluímos o seguinte código em nosso manifest.json:
"shortcuts": [
{
"name": "Play Later",
"description": "View the list of podcasts you saved for later",
"url": "/play-later",
"icons": [
{
"src": "/icons/play-later.svg",
"type": "image/svg+xml",
"purpose": "any"
}
]
},
{
"name": "Subscriptions",
"description": "View the list of podcasts you listen to",
"url": "/subscriptions?sort=desc"
}
]
Code language:JavaScript(javascript)
Associação de arquivos com PWA
Esse recurso permite associar sua aplicação PWA com tipos de arquivos, URLs e protocolos específicos, por exemplo dentro de seu arquivo manifest.json você irá adicionar as seguintes informações:
Atualmente não conseguimos realizar isso com Windows mas na novas versões do Windows 10 será possível associar uma PWA a um tipo de arquivo. Em sua PWA você saberá quando o usuário tentar abrir um arquivo em sua aplicação com o seguinte código:
Seguindo a mesma lógica, também conseguimos associar protocolos a PWAs, por exemplo, uma URL para enviar um email. A previsão para esse recursos são para a versão 86 do Edge.
Privacidade
Além dos recursos que listei anteriormente no Windows 10 também será possível o gerenciamento de acesso de recursos do seu app como por exemplo, Câmera e geolocalização.
WWDC 2020
WWDC é a conferência anual de desenvolvimento da Apple, nesse ano tivemos o anuncio do iOS14 e as nova versão do safari, já no lado da Apple não temos nenhum momento o uso do termo PWA parece algo proibido internamente, mas com a exclusão do termo tivemos melhorias relacionadas Progressive Web App no safari e para apps de terceiros.
Por exemplo, apps iOS anteriormente não tinham acesso na webview acesso a service worker, como a nova versão do WKWebView do iOS isso será possível. Isso ajudará apps como Chrome e Firefox iOS implementarem o suporte a recursos que dependem do service Worker.
Correções de bugs relacionados a service worker e XHR+Fetch
Inclusão de suporte a IDBFactory para IndexedDB
Melhorias na Apple Pay API
Também foram anunciadas melhorias referentes a CSS, Web Animations, Web Components, SVG e finalmente o suporte a WebP. Durante a apresentação sobre as novidades para desenvolvedores web, também mencionaram novidades já lançadas esse ano como Clipboard Async API.
Mas Pessoalmente o anuncio mais significante da semana foi O Anuncio de Jen Simmons como Web Technologies Evangelist, ela fez um trabalho maravilhoso na Mozilla e cria um pouco de esperança que o time do webkit priorize a padronização de alguns recurso no webkit.
I still can’t quite believe that this is now where I work.
Oh, yup. As of June 1. I’m Apple’s newest Web Technologies Evangelist for Safari & WebKit.
And those are now my teammates / company-mates presenting at WWDC. Watch on Monday! (Early Tuesday for some of you.) https://t.co/nrumIOMlaB
Esse ano não tivemos o Google I/O principal conferência para desenvolvedores do Google. Mas no final do mês de junho teremos o web.dev live evento focado totalmente em conteúdo web. Teremos algumas palestras relacionadas a PWA estou bastante ansioso para esse evento ele acaba fechando o ciclo de eventos das principais Empresas de tecnologias.