Editando o web app manifest com o plugin de PWA para WordPress

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 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çã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.