Clipes de Apps - Guia Definitivo para Desenvolvedores | AppsFlyer

Clipes de App do iOS 14 – Guia Definitivo para Desenvolvedores

Com o lançamento do iOS 14, nós encaramos os Clipes de Apps (App Clips) como um passo inovador para a Apple. Na AppsFlyer, vemos os Clipes de Apps como o futuro e a evolução dos aplicativos, principalmente no caso daqueles que não usamos no nosso cotidiano. Elaboramos esse guia completo para te ajudar a desenvolver seu primeiro Clipe de App.  

Por que fazer Clipes de Apps? Bem, por que não?

Vamos supor por um momento que você entra em uma cafeteria e percebe que a fila está bem longa. Perto do caixa, você vê uma placa te convidando a evitar a fila e comprar seu café pelo aplicativo da cafeteria. 

O que você pensaria?

Bem, eu pensaria “claro que não vou baixar um aplicativo que vai ocupar espaço de armazenamento precioso no meu dispositivo”. Depois, eu questionaria que tipo de dados eles vão coletar sobre a minha vida, que depois serão usados para me enviar spam. Não, obrigado, eu passo. E tudo isso só para evitar uma fila…

 

Evitando a fila sem precisar abrir mão da privacidade

Os Clipes de Apps da Apple estão prestes a mudar a maneira como você pensa. E, além disso, provavelmente vão mudar a maneira como interagimos com o ambiente quando usamos nossos dispositivos mobile. Os Clipes de Apps permitem que você realize atividades imediatas, usando instantaneamente o seu dispositivo, sem sacrificar sua privacidade ou compartilhar sua localização.

No exemplo da cafeteria, o QR Code habilita um Clipe de App no qual você é identificado através de um Apple Sign-in e, assim, você pode realizar sua compra com o Apple Pay, que permite que você complete a compra em poucos segundos, escapando da fila com sucesso.

Os Clipes de Apps exigem que os desenvolvedores entendam alguns novos conceitos e façam o desenvolvimento do Clipe de App junto do aplicativo em si. Ou seja, pode ser que uma reestruturação do app seja necessária.

———————–

*Aviso importante

Esse guia se baseia no desenvolvimento real de um Clipe de App, processo que foi cuidadosamente estudado com base em documentos feitos a partir de uma compilação de todos os vídeos da WWDC 2020 que abordavam os Clipes de App. Veja o Clipe de App pareado e completo aqui.

———————–

Na minha primeira tentativa, enviei meu aplicativo e Clipe de App para a App Store, onde recebi uma mensagem de erro informando que meu Clipe de App “não pode ser enviado no momento”. Isso significa que eu não consegui verificar a documentação da Apple para alguns fluxos e tive que usar os gráficos da Apple. 

Assim que a possibilidade de enviar um Clipe de App estiver disponível, iremos atualizar e aprimorar este guia.

 

Aqui está uma análise do que discutiremos neste guia (clique para navegar entre as seções):

 

O fluxo de Ativação de um Clipe de App

Esta seção abrange o ciclo de vida do Clipe de App – desde um usuário que interage com um Clipe de App até os diversos métodos de transição para o aplicativo completo.
Apple App Clips Invocation Flow

Os Clipes de Apps começam quando um usuário interage com uma Ativação (Invocation)

Ativações são um conceito muito importante para os Clipes de Apps, a qual explicamos em mais detalhes abaixo.

Vamos supor que um usuário usou uma tag NFC, que é uma Ativação de um Clipe de App.

Em seguida, isso acontece:

    1. O sistema do iOS detecta que a tag NFC é uma Ativação de Clipe de App e extrai uma “URL de Ativação”.

      A URL de Ativação define a funcionalidade esperada dessa Ativação. Ela será passada para o Clipe de App junto dos dados necessários para indicar ao usuário a funcionalidade necessária para fazer a manutenção da tag NFC. Se o aplicativo já estiver instalado, ele será iniciado e a URL de Ativação será transmitida da mesma forma como ocorre a transmissão de um fluxo de Universal Link.

      Aqui estão alguns exemplos:

      1. https://megacoffee.com/buy/paris/table/6 – O Clipe de App é aberto no menu de compra da filial de Paris, onde a mesa nº 6 já está configurada nas preferências. O usuário se identifica via Apple Sign-in, paga usando o Apple Pay e voilà, o pedido está completo. Esse fluxo requer verificação de localização, explicada em detalhes aqui. 
      2. https://scooter.me/rent?scooter_id=3456 – O Clipe de App é aberto no menu “de aluguel” com uma ID de scooter já configurada. O Clipe de App pode notificar o usuário de que o período de aluguel está prestes a terminar. Esse fluxo requer uma notificação de Clipe de App, explicada detalhadamente aqui. 
    2. O iOS verifica se a URL de Ativação realmente é válida através da leitura de um arquivo Apple-App-Site-Association (AASA) no domínio da URL de Ativação. A configuração do arquivo AASA está explicada em detalhes aqui
    3. Depois que a URL de Ativação é verificada, o iOS apresenta um Card de Clipe de App para o usuário.
      Um aplicativo pode ter apenas um Clipe de App associado, mas pode conter vários cards apresentados pelo mesmo Clipe de App.

      App Clip Card iOS14

      Cada Card de Clipe de App Clip está associado a uma única Experiência de Clipe de App.
      As experiências de Clipes de Apps estão explicadas detalhadamente aqui. O sistema iOS exibe o Card de Clipe de App da Experiência que mais se aproxima da correspondência da URL de Ativação na qual o usuário clicou. O Card de Clipe de App é então apresentado pelo sistema, sem envolver nenhuma interação do desenvolvedor ou código.

      O Card de Clipe de App serve para alguns propósitos:

      1. Ele apresenta ao usuário uma introdução geral às funcionalidades do Clipe de App, que é semelhante à página do aplicativo da App Store em um fluxo de download completo do aplicativo. Por exemplo, isso pode ser representado como uma imagem da cafeteria com uma breve descrição do negócio.
      2. Ele declara as permissões do desenvolvedor e dá ao usuário a opção de desativá-las. Tenha em mente que os Clipes de Apps do iOS14 têm muito poucas permissões, que fazem parte de uma lista muito pequena. Como um bônus adicional, os usuários ganharão confiança no aplicativo graças à rigidez da política de privacidade do Clipe de App.
      3. Possui um botão de call-to-action, que informa ao usuário as principais funcionalidades esperadas do Clipe de App, tais como: alugar, comprar, compartilhar ou fazer check-in, etc.
      4. Ele exibe um pequeno banner que direciona o usuário para a versão completa do aplicativo na App Store.
    4. Quando o usuário clica no call-to-action do card, o iOS baixa o Clipe de App da App Store. Isso é feito rapidamente, pois o tamanho máximo de um Clipe de App é de 10 MB. Como referência, esse é um tamanho bom, considerando que aplicativos mais recentes têm um tamanho médio de 38 MB.

    5. A URL de Ativação é passada para o Clipe de App por meio do NSUserActivity. O desenvolvedor usa a URL para criar um deep link para as funcionalidades especificadas. O desenvolvedor pode usar parâmetros da URL, por exemplo. Ele também pode extrair o nome da filial e o número da tabela da URL, como no exemplo: https://megacoffee.com/buy/paris/table/

      [Obtenha o Guia] Tudo o que Desenvolvedores Precisam Saber sobre Deep Linking

    6. Inicialmente, quando o Clipe de App for carregado, ele exibirá um banner que direciona o usuário ao aplicativo completo na App Store. O desenvolvedor pode exibir o banner novamente usando o SKOverlay. Veja a explicação detalhada aqui.
      App Clip Banner SKOverlay iOS14

<Voltar ao início>

 

Ativações e Experiências para os Clipes de Apps da Apple

Esta seção descreve em detalhes como um Clipe de App é iniciado (invocado), qual Card de Clipe de App Clip é exibido, quais dados são passados para o Clipe de App e como.

 

As Ativações (Invocations)

Um Clipe de App é gerado a partir de uma Ativação. Uma Ativação não é apenas um clique, como você provavelmente sabe que ocorre nos Universal Links. Uma Ativação é um objeto criado pela Apple, que, atualmente, pode ser criado apenas através das ferramentas e infraestrutura da Apple. Ainda não está claro como é possível obter uma ‘App Clip URL’, que permitiria que você simplesmente enviasse o Clipe de App via SMS ou colocasse por trás de um código QR (atualizaremos esse processo assim que a Apple oferecer mais informações).

 

Os métodos de Ativação

App Clip Banner Safari Invocation   Safari Smart App Banner

  • Os metadados podem ser adicionados ao cabeçalho de um site para criar um Smart App Banner que será exibido no Safari.
    • Aqui está um exemplo de code snippet que você deve adicionar:
<meta name="apple-itunes-app" content="app-clip-bundle-id=com.coffeeshop.retailapp.Clip, app-id=12345ABCD">

O app-id é incluído caso o dispositivo execute o iOS 13 ou uma versão anterior. Nesse caso, o banner direcionará o usuário para o aplicativo completo na App Store.

  • Para esse clique, a URL que apresenta o banner é a URL de ativação.

Apple App Clip Banner Invocation iOS14

App Clip iMessage Invocation iOS14   Mensagens 

  • Quando um usuário compartilha um link para um site que exibe um smart banner, a mensagem irá apresentar um banner que invoca um Clipe de App.
  • Nesse caso, a URL de Ativação será a URL do site compartilhada.

App Clip SMS Invocation URL

App Clip NFC tag Invocation iOS 14   Tag NFC 

  • Um clique em uma tag associada a um Clipe de App irá invocá-lo.
  • Uma URL de Ativação está configurada dentro da tag.
    *A Apple ainda não divulgou a criação da tag NFC.

Apple App Clip QR Code invocation   Códigos visuais

  • A Apple planeja lançar um código visualmente distinto que hospedará uma tag NFC no meio, cercada por um código circular que pode ser escaneado. Um dos objetivos da Apple é familiarizar os usuários do iOS que, ao clicarem ou escanearem esse código, serão direcionados a um Clipe de App. Conforme explicamos acima, a Apple ainda não divulgou como podemos colocar uma URL de Clipe de App por trás de um QR code padrão.  

Apple app clips geo location   Localizações

  • Sugestões baseadas em localização feitas pela Siri – A Apple ainda não compartilhou todas as informações acerca desse método (atualizações por vir).

Apple App Clips Maps Invocation   Mapas 

  • As tags em um mapa podem incluir uma tag que invoca um Clipe de App. A verificação da URL de Ativação de um Clipe de App é explicada detalhadamente aqui.

Toda Ativação de Clipe de App se associa a uma URL de Ativação. A URL sempre começa com `https://mygreatapp.com/`. `https` é o esquema e `mygreatapp.com` é a hospedagem ou domínio

O iOS deve verificar a URL de Ativação para ter a certeza de que o publisher do Clipe de App é realmente dono do domínio. Caso ele não seja, o usuário possivelmente está vulnerável à fraude e outras atividades maliciosas. 

Como o esquema é ‘https`(e não ‘http’), a URL de Ativação será verificada com o uso de um certificado SSL, que assegura que o desenvolvedor do Clipe de App é o dono do domínio utilizado.

O iOS verifica o domínio através do acesso a um arquivo Apple-App-Site-Association (AASA). Esse arquivo costuma ser conhecido por verificar Universal Links para um determinado domínio.

Para verificar Clipes de Apps do iOS 14, você precisa adicionar a seguinte seção ao arquivo AASA:

{
    "appclips": {
        "apps": ["ABCED12345.com.fruitstore.feedmeapp.Clip"]
    }
    ...
}

*Aviso importante sobre os arquivos AASA

A Apple anunciou na WWDC2020 que ela pretende melhorar os mecanismos de acesso aos arquivos AASA dos diferentes dispositivos. Ao invés de os dispositivos buscarem o AASA diretamente do domínio associado a determinado aplicativo, a Apple pretende extrair esses arquivos e armazená-los em uma CDN. Os dispositivos irão acessar a CDN da Apple e agregar a busca de arquivos AASA em leituras e operações mais otimizadas. 

Como resultado, os Clipes de Apps podem aumentar o número de buscas de arquivos AASA, e esse mecanismo proposto pode ajudar a diminuir esse aumento.

App Clips AASA File Fetching

Apple App Clips Domain Cache Status

(Imagem tirada da App Store Connect)

 

O estado desse cache em relação às URLs de Ativação definidas para um Clipe de App específico pode ser encontrado na App Store Connect, em ‘Domain URL Status’:

A coluna do status do cache é o que impulsiona a Ativação do Clipe de App nos dispositivos dos clientes. Ao clicar em Debug Status, você permite que a Apple acesse o seu arquivo AASA em tempo real e valida as URLs.

 

<Voltar para o início>

 

Experiências de Clipes de Apps 

Provavelmente, os aspectos mais importantes que você precisa entender sobre os Clipes de Apps são as Experiências.

Uma Experiência de Clipe de App (App Clip Experience) é uma ação oferecia ao usuário, por exemplo, de compra, aluguel, check-in em um hotel e muitas outras. Cada Experiência exibe um Card de Clipe de App diferente. Caso você queira exibir um Card de Clipe de App específico, é necessário que você defina uma Experiência específica.

Então, como uma Ativação é combinada com uma Experiência, e como essa combinação exibe o Card de Clipe de App mais relevante?

Como vimos acima, cada Ativação carrega uma URL de Ativação. O iOS combina a URL de Ativação com as URLs que você registrou como parte da sua Experiência de Clipe de App. Ele mostrará a Experiência de Clipe de App junto da URL que tem o prefixo correspondente especificado. 

Por exemplo, você poderia criar uma Experiência de Clipe de App que usa https://myrental.com/rent como URL que cobre outras URLs como https://myrental.com/rent/car, https://myrental.com/rent/suv e assim por diante. 

No entanto, se um negócio tiver diversas operações, é recomendado que você faça a configuração da Experiência de Clipe de App para uma ou mais operações, usando um Card de Clipe de App e uma URL de Ativação diferente para cada operação.

Por exemplo, https://myrental.com/rent/car/il, https://myrental.com/rent/car/jp, etc.

Experiência Padrão (Default App Clip Experience)

Na App Store Connect, na página ‘new app version’, você deve configurar uma default App Clip Experience e fornecer os seguintes metadados para o card de Clipe de App:

  • Uma imagem de capa.
  • Uma legenda que dê mais informações sobre o Clipe de App.
  • Um call-to-action que aparece no botão no qual os usuários clicam para iniciar o Clipe de App.

 

Default App Clip Configuration Metadata

Uma Experiência Padrão de Clipe de App é usada para executar Clipes de Apps a partir de Smart Banners e links que os usuários compartilham nos apps de mensagens quando Experiências Avançadas de Clipes de App não estiverem configuradas.

Nenhuma URL de Ativação é necessária para registrar uma Experiência Padrão de Clipe de App.

Se o sistema verificar um Clipe de App, ele exibirá a experiência padrão, mesmo que nenhuma URL de Ativação esteja definida (veja a próxima seção). Novamente, isso é válido apenas para Smart Banners no Safari ou links compartilhados por sites através do app de Mensagens.

 

Experiência Avançada (Advanced App Clip Experience)

Experiências Avançadas de Clipes de Apps oferecem:

  • Suporte a possíveis Ativações, incluindo Ativações de tags NFC e códigos visuais.
  • A associação do seu Clipe de App a uma localização física.
  • A associação de uma URL de Ativação ao seu Clipe de App.

Como explicamos anteriormente, isso permite que você use diversos Cards de Clipes de App para vários cases de negócios. Cada experiência levará a um card específico, que foi customizado na App Store no momento de criação da Experiência de Clipe de App.

App Clip Experience Customization

(Imagem tirada da App Store Connect)

App Clip Experience URL specification

(Imagem tirada da App Store Connect)

(Imagem tirada da App Store Connect)

 

<Voltar ao início>

 

Desenvolvendo um Clipe de App

Para testar facilmente os Clipes de Apps, nós criamos um exemplo simplificado de aplicativo, demonstrando o uso dos Clipes de Apps e sua integração com um aplicativo completo. 

O exemplo mostra os seguintes recursos de um Clipe de App:

  • Criação de um Clipe de App.
  • Direitos de Domínios Associados configurados tanto para Clipes de Apps e Universal Links do iOS 14 no aplicativo completo.
  • Compartilhamento de recursos entre o aplicativo completo e o Clipe de App.
  • Extração da URL de Ativação do NSUserActivity tanto no aplicativo completo quanto no Clipe de App.
  • Notificações.
  • Transmissão de dados do Clipe de Apps para o aplicativo completo usando um grupo de Apps.
  • Verificação de localização.
  • Recomendação do aplicativo completo no Clipe de App através do uso do SKOverlay.

 

<Voltar ao início>

 

Limitações dos Clipes de Apps

A Apple impôs diversas limitações sobre os Clipes de Apps para permitir que os usuário aproveitem funcionalidades instantâneas com privacidade e transparência máximas. Essas limitações servem para oferecer aos usuários maior controle sobre sua privacidade, tendo maior confiança nos padrões de privacidade do aplicativo.

  • Clipes de Apps têm um limite de tamanho de 10MB.
  • Os Clipes de Apps não estão inclusos nos backups do iOS (isso na realidade é mais um recurso do que uma limitação).
  • As estruturas a seguir não estão disponíveis para os Clipes de Apps: CallKit, CareKit, CloudKit, HealthKit, HomeKit, ResearchKit, SensorKit, e Speech. O uso de qualquer uma dessas estruturas em um Clipe de App não resulta em erros de tempos de compilação, mas suas APIs retornam valores que indicam indisponibilidade, dados vazios ou códigos de erro no tempo de execução.
  • O Limit App Tracking está sempre habilitado nos Clipes de Apps da Apple, para proteger a privacidade do usuário e evitar o rastreamento do usuário em aplicativos e Clipes de Apps. Os Clipes de Apps não podem solicitar autorização para rastrear um usuário com AppTrackingTransparency, e tanto name quanto IdentifierForVendor retornam uma string vazia.
  • Os Clipes de Apps não podem realizar atividades em segundo plano, como uma rede em segundo plano com URLSession ou manter conexões Bluetooth quando o Clipe de App não está em uso.
  • Para proteger os dados do usuário, os Clipes de Apps da Apple não podem acessar:
    • Dados de movimento e de condicionamento físico.
    • Apple Music e Mídias.
    • Dados de aplicativos como Contatos, Arquivos, Mensagens, Lembretes e Fotos.
  • Um Clipe de App não pode compartilhar dados com nenhum outro aplicativo, exceto com o aplicativo completo correspondente.
  • Uma limitação importante é o acesso à localização. Clipes de Apps não podem solicitar acesso contínuo a dados de localização. Isso pode criar um problema no caso de Ativações associadas à localização geográfica. Por exemplo, no caso da URL de Ativação https://mybigcup/seattle/table/17, é importante verificar se ela se baseia de fato em Seattle, para evitar uma possível confusão na qual o usuário acaba pagando pela conta de outra pessoa. Para isso, os Clipes de Apps da Apple permitem que os usuários verifiquem a localização do dispositivo dentro do perímetro de um polígono, em vez de acessar um local exato. No entanto, para acesso contínuo à localização, eles podem solicitar a autorização <Quando em uso>, que é automaticamente resetado às 4h do dia seguinte, horário local.

 

<Voltar ao início>

 

Testando os Clipes de Apps do iOS14

Pode ser complicado testar os Clipes de Apps, pois o fluxo de Ativação começa dentro do sistema e envolve a App Store Connect. Portanto, ao criar inicialmente um Clipe de App, você precisará tomar as seguintes medidas para testar a ativação:

Teste do processamento da URL de Ativação 

Um passo essencial para o teste de um Clipe de App é garantir que a URL de Ativação de entrada seja: 

  1. Extraída com sucesso do NSUserActivity.
  2. Processada corretamente segundo os seus parâmetros.
  3. Executada no fluxo correto.

Ao inserir uma URL de Ativação em um teste, você deve seguir os seguintes passos:

  1. Clique em Product -> Edit Scheme…
  2. Configure o Ambiente variável _XCAppClipURL para o valor da URL de Ativação.
  3. Execute o esquema do Clipe de App no seu destino. O NSUserActivity lembrará desse valor.

Para ver um exemplo desse código, clique aqui.

Testando após o envio à App Store Connect

Quando você enviar o aplicativo completo e o Clipe de App à App Store, você pode definir as Ativações do Clipe de App na tab TestFlight. Cada Ativação é definida em sua URL de Ativação. 

Testing app clips after submission to App Store Connect

(Imagem tirada da App Store Connect)

 
Adding an app clip invocation

(Imagem tirada da App Store Connect)

 

 Os testadores beta do aplicativo reconhecem as Ativações no TestFlight e executam o Clipe de App caso uma Ativação tenha sido clicada a partir da URL de Ativação definida no estágio anterior.

 

<Voltar ao início>    

 

Conclusão – O here-and-now está aqui

Os Clipes de Apps representam um novo estágio da maneira como os aplicativos serão consumidos e desenvolvidos, ao mesmo tempo em que oferecem aos usuários do iOS maiores funcionalidades instantâneas. Isso permite que os designers e desenvolvedores tenham maior liberdade. 

A experiência do usuário com Clipes de Apps pode ser categorizada em duas fases:

  • Here-and-Now’ – Um Clipe de App para interações entre o usuário e seu ambiente imediato, que funciona de maneira simples mas altamente segura.
  • ‘On-Going-Universal’ – Um aplicativo completo que permite que o usuário engaje constantemente com as funcionalidades do aplicativo, recebendo notificações e serviços em qualquer lugar do mundo. 

A Apple fez um excelente trabalho na criação da infraestrutura para essas duas fases, além de fazer o design de transição ininterrupta entre as fases do Clipe de App para o aplicativo completo. 

Nós acreditamos que muitos negócios podem e devem utilizar essa nova tecnologia, oferecendo maior valor e interações melhores aos clientes e usuários. Fizemos este guia completo para te ajudar a ampliar seu conhecimento sobre os Clipes de Apps da Apple.

Para saber mais, visite a documentação oficial dos Clipes de App