Categorias
PWA - Progressive web apps WordPress

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

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.

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.

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
  • 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.

Categorias
PWA - Progressive web apps

Adicionando os ícones para PWAs no iOS

Para adicionar ícones para PWA no iOS precisamos adicionar tags com diferentes tamanhos de imagens para serem usadas na tela principal dos usuário Apple, esses tamanhos mudaram com o passar dos anos em diferentes versões do Sistema operacional.

Nesse post vamos ver como Implementar esse recurso, Agosto de 2020 Safari ainda não segue as recomendações da W3C e utiliza um modo alternativo para definir os ícones de uma PWA, existe uma sinalização de parte do time do WebKit engine responsável pelo safari, mas isso já vem se arrastando a anos.

Enquanto o recurso na é padronizado precisamos, adicionar os ícones através da tag link passando um a propriedade rel=”apple-touch-icon”

<link rel="apple-touch-icon" href="/endereço-do-meu_icone.png">

Como mencionei anteriormente o tamanho muda entre versões do iOS atualmente os tamanhos esperados são 192×192 ou 180×180. A imagem precisa ser um PNG sem transparência.

Em versões mais antigas do iOS antes da versão 7 a propriedade era rel=”apple-touch-icon-precomposed” nesse caso podemos adicionar mais de uma tag caso queira adicionar fallback em sua aplicação web para versões antigas do iOS. E caso queira implementar os fallbacks os tamanhos serão:

  • 57×57px – iPhone iPod Touch sem display retina
  • 72×72px – iPad and iPad mini rodando iOS ≤ 6
  • 76×76px – iPad and iPad mini rodando iOS ≥ 7
  • 114×114px – iPhone com display retina iOS ≤ 6
  • 120×120px – iPhone com display retina rodando iOS ≥ 7
  • 144×144px – iPad and iPad mini com display retina rodando iOS ≤ 6
  • 152×152px – iPad and iPad mini com display retina rodando iOS 7
  • 180×180px – iPad and iPad mini com display retina rodando iOS 8+

Para adicionar uma aplicação em um dispositivo iOS o processo é um pouco escondido, primeiramente precisamos ir no botão de compartilhar:

Botão de compartilhar do safari

Em seguida precisamos adicionar nossa aplicação na tela principal:

Tela com a opção adicionando a tela principal

Por exemplo, uma aplicação sem a propriedade o ícone será um screenshot da sua aplicação como na imagem a seguir:

Exemplo de ícone sem a propriedade

Depois da adição do ícone apple-touch-icon o resultado será o o seguinte:

Resultado final com a adição da propriedade.

Esse é um conteúdo base do curso de PWA, para acompanhar as aulas acesso a playlist do curso: https://www.youtube.com/playlist?list=PLmIA3VZysEqQCi5xOJJDb5QIYgHwPhf_D

Para mais posts sobre Progressive web apps acesse a página da categoria: https://blog.fellyph.com.br/category/pwa/

Categorias
PWA - Progressive web apps WordPress

Transformando seu site WordPress em uma PWA

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

Plugin PWA 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 usa um checklist para fazer a validação se 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.

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" } ] }

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 mini plugin 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 de 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) em 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; } );

Caso o seu tema não suporte í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; } );

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 uma 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 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

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

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

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.

Categorias
PWA - Progressive web apps Tutoriais

Geolocation API

Vamos falar sobre geolocation esse post servirá como base para o conteúdo do curso de PWA que estou rodando no meu canal. Na versão 2020 do curso iremos abordar Web APIs disponíveis para iOS e nesse primeiro posts iremos abordar a Geolocation web API.

Umas das primeiras web APIs lançadas junto com o HTML5, para termos noção esse recurso estava disponível na versão 5 do Chrome e Safari em 2010. A Geolocation API possui uma série de funções e eventos que permitem a localização do usuário através doso dados: latitude e longitude.

Relatório do “can I use”

Suporte

Esse recurso é totalmente dependente do device do usuário vimos que o recurso é presente 94% dos browsers que suporte alto. Mas a sua precisão depende que o device que possua GPS, caso contrário essa informação será gerada através de cruzamento de dados, por exemplo, rede e endereço IP. Isso significa se o device não possuir suporte essa informações não serão tão precisas.

GPS

Outro ponto importante é o consumo de bateria, para o os dispositivos móveis o acesso ao GPS causa um custo maior de processamento assim aumenta o consumo de bateria, então é importante fazer o uso consciente desse recurso.

Privacidade

Na maioria dos devices esse recurso é dependente de uma conexão HTTPS, também antes do acesso a esse recurso o browser irá requisitar permissão de acesso a Geolocalização do usuário. Como podemos ver na imagem a seguir:

Exemplo pop up de permissão da apple

Ideal caso armazene ou monitore a movimentação do usuário deixe claro o uso desse recurso. Esse recurso também só será acessado em uma aplicação que estiver rodando em um servidor web.

Código

Depois de uma introdução sobre a API agora vamos ver como utiliza-la em nossa aplicação:

navigator.geolocation.getCurrentPosition(geoSuccess, geoError); const geoSuccess = (position) => { console.log(position.coords.latitude, position.coords.longitude); }; const geoError = (error) => { console.log('Error occurred. Error code: ' + error.code); };

No código acima fazem a chamada da api dentro de navigator, podemos conferir se o browser tem suporte a geolocation verificando se o atribulo é nulo mas em 2020 a api está presente na maioria dos browsers então não vou me preocupar como esse ponto.

Chamamos a função get position responsável por requisitar a latitude e longitude do usuário. Ela recebe como parâmetro duas funções uma parar executar caso sucesso ou falha de acesso ao recurso.

Se a requisição for bem sucedida teremos a chamada da função geoSuccess com o retorno da latitude(position.coords.latitude) e longitude(position.coords.longitude). Em caso de erro teremos a chamada da função geoError com os possíveis códigos:

  • 0: erro desconhecido
  • 1: permissão negada
  • 2: erro na resposta da fonte da informação
  • 3: timed out

Essa é uma introdução ao assunto em breve estarei postando um vídeo sobre o assunto em meu canal. Qualquer dúvida deixe um comentário ou continue lendo mais tutoriais na página da categoria.

Referência: MDN Geolocation API

Veja também as aulas sobre o assunto no curso de PWA

Categorias
Web

PWAs em 2020

Todos os anos temos uma compilação dos últimas features referentes a PWA no Google I/O o congresso anual do Google para desenvolvedores. No último ano 2019 confesso que não fiquei muito empolgado com os lançamentos relacionados a PWA no Google I/O, mas analisando por um outro lado é o resultado de uma maturidade do conceito PWA.

Progressive web apps em si, já tem sua base, com Service Workers e Web manifest não temos muito o que mudar. Saber dos valores de criar apps rápidos, seguros e que cativem o usuário, por fim, temos a evolução das Web APIs esse é um ponto que ainda terá uma evolução, as Web APIs nos permitem implementar recursos antes só possíveis com aplicações nativas esse ponto irei falar mais pra frente.

Por conta da situação que estamos passando as principais conferências no mundo foram canceladas e o Google I/O também está incluso nessa lista então não teremos um evento principal com anúncio de novas features relacionadas a PWAs, mas esse ano acredito que teremos lançamentos menores com seguindo as versões do Chrome e numa previsão otimista teremos um Chrome Summit online.

Releases do Chrome

Com toda a situação com o covid-19 o calendário de lançamentos do Chrome foi alterado, tivemos na última semana a versão 81 sendo lançada com suporte em versão de teste a NFC e suporte total a badging api, mas Google anunciou que irá pular a versão 82 atrasando o anuncio de alguns novos recursos em 6 semanas, mas o Google irá trabalhar apenas em bugs e correções de segurança durante esse período e somente lançar a versão 83. Se a situação se normalizar eles voltarão ao ciclo de 6 semanas.

Projeto Fugu

Apresentação do Projeto Fugu no I/O 2019

Projeto Fugu, é um projeto que visa habilitar na plataforma web recursos que eram somente possíveis com apps nativos uma série de empresas estão envolvidas nesse processo. Mas Claro que os releases do Chrome influenciam na implementação de recursos PWA eles são responsáveis pelos browsers Android e recentemente é o motor por trás do Microsoft Edge.

Com a adoção do Edge ao Chromium aumentou a quantidade de desenvolvedores, assim dando um fôlego maior ao Projeto Fugu na implementação de novas web APIs. Não só apenas Google e Microsoft contribuem com o Projeto Fugu, mas temos empresas como Intel e Samsung como contribuidores.

Google compartilhar uma lista pública de quando as funcionalidades serão implementadas no Chrome, que você confere aqui: https://docs.google.com/spreadsheets/d/1de0ZYDOcafNXXwMcg4EZhT0346QM-QFvZfoD8ZffHeA/edit#gid=557099940

O legal dessa lista é atualizada a cada release do chrome, outro ponto importante você também pode contribuir com sugestões de features: https://developers.google.com/web/updates/capabilities

Recursos para PWAs já lançados em 2020(Abril)

  • Web Share API target
  • Contact Picker API
  • Periodic Background Sync
  • Web OTP API – Screen Lock
  • Clipboard para imagens
  • Launch keyboard Map API

Recursos da Web API previstas para 2020

  • Web NFC
  • Content Index API
  • Screen enumeration API
  • File Handling API
  • getInstalledRelatedApps
  • Native File system API
  • WakeLock API – Screen Lock
  • Shape detection API

iOS

Quase contra-mão o Webkit trabalha de forma isolada, tratando de recursos que a Apple acha prioridade para o safari, por exemplo, na última versão do safari 13.1 tivemos a inclusão de recursos como:

  • Async Clipboard API
  • Picture-in-Picture API
  • Remote Playback API

Muitas empresas já viram o benefício de se investir em PWAs, mas a Apple evita de mencionar o termo PWA por conta de ser um termo vindo do Google para definir o conceito. Segundo acredito no ponto de vista relacionado ao business atual da empresa que a Apple Store, como ela irá encaixar PWAs com apps nativos.

Particularmente acredito que a Apple continuará implementando novos recursos da Web API quando é de seu interesse e a tentará uma implementação da formula diferente da apresentada pelo Google. Mas 2020 ainda não será o ano que teremos full suporte pela Apple. Para saber mais sobre PWA confira a página do curso de Progressive web Apps.