O que é deeplink? 🤓
Quando o usuário clicar em um link do site em seu smartphone, uma tela do app é aberta ao invés do navegador (Chrome, Safari, etc). Isso é "deep linking".
Para que app seja associado ao website, é preciso criar uma arquivo assetlinks.json no diretório .well-known do website, de tal forma que seja possível acessá-lo assim:
https://www.ololo.com/.well-known/assetlinks.json
Dentro do arquivo é preciso informar o package_name e a hash SHA-256. Exemplo de arquivo (dados fakes):
[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "br.com.ololo",
"sha256_cert_fingerprints": ["B1:A3:8A:C9:3A:4B:32:92:FF:53:6A:EB:00:32:E9:D6:B8:2A:B1:D3:A3:57:CC:A8:28:A1:1F:AD:94:92:A7:8C"]
}
}]Atente-se aos seguintes detalhes (extraídos da documentação oficial):
- O arquivo assetlinks.json deve ser exibido com tipo de conteúdo application/json.
- O arquivo assetlinks.json precisa ser acessível por meio de uma conexão HTTPS, independentemente de os filtros de intent do app declararem HTTPS como o esquema de dados ou não.
- O arquivo assetlinks.json precisa ser acessível sem redirecionamentos (sem redirecionamentos 301 ou 302) e ser acessível por bots. O robots.txt precisa permitir o rastreamento de /.well-known/assetlinks.json.
- Se os links do app forem compatíveis com vários domínios de host, publique o arquivo assetlinks.json em cada domínio. Consulte Como oferecer compatibilidade com links de app para diversos hosts.
- Não publique seu app com URLs de desenvolvimento/teste em arquivos de manifesto que podem não ser publicamente acessíveis (por exemplo, todos aqueles que só podem ser acessados com uma VPN). Uma solução alternativa nesses casos é configurar variantes de compilação para gerar outro arquivo de manifesto para versões de desenvolvimento.
No arquivo AndroidManifest.xml, adicione os caminhos do site que devem ser tratados pelo app:
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
android:screenOrientation="portrait"
android:windowSoftInputMode="adjustResize"
android:exported="true"
android:launchMode="singleTask">
<!-- android:autoVerify="true" é obrigatorio -->
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<!-- defina os caminhos que devem ser tratados aqui: -->
<data android:scheme="https" android:host="www.ololo.com" android:pathPattern="/ololo/produto/.*/p-.*" />
<data android:scheme="https" android:host="www.ololo.com" android:pathPattern="/ololo/promocoes" />/>
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="ololo" />
</intent-filter>
</activity>É possível testar se o arquivo está devidamente configurado através da seguinte ferramenta: https://developers.google.com/digital-asset-links/tools/generator?hl=pt-br
Para mais informações relacionada à configuração do servidor no Android, favor acessar a documentação oficial: https://developer.android.com/training/app-links/verify-site-associations?hl=pt-br#request-verify
Para que app seja associado ao website, é preciso criar uma arquivo apple-app-site-association na raiz do site, ou no diretório .well-known, de tal forma que seja possível acessá-lo assim:
https://www.ololo.com/apple-app-site-association
Exemplo de arquivo (dados fakes):
{
"applinks": {
"apps": [],
"details": [
{
"appID": "7VCZVTXU85.br.com.ololo",
"paths": [
"/ololo/promocoes",
"/ololo/produto/*/p-*"
]
}
]
},
"webcredentials": {
"apps": [
"7VCZVTXU85.br.com.ololo"
]
}
}Atente-se aos seguintes detalhes:
- O arquivo assetlinks.json precisa ser acessível por meio de uma conexão HTTPS, independentemente de os filtros de intent do app declararem HTTPS como o esquema de dados ou não.
- O arquivo assetlinks.json precisa ser acessível sem redirecionamentos (sem redirecionamentos 301 ou 302) e ser acessível por bots. O robots.txt precisa permitir o rastreamento de /.well-known/assetlinks.json.
- O arquivo
apple-app-site-associationprecisa ser servido com o header "application/pkcs7-mime"
Segue um exemplo de como servir o header "application/pkcs7-mime" no Node JS:
var aasa = fs.readFileSync(__dirname + '/static/apple-app-site-association');
app.get('/apple-app-site-association', function(req, res, next) {
res.set('Content-Type', 'application/pkcs7-mime');
res.status(200).send(aasa);
});- No arquivo
AppDelegate.m, adicione as seguintes instruções:
#import <React/RCTLinkingManager.h>
...
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
Isto irá transmitir a URL para o código React Native
- Crie um arquivo de entitlements (ex:
ololo.entitlements), que indica a qual domínio seu site pertence. Exemplo:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>aps-environment</key>
<string>development</string>
<key>com.apple.developer.associated-domains</key>
<array>
<string>applinks:ololo.com</string>
<string>applinks:www.ololo.com</string>
</array>
</dict>
</plist>É possível testar se o arquivo está devidamente configurado através da ferramenta: https://limitless-sierra-4673.herokuapp.com/
Para mais informações sobre como configurar o servidor no ios, favor acessar a documentação oficial: https://developer.apple.com/library/archive/documentation/General/Conceptual/AppSearch/UniversalLinks.html
A URL clicada estará disponível no React Native através do método Linking.getInitialURL. Exemplo:
Linking.getInitialURL().then((url) => {
console.log(`Deeplink clicado: ${url}` )
});