Tag: pwa for wp

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;
} );

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;
} );

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.