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.

Video de introdução a PWAs para WordPress e web app manifest

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.

Página do plugin PWA para WordPress

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

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.