Este artigo nasceu da minha vivência na área de TI, onde me deparei com o desafio de migrar um projeto PWA para aplicativos nativos, o que despertou diversas dúvidas sobre comportamentos, especialmente relacionados aos universal links e ao login social. 

Movido por essa experiência, decidi compartilhar minhas reflexões neste primeiro artigo. Caso o artigo receba um feedback positivo e tenha engajamento, pretendo dar continuidade a essa jornada com um segundo artigo, abordando o universo Android e incluindo apêndices dedicados ao Flutter e React Native. 

Vamos começar com a situação de um projeto em que você tem um e-mail marketing ou uma landing page e deseja direcionar o usuário para clicar em um link específico, o qual abrirá o aplicativo instalado no dispositivo. 

Nosso objetivo inicial está definido: clicar em um link específico e abrir o aplicativo instalado.  

Como podemos fazer isso? Com isso em mente, meu objetivo é estabelecer uma conexão entre profissionais de front-end web e profissionais mobile que precisarão colaborar para alcançar esse resultado. 

Estamos prestes a entrar na parte do código, certo, dev? Antes disso, gostaria de introduzir o tema de Associated Domains. 

Em relação aos Associated Domains da Apple, existem dois tipos distintos: “webcredentials” e “applinks”. Ambos desempenham funções diferentes e são essenciais para a integração entre aplicativos e websites. 

Mundo Apple  

Webcredentials: este é um tipo de Associated Domain que permite que um aplicativo iOS declare associações com credenciais de websites. Isso é útil para autenticação de usuário única (SSO) e preenchimento automático de credenciais de login. Quando um usuário tenta fazer login em um site associado ao aplicativo, o iOS pode sugerir automaticamente as credenciais salvas no aplicativo para preenchimento. 

Applinks: os Applinks, por outro lado, são utilizados para vincular conteúdo entre o seu aplicativo e o seu website. Eles permitem que você associe determinados URLs em seu website com conteúdo específico em seu aplicativo. Por exemplo, se você tiver um link para uma página específica em seu website e desejar que ele abra o conteúdo correspondente em seu aplicativo, você pode usar Applinks para isso. 

Quando um usuário clica em um link associado em seu website, o iOS pode abrir o aplicativo apropriado, se instalado, e navegar diretamente para o conteúdo relacionado. 

Em um próximo artigo me aprofundo mais no mundo Android, mas para o Android, não existe um equivalente direto ao recurso Associated Domains do iOS. No entanto, há algumas funcionalidades relacionadas que podem ser utilizadas para propósitos semelhantes. 

Mundo Android  

App Links (Deep Links): assim como os Applinks da Apple, os App Links são links que permitem que um site direcione os usuários para o conteúdo específico do aplicativo, se o aplicativo estiver instalado no dispositivo. Eles são uma forma de vincular o conteúdo entre o aplicativo e o website, permitindo uma transição suave entre os dois. Quando um usuário clica em um link de App Link em um navegador, o sistema operacional Android pode abrir o aplicativo apropriado e direcionar o usuário para o conteúdo relevante dentro do aplicativo. 

Smart Lock for Passwords: este recurso do Google permite que os usuários salvem e autentiquem automaticamente em aplicativos e sites sem a necessidade de digitar manualmente suas credenciais. Assim como os “webcredentials” da Apple, o Smart Lock for Passwords facilita a autenticação única (SSO) em aplicativos Android e websites associados. 

Quando os usuários fazem login em um aplicativo ou site que utiliza o Smart Lock for Passwords, eles têm a opção de salvar suas credenciais no Google, e o Android pode então preencher automaticamente essas credenciais quando necessário. 

Abaixo uma tabela resumindo o comparativo entre recursos de iOS e Android: 

Vamos aos códigos 

Todos os códigos apresentados aqui estão disponíveis no meu GitHub e os links serão fornecidos no final do artigo. 

Este projeto serve como base para uma série de testes e publicações que estou preparando para a minha equipe de desenvolvimento móvel. 

Portanto, você pode notar que a estrutura do projeto está um pouco diferente, pois eu o organizei em módulos e optei por não utilizar storyboards, entre outros aspectos. No entanto, não se preocupe se você está começando, pois abordarei os pontos importantes e relevantes aqui. 

Iniciado com as configurações para a web: 

Primeiramente você precisa de um arquivo json chamado apple-app-site-association 

ATENÇÃO! O Arquivo não deve conter a extensão .json 

De acordo com a documentação, o arquivo deve ficar na raiz do seu site ou dentro de uma pasta nomeada .well-known. É o formato que usei no exemplo deste artigo. 

Esta será a estrutura básica para o conteúdo do arquivo que usaremos neste exemplo: 

Em nosso caso vamos usar o atributo path apenas com o subdominio que tenho configurado e qualquer outro caminho que segue depois da barra. Não adicione nenhum schema (http, https, meuapp) neste path. Você pode ter mais detalhes sobre estas configurações no link da documentação oficial. 

Vamos para o Xcode 

Um ponto importante aqui é que será necessário ter uma conta de desenvolvedor no portal developer.apple.com. Se você não irá publicar o app não é necessário pagar, somente registrar-se. Você precisa disso, pois é necessário para os profiles e certificados que são vinculados ao seu TeamID configurados para usar o Associated Domains. Caso contrário você recebera um aviso assim: 

Onde encontro meu TeamID? 

Uma vez logado no portal Developer da Apple, role a página principal até encontrar a área “Informações da assinatura”. 

Primeira coisa que precisamos fazer é selecionar o Projeto no “Project Navigator”. 

Vá na aba “Signing & Capabilities” e adicione “Suporte a Associated Domains”. Depois precisamos colocar nossa url em uma entrada Applinks. 

Veja na imagem abaixo: 

Ao final deve ficar assim como na imagem. Lembre-se de usar a url do seu projeto web. 

Vamos agora para a configuração do scheme: 

Abra o Arquivo Info.plist  

Acesse a ramificação URL types > Item > URL Schemes e adicione o scheme que deseja mapear. No nosso caso, o moblab. 

Feito! Essas são as configurações do projeto que precisam ser feitas. Agora para finalizar, vamos aos códigos. 

Importante! 

O projeto está utilizando versão mais atual do Xcode até a data da publicação deste artigo (Version 15.3 (15E204a). Configurei o projeto para usar UIKit. Neste caso o projeto tem o arquivo AppDelegate.swift e também o SceneDelegate.swift  

Agora vamos trabalhar no SceneDelegate. Será necessário criar o método openURLContexts onde faremos os tratamentos necessários.  

O método openURLContexts é um método do protocolo UISceneDelegate, que é chamado quando a cena recebe um URL para abrir. Ele é usado para lidar com URLs recebidos pela cena da sua aplicação iOS. Esse método recebe um conjunto (Set) de objetos UIOpenURLContext, que contém informações sobre os URLs que estão sendo abertos.  

Cada objeto UIOpenURLContext contém o próprio URL e outras informações relevantes, como o aplicativo que está abrindo o URL e o motivo pelo qual o URL está sendo aberto.  

Ao implementar o método scene (_:openURLContexts:) no seu SceneDelegate, você pode acessar esses objetos UIOpenURLContext e processar os URLs recebidos conforme necessário. Isso pode incluir a manipulação do URL para navegar para uma determinada tela dentro do seu aplicativo, extrair informações do URL para processamento adicional ou realizar outras ações com base no conteúdo do URL. 

O método scene (_:openURLContexts:) é fundamental para lidar com URLs recebidos pela sua aplicação iOS e permite que você responda adequadamente a esses URLs, conforme necessário para a funcionalidade do seu aplicativo. 

Aqui está uma estrutura da utilização do método: 

Em nosso projeto vamos fazer o seguinte: 

Nele vamos confirmar se o scheme é o mesmo que mapeamos. Vamos a validação inicial. É bem simples: vamos apenas checar se o schema é o que queremos realmente abrir. Se sim, neste momento você já poderia carregar sua ViewController. 

Está feito! Agora basta rodar o projeto no Simulador ou no Device acessar a URL do seu projeto web e acessar o link.  

Aqui para o projeto foi criado a seguinte página: https://moblab.micheltlutz.me/ 

Veja a demonstração funcional: https://imgur.com/a/ZToCmSd 

Caso você esteja utilizando alguma versão anterior de código que não faça uso do SceneDelegate.swift, você precisara fazer o mesmo procedimento no AppDelegate.swift. Veja o exemplo abaixo: 

O método application (_:open:options:) é um método do protocolo UIApplicationDelegate  que é chamado quando a aplicação é aberta com um URL. Ele é usado para lidar com URLs recebidos pela aplicação iOS. 

Este método recebe três parâmetros: 

• app: a instância de UIApplication representando a aplicação. 
• url: o URL que está sendo aberto. 
• options: um dicionário contendo informações adicionais sobre a forma como o URL está sendo aberto. 

O retorno deste método é um booleano indicando se a aplicação foi capaz de lidar com o URL com sucesso. 

Dentro deste método, você pode verificar o URL recebido e tomar as ações apropriadas com base no conteúdo do URL, da mesma forma como feito no openURLContexts. 

E assim finalizamos. Até a próxima! Se você leu até aqui por favor deixe pelo menos um clap! 

Repositórios: 

Site: https://github.com/micheltlutz/moblab-site  

App: https://github.com/micheltlutz/moblab-ios  

Winged-Python: https://github.com/micheltlutz/Winged-Python  

Referências: 

Supporting associated domains | Apple Developer Documentation 

Connect your app and a website to provide both a native app and a browser experience. 

developer.apple.com 

*As opiniões aqui colocadas refletem minha opinião pessoal e não necessariamente a opinião da Compass UOL.