Criando uma PWA WordPress

Nesse post iremos ver como utilizar o plugin oficial do Google para criar uma PWA WordPress, atualmente temos uma série de plugins para converter o seu site em uma PWA, os 3 principais plugins são:

• Plugin PWA Google
• PWA for WP & AMP
• Super Progressive Web Apps

Plugin PWA WordPress Google

Nesse post vamos focar no plugin mantido pelo time do Google e XWP. Esse plugin foi criado com a intenção de fazer parte do core do WordPress aos poucos, no ano passado o plugin foi utilizado no tema do WordCamp Europe Berlin.

Pelo fato que o plugin tem como objetivo fazer parte do core uma vez instalado o plugin não ativa nenhum painel, mas quando realizamos auditoria com Lighthouse temos o seguinte resultado:

Lighthouse olha para três categorias:

• Rápido e estável: rápido carregamento e suporte a offline.
• Instalável: Uso de HTTPS e uso de web app manifest
• Otimizado: Configurações para barra de navegação customizada, design responsivo, conteúdo disponível sem a execução de JavaScript, inclusão de configuração para apple-touch-icon

O plugin gera web app manifest através da REST API uma vez que o plugin é ativado você pode conferir o endereço /wp-json/wp/v2/web-app-manifest.

O meu blog, por exemplo:

{
  "name": "Blog Fellyph Cintra",
  "start_url": "https:\/\/blog.fellyph.com.br\/",
  "display": "minimal-ui",
  "dir": "ltr",
  "lang": "pt-BR",
  "background_color": "#fafafa",
  "theme_color": "#fafafa",
  "description": "Blog sobre WordPress, JavaScript, HTML, CSS, eventos e algo mais",
  "icons": [
    {
      "src": "https:\/\/blog.fellyph.com.br\/wp-content\/uploads\/2018\/11\/cropped-1796698_795991100415208_12473649_n-192x192.jpg",
      "sizes": "192x192",
      "type": "image\/jpeg"
    },
    {
      "src": "https:\/\/blog.fellyph.com.br\/wp-content\/uploads\/2018\/11\/cropped-1796698_795991100415208_12473649_n.jpg",
      "sizes": "512x512",
      "type": "image\/jpeg"
    }
  ]
}
Code language: JSON / JSON with Comments (json)

Propriedade geradas pelo plugin PWA WordPress

As propriedades são geradas da seguinte forma:

• name: O título do site carregada pela função get_option(‘blogname’)
• short_name: copia do site title com no máximo 12 caracteres
• description: descrição do site get_option(‘blogdescription’)
• lang: idioma do site get_bloginfo(‘language’)
• start_url: home URL via get_home_url()
• theme_color: background customizado via get_background_color()
• background_color: também carregado pelo background customizado
• display: por padrão é minimal-ui
• icons: o ícone do site via get_site_icon_url()

Para a configuração completa sem modificação no código o título do site precisa ter menos de 12 caracteres, caso contrário precisamos customizar o nosso código, em outras palavras precisamos tocar no código.

Weston criador do plugin PWA também criou um miniplugin para incluir essas informações sem código:

https://gist.github.com/westonruter/dec7d190060732e29a09751ab99cc549

A Primeira vez que rodei a auditoria tive dois problemas, o primeiro era o título do menu site era maior que 12 caracteres e o segundo o ícone do meu site era inferior a 512px.

Para resolver o problema do short_name inclui o plugin do Weston, ele inclui um campo extra no meu painel de configuração

Após corrigir o problema com o short name o segundo problema foi referente aos ícones para isso precisamos adicionar uma PNG com mais de 512px como ícone da nossa aplicação no menu Personalizar > Identidade do site:

Com o manifest.json corrigido temos a possibilidade de instalar o nosso site WordPress como na imagem a seguir:

Personalizando manifest.json

Lembrando que a ideia que esse plugin faça parte do core, muita coisa ainda pode mudar na versão de julho de 2020 caso queiramos personalizar informações do manifest.json precisamos adicionar filtros(codificar) na nossa aplicação via tema com function.php ou criando um plugin:

add_filter( 'web_app_manifest', function( $manifest ) {
    $manifest['short_name'] = 'Shortness';
    return $manifest;
} );
Code language: PHP (php)

Caso o seu tema não suporte a ícones ou background personalizado precisamos incluir a informação, por exemplo, o theme_color:

add_filter( 'web_app_manifest', function( $manifest ) {
    $manifest['theme_color'] = '#0073AA';
    return $manifest;
} );Code language: PHP (php)

Versão Offline

Um dos recursos do plugin é a inclusão de template para usuários offline Erro 500, caso queira enviar uma mensagem personalizada para o usuário você pode incluir um template com seguinte nome offline.php, 500.php ou error.php para uma mensagem mais genérica.

Caso queira testar o seu template você pode acessar o seguinte endereços:

• https://your-site-name.com/?wp_error_template=offline;
• https://your-site-name.com/?wp_error_template=500

Comentários Offline

Outro recurso do plugin é a possibilidade de comentários offline, o plugin utiliza Background Sync API para enviar os comentários quando o usuário recuperar a conexão.

Estratégias de Cache do plugin PWA WordPress

O plugin utiliza WorkBox integrado com PHP para realizar abstração da implementação das estratégias de cache, para isso precisamos indicar extensões e rotas e quais estratégias serão implementadas:

• Cache first
• Stale while revalidate
• Cache only
• Network only

Para implementar estratégias de cache precisamos utilizar hooks e adiciona-los em nosso function.php

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) {
	$scripts->caching_routes()->register(
		'/wp-content/.*\.(?:png|gif|jpg|jpeg|svg|webp)(\?.*)?$',
		array(
			'strategy'  => WP_Service_Worker_Caching_Routes::STRATEGY_CACHE_FIRST,
			'cacheName' => 'images',
			'plugins'   => array(
				'expiration' => array(
					'maxEntries'    => 60,
					'maxAgeSeconds' => 60 * 60 * 24,
				),
			),
		)
	);
} );
Code language: PHP (php)

No código acima adicionamos uma estratégia cache first a todas as imagens dentro da pasta \wp-content\.

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) {
	$scripts->precaching_routes()->register(
		'https://example.com/wp-content/themes/my-theme/my-theme-image.png',
		array(
			'revision' => get_bloginfo( 'version' ),
		)
	);
} );
Code language: PHP (php)

No segundo exemplo acima realizamos precaching de uma image específica em nosso tema e vinculamos uma versão para manter em cache até o plugin atualizar a versão, mais informações na página do github plugin.

Conclusão

Caso faça parte do core do WordPress isso será uma grande adição para o core do WordPress, o uso de bibliotecas externas como Workbox pode adicionar mais complexidade na incorporação desse plugin, mas o plugin é uma alternativa rápida para implementação de recursos de uma Progressive web app em nossos sites WordPres.

Vantagens

• Fácil integração com outros plugins do Google como AMP para WordPress e Site Kit.
• Inclusão de template para versão offline.
• Possiblidade de comentários offline
• API para implementação de estratégias de cache
• Geração automática de Web App Manifest

Desvantagens

• Necessidade de codificação para alguns recursos
• Ausência de um painel de personalização para determinadas informações
• Nenhuma integração para service worker

Após as configurações adicionadas corretamente temos nosso site WordPress atingindo as três metas: Rápido, estável, instalável e otimizado.

Para mais posts sobre PWA acesse a página da categoria.