Criando uma PWA WordPress

Blog fellyph cintra - post wp pwa 1

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:

O que é uma PWA?

Progressive Web Apps – PWA (aplicações web progressivas) são desenvolvidas utilizando APIs modernas para fornecer novos recursos somente disponíveis em aplicações nativas. Recursos como confiabilidade e capacidade de instalação, ao mesmo tempo, estão totalmente disponíveis a qualquer usuário, em qualquer tipo dispositivo com uma única base de código.

Como criar uma PWA WordPress com o plugin do Google

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.

Plugin PWA WordPress

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 usa uma checklist para fazer a validação do nosso site como uma PWA

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.

Primeira auditoria com lighthouse

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

Atributo short name

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:

Atualizando ícone do site

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

Banner de instalação

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.

Versão offline padrão

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.

Auditoria final

Para mais posts sobre PWA acesse 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.

3 comentários

  1. Estou pensando em instalar no meu blog mas estou em dúvida se devo. A vantagem seriam a velocidade e a disponibilidade?

    Gostei desse plugin porquê já uso o Site Kit e o AMP funcionando perfeitamente, então seria legal não quebrar nada tentando habilitar o PWA.

    1. Olá Marcos, velocidade seria o primeiro ponto que vc iria ganhar instalando o plugin de PWA, segundo seria a questão da disponibilidade com o suporte a offline e o páginas de error customizada. Além da possibilidade dos seus usuários conseguirem instalar seu blog como app. Se vc codou o seu tema vc pode criar estratégias de cache para assets como logo, fonts e ícones em diferentes templates do seu tema.

Deixe um comentário

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