Tag: iOS

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">
Code language: HTML, XML (xml)

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
JavaScript

Web Share api

Web Share API permite o usuário compartilhar conteúdo através do card de compartilhamento nativo do sistema operacional em que está sendo executado, nos dispositivos Android esse suporte surgiu na versão 61 do Chrome em 2017, já para para iOS o suporte foi incluído no Safari em 2019 na versão 12.2 do iOS.

Para fazer a chamada no card nativo de compartilhamento chamamos a função navigator.share() em nosso browser, esse método faz parte da Web Share API, ele dá o controle ao usuário de como ele quer compartilhar esse conteúdo. Seu uso é baseado em Promise, o método aceito um objeto com as informações de título, texto de descrição e url como podemos ver no código abaixo:

if (navigator.share) {
  navigator.share({
      title: 'Blog Fellyph Cintra',
      text: 'Como compartilhar conteúdo com web share API',
      url: 'https://blog.fellyph.com.br/',
  })
    .then(() => console.log('Compartilhamento realizado com sucesso'))
    .catch((error) => console.log('Erro no compartilhamento', error));
}

Code language: JavaScript (javascript)

No exemplo acima, inicialmente utilizamos uma condicional para verificar se o suporte a web share api existe, caso positivo definimos o conteúdo que será compartilhado e adicionamos um then para tomar uma ação caso o compartilhamento seja realizado com sucesso ou catch em caso de error.

Requisitos

Para invocar o card nativos precisamos de alguns requisitos:

  • A URL deve ser servida por HTTPS
  • O método share deve ser invocado por uma resposta do usuário, por exemplo, um evento de click. Você não pode chamar a share API em um evento de page load.
  • Você só pode compartilhar uma URL dentro do escopo da aplicação
  • Sempre verifique se o usuário tem suporte a essa feature antes de chamar o método

Resultado

No lado esquerdo temos o resultado no iOS e a versao Android no lado direito

Na imagem acima temos dois exemplos de como o card de compartilhamento será exibido no Android e iOS. Para a plataforma iOS o recurso está disponível para Chrome e Safari. Vamos finalizamos por aqui caso tenha alguma dúvida só deixar um comentário.

Categorias
Web WordPress

WordPress para iOS

Nessa semana eu testei a app do wordpress para iOS. O aplicativo está disponível na apple store sem nenhum custo e você pode baixar no seguinte link :

http://itunes.apple.com/us/app/wordpress/id335703880?mt=8

Com a App instalada, você deve adicionar um blog wordpress ele pode ser um blog da comunidade wordpress.com aqueles blogs que ficam hospedados no wordpress.com, por exemplo, www.fellyph.wordpress.com ou um blog próprio com este. Selecionei a opção que se aplica ao meu caso um “site wordpress.org”.

Em seguida informei os dados do meu blog, endereço , usuário e senha. Quando tentei logar o aplicativo deu um alerta pedindo para autorizar uma opção de “publicação em XML-RPC” por padrão o wordpress vem com essa opção desabilitada. Para habilitar essa opção logue no admin do seu blog e vá na tela de configurações de escrita que fica na seção de configurações do seu blog, e habilite a opção “Ativar os protocolos de publicação XML-RPC do WordPress, Movable Type, MetaWeblog e Blogger.” como você pode conferir na imagem abaixo :

E o que é o XML-RPC? Traduzindo em português a sigla RPC significa protocolo de chamada de procedimento remoto, ele trabalha com um XML que lista suas chamadas. Isso possibilita ao aplicativo fazer acesso remoto ao worpdress via HTTP.

Acima temos uma imagem da aplicação devidamente logada, temos listagem dos últimos posts do blog, nela você tem a possibilidade de criar ou administrar posts. O aplicativo permite adicionar a sua geolocalização nos posts.

Na imagem seguinte vemos o editor de texto nele temos algumas tags html, como b(bold), i(itálico), link, quote, ul, li, code e a tag do wordpress more.

Também tem a possibilidade de criar páginas e responder e administras seus comentários e visualizar as estatísticas do seu blog caso esteja conectado com o wordpress.org.

Claro que você não vai criar posts quilométricos com um iphone, mas é uma boa opção para fazer posts rápidos, compartilhar images e responder comentários. ´

A versão iOS está disponível para iphone, ipod touch e ipad. Além da plataforma iOS, existem apps para :

Agora é só escolher a sua versão de acordo com a sua plataforma.

Categorias
WordPress

Preparando a palestra da drc e testando a App para iOS

Hoje preparando a palestra de wordpress da drc decidi testar a App para iOS do WordPress, com um layout bem clean como todas AppStore para iOS, realmente surpreendeu.

Já tinha testado a App no Nokia n8 mas nunca pegou, por uma questão simples de suporte. Estou escrevendo do celular só para teste no próximo post complemento com informações úteis, onde baixar e como configurar.