Compreendendo os links diretos no React Native

Introdução

Links profundos e links universais são as portas de entrada para seu aplicativo. Os links diretos já fazem parte de uma experiência perfeita que qualquer aplicativo móvel deve ter. Em última análise, eles ajudam a reduzir a rotatividade e aumentar a lealdade de sua base de usuários. Implementá-los corretamente terá um impacto direto em sua capacidade de dominar campanhas e executar promoções em seu aplicativo.

A questão dos links diretos é tão importante hoje como antes, levando em consideração especificamente o Identificador para anunciantes (IDFA) e um número crescente de jardins murados . O deep linking bem executado habilitará suas campanhas de retargeting e levará o engajamento a um novo nível, permitindo que os usuários finais tenham uma experiência perfeita de um clique entre a web e seu aplicativo.

Depois que os usuários descobrem seu aplicativo e o instalam, os links diretos se tornam uma ferramenta perfeita para reter usuários recém-adquiridos em seu aplicativo.

Neste artigo, descrevo as maneiras existentes de como implementar links diretos e como testá-los usando a base de código React Native Typescript.

Você pode encontrar o código-fonte completo deste projeto disponível em GitHub .

O que são links diretos e por que são importantes?

Os links diretos, em poucas palavras, são uma maneira de redirecionar os usuários de uma página da web para o seu aplicativo, a fim de mostrar uma tela específica com um conteúdo solicitado. Pode ser um produto, um artigo, conteúdo seguro atrás de um acesso pago ou uma tela de login.

Um dos exemplos mais famosos é o link para o Slack que eles enviam para o seu e-mail, que é aberto direto no aplicativo, autorizando você a usá-lo com sua conta-sem necessidade de senha.

Os links diretos são fundamentais em 2021. Todos os esforços para conduzir seus usuários ao aplicativo e melhorar o envolvimento deles dependerá muito da estratégia baseada no link direto.

Para resumir os principais pontos por que os links diretos são importantes:

• campanhas de marketing
• Retenção de usuários
• Redirecionamentos contínuos entre a web e o celular
• Entrega de conteúdo por trás de um acesso pago ou autenticação de login
• Aumentando o ciclo de vida do cliente
• Melhorando a lealdade
• Minimizando a rotatividade
• Classificação aprimorada do mecanismo de pesquisa

A implementação de links diretos requer um entendimento mais complexo de iOS e Android para configuração extra de cada plataforma em seu projeto React Native.

Pegue, por exemplo, este diagrama de sintaxe do seguinte URL:

 billing-app://billing/1 

Sempre que você navega para um site usando, por exemplo, https://reactivelions.com , você usa um URL no qual o URL esquema é “https”. No exemplo acima, billing-app é um esquema de URL para seu URL de link direto.

Link direto e link universal no iOS

A partir do iOS 9, a Apple introduziu links universais para reduzir a confusão e simplificar a experiência do usuário.

A ideia por trás do uso de links universais é conectar URLs de sites específicos que combinam o conteúdo do seu site com o conteúdo do seu aplicativo. Esse URL agiria da mesma maneira que o URL de link direto que mostrei na seção anterior:

 https://app.reactivelions.com/billing/3

Configurar links universais requer etapas extras tanto no lado do servidor quanto no lado móvel.

Primeiro você começa com o lado do servidor, onde você precisa fazer o upload de um arquivo JSON formatado que define a associação do site com um aplicativo móvel e suas rotas específicas.

Digamos que você execute o domínio example.com e deseja criar um arquivo de associação. Comece criando uma pasta ou rota em seu domínio raiz .well-known e, em seguida, adicione conteúdo JSON dentro de apple-app-site-association :

 https://example.com/.well-known/apple-app-site-association

Adicione conteúdo JSON para definir associações de sites:

 { "aplausos": { "aplicativos": [], "detalhes": [ { "appID":"ABCD1234.com.your.app", "caminhos": ["/billing/","/billing/*"] }, { "appID":"ABCD1234.com.your.app", "caminhos": ["*"] } ] }
}

Como configurar seu projeto Xcode

Para demonstrar como os links diretos funcionam, vamos construir um aplicativo de teste simples. Este aplicativo terá uma navegação direta entre as telas Home e Billing usando o componente @ react-navigation :

 npx init nativo reactivo BillingApp--template

Abra o seu espaço de trabalho Xcode:

 abra BillingApp/ios/BillingApp.xcworkspace 

Na janela do Xcode, selecione seu projeto recém-criado no painel esquerdo (no nosso caso, é BillingApp ). Em seguida, selecione o destino BillingApp dentro do painel esquerdo recém-aberto da visualização interna para o BillingApp.xcodeproj .

Navegue até a seção Informações na parte superior central dessa visualização, vá até a parte inferior e clique no sinal de mais ( + ) em Tipos de URL Certifique-se de adicionar billing-id como seu novo Identificador e especificar Esquemas de URL como billing-app .

Seguindo as etapas acima, você habilitou a configuração do projeto iOS para usar links diretos como billing-app://billing/4 dentro de seu código Objective C e JavaScript posteriormente.

Depois de configurar o Xcode, a próxima etapa será focada no React Native. Vou começar vinculando parte do núcleo React Native chamado LinkingIOS . Você pode ler mais sobre isso na documentação oficial aqui . Seu principal objetivo é construir uma ponte que permitirá que um thread de JavaScript receba atualizações da parte nativa de seu aplicativo, sobre as quais você pode ler mais na parte AppDelegate.m abaixo.

Vá para ios/Podfile e adicione esta linha em destino :

 pod'React-RCTLinking',: path=>'../node_modules/react-native/Libraries/LinkingIOS'

E certifique-se de atualizar seus pods usando este comando:

 cd ios && pod install

A próxima etapa é permitir que os principais pontos de entrada do seu aplicativo tenham controle sobre os retornos de chamada que estão sendo chamados quando o aplicativo é aberto por meio de links diretos.

Nesse caso, implementamos a função openURL com opções e passamos seu contexto para RCTLinkingManager por meio de seu módulo nativo chamado RCTLinkingManager .

 #import  -(BOOL) aplicativo: (UIApplication *) aplicativo
openURL: (NSURL *) url
options: (NSDictionary  *) options
{
return [RCTLinkingManager aplicativo: aplicativo openURL: url opções: opções];
}

Para os links universais, precisaremos implementar uma função de retorno de chamada continueUserActivity , que também passará o contexto do aplicativo e o link universal atual para o contexto JavaScript via RCTLinkingManager .

-(BOOL) aplicativo: (UIApplication *) aplicativo continueUserActivity: (não nulo NSUserActivity *) userActivity
restorationHandler: (nonnull void (^) (NSArray > * _Nullable)) restorationHandler
{
return [aplicativo RCTLinkingManager: aplicativo
continueUserActivity: userActivity
restorationHandler: restorationHandler];
}

Links diretos no Android

Os links diretos do Android funcionam de maneira um pouco diferente em comparação com o iOS. Esta configuração opera sobre Android Intents , uma abstração de uma operação a ser executada. A maior parte da configuração é armazenada em AndroidManifest.xml e funciona apontando para qual Intent será aberto quando o link direto é executado.

Como configurar seu projeto Android Studio

Dentro do seu manifesto Android android/app/src/main/AndroidManifest.xml , precisamos fazer o seguinte:

• Configure o filtro Intent
• Defina a ação View principal e especifique duas categorias principais: DEFAULT e BROWSABLE
• Finalize a configuração definindo o esquema para billing-app e definindo a rota principal como billing

Dessa forma, o Android saberá que este aplicativo tem links diretos configurados para esta rota billing-app://billing/* :

Navegação e links diretos

Na maioria dos aplicativos de nível de produção, você acabará tendo várias telas e é mais provável que acabe usando alguma forma de componente que implementa essa navegação para você. No entanto, você pode desativar e usar links diretos sem contexto de navegação invocando a biblioteca principal do React Native via JavaScript chamando Linking diretamente.

Você pode fazer isso dentro do seu código React Native usando estes dois métodos:

1. Se o aplicativo já estiver aberto:

 Linking.addEventListener ('url', ({url})=> {}) 

1. Se o aplicativo ainda não estiver aberto e você quiser obter o URL inicial, use esta chamada:

 Linking.getInitialURL () 

Use o URL de link direto adquirido para mostrar conteúdo diferente, com base na lógica do seu aplicativo.

Se estiver usando @ react-navigation , você pode optar por configurar links diretos usando sua lógica de roteamento.

Para isso, você precisa definir seus prefixos para link universal e link direto. Você também precisará definir config com suas telas , incluindo telas aninhadas se seu aplicativo tiver muitas telas e for muito complexo.

Aqui está um exemplo de como essa configuração se parece com nosso aplicativo:

 import {NavigationContainer} de'@ react-navigation/native';
export const config={ telas: { Casa: { caminho:'home/: id?', analisar: { id: (id: String)=> `$ {id}`, }, }, Cobrança: { caminho:'billing/: id?', analisar: { id: (id: String)=> `$ {id}`, }, }, },
};
const linking={ prefixos: ['https://app.reactivelions.com','billing-app://home'], config,
};
function App () { Retorna (  Carregando... }> {/* contente */}  );
} 

Na seção de código acima, apresentamos o link universal e percorremos as etapas necessárias para definir a associação universal do link no servidor de seu site. No Android, há algo semelhante chamado Links de aplicativos Android verificados . Usar Android App Links ajuda a evitar a confusão de abrir links diretos com outros aplicativos que não são seus. O Android geralmente sugere o uso de um navegador para abrir links diretos não verificados sempre que não tiver certeza se eles são links de aplicativo (e não links diretos).

Para ativar a verificação de links de aplicativos, você precisará alterar a declaração de intenção em seu arquivo de manifesto, da seguinte forma:

Para criar links verificados pelo aplicativo, você precisará gerar um arquivo de verificação JSON que será colocado na mesma pasta .well-known da seção Xcode:

 keytool-list-v-keystore my-release-key.keystore 

Este comando irá gerar associação com seu domínio assinando a configuração com seu arquivo keystore:

 [{ "relação": ["delegate_permission/common.handle_all_urls"], "alvo": { "namespace":"android_app", "package_name":"com.mycompany.app1", "sha256_cert_fingerprints": ["14: 6D: E9: 83: C5: 73: 06: 50: D8: EE: B9: 95: 2F: 34: FC: 64: 16: A0: 83: 42: E6: 1D: BE: A8: 8A: 04: 96: B2: 3F: CF: 44: E5"] }
}] 

Em seguida, coloque o arquivo gerado no seu site usando este caminho:

 https://www.example.com/.well-known/assetlinks.json 

Como testar links diretos

Depois de passar por todas as configurações e implementações, você deseja garantir que configurou tudo corretamente e que os links diretos funcionam em cada plataforma de sua escolha.

Antes de testar links universais ou links verificados de aplicativos Android, certifique-se de que todos os arquivos JSON estejam carregados, disponíveis e atualizados para cada um de seus domínios. Dependendo da sua infraestrutura da web, você pode até querer atualizar o cache do Content Delivery Network (CDN).

Um teste de link direto bem-sucedido significa que, após abrir um link direto no navegador, você é encaminhado ao seu aplicativo e pode ver a tela desejada com o conteúdo fornecido.

Quando você vai para a tela de faturamento, pode especificar um número e o aplicativo irá renderizar o mesmo número de emojis com notas de dólares voando. Nosso aplicativo possui telas Home e Billing .

Se você tentar ir para a tela Faturamento em sua tela Página inicial , não passará nenhum conteúdo e, portanto, não renderizará nenhum emojis.

Em seu terminal, você pode usar esses comandos para testar links diretos para cada plataforma. Experimente alterando o número no final do seu URL de link direto para ver diferentes números de emojis.

1. iOS

 npx uri-scheme open billing-app://billing/5--ios 

Você também pode abrir o Safari e inserir billing-app://billing/5 na barra de endereço e clicar em ir .

1. Android

 npx uri-scheme open billing-app://billing/5--android 

Próximas etapas

Você deve ter notado que usei o TypeScript para escrever o código deste projeto. Para este projeto, implementei tipos de propriedades personalizadas que exigem declaração personalizada para cada tela. Verifique props.ts para ver essas declarações de tipo.

Como mencionei anteriormente, se você estiver criando um aplicativo de nível de produção, provavelmente acabará criando um roteamento complexo e precisará implementar rotas de aninhamento com a biblioteca do navegador.

A navegação de aninhamento permitirá que você decomponha cada tela em componentes menores e tenha rotas secundárias com base em sua lógica de negócios. Saiba mais sobre como construir rotas de aninhamento usando @ react-navigation aqui .

Estou ansioso para ver o que você construirá com isso!

A postagem Compreendendo os links diretos no React Native apareceu primeiro no LogRocket Blog .