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.
Se você ainda não conhece o plugin, tem um post no blog sobre o o plugin.
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:
add_filter( 'web_app_manifest', function( $manifest ) {
$manifest['short_name'] = 'Shortness';
return $manifest;
} );
Code language: PHP (php)
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:
add_filter( 'web_app_manifest', function( $manifest ) {
$manifest['icons'] = array_map(
function ( $icon ) {
if ( ! isset( $icon['purpose'] ) ) {
$icon['purpose'] = 'any maskable';
}
return $icon;
},
$manifest['icons']
);
return $manifest;
} );
Code language: PHP (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çãoget_option('blogname')
short_name
: copia do título do site não maior que 12 caracteresdescription
: tag line do site vindo da funçãoget_option('blogdescription')
lang
: o idioma do site porget_bloginfo( 'language' )
dir
: a direção de leitura do siteis_rtl()
start_url
: a home da aplicaçãoget_home_url()
theme_color
: vindo do background customizado viaget_background_color()
background_color
: também vindo do background customizadodisplay
:minimal-ui
é o valor padrão.icons
: os ícones do site viaget_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.