Nesse post vamos ver como editar as propriedades do web app manifest 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 o seu site WordPress em uma PWA.
O que é Web app manifest?
O web app manifest é um arquivo JSON que contém as informações necessárias para transformar a sua web app em uma Progressive Web App. Ele fornece à sua app um nome, uma imagem de ícone, uma descrição e outras opções importantes.
Além disso, o web app manifest é usado pelo Google Chrome e outros navegadores para oferecer às suas apps uma experiência de app nativa tanto em browsers mobile e desktop. Neste artigo, vamos abordar o que é o web app manifest e como ele pode melhorar a experiência do usuário final com a sua Progressive Web App.
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.
Como adicionar código no WordPress?
Primeiramente, se iremos realizar uma alteração em produção precisamos realizar um backup da nossa aplicação. Especialmente se você não está familiarizado com código.
A opção mais simples é alterando o código do functions.php
esse processo é válido quando você possui um tema que não tem atualizações constantes. Caso contrário um tema filho ou um plugin será a melhor opção, porque as suas alterações não serão afetadas caso o tema principal seja atualizado.
Como adicionar propriedades no web app manifest via código
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 no nosso arquivo functions.php do 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
.
Utilizando propriedades do site para customizar o web app manifest
O segundo exemplo é um pouco mais complexo, pois vamos acessar a lista de ícones da nossa aplicação. Recentemente o lighthouse adicionou na 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 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 no 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 do web app manifest
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.
Deixe um comentário