déposer

Cet article a été publié pour la première fois sur : https://github.com/bigo-frontend/blog/ Bienvenue à suivre et à republier.

Anatomie du principe technique de l'activation en un clic d'une application basée sur une scène SMS

Scènes

Le volume de désinstallation de la plupart des applications augmente et la situation à laquelle chaque entreprise est confrontée est similaire. Les utilisateurs perdus doivent être rappelés et le drainage par SMS est l'un des moyens relativement efficaces.

exigence du produit :

Mettez un lien dans le message texte, et si l'utilisateur clique sur le lien, l'application sera invoquée directement si l'utilisateur a installé l'application (et n'a pas besoin de passer par un navigateur), et si l'utilisateur n'a pas installé l'application. app, le navigateur s'ouvrira pour afficher la page de téléchargement de l'application.
Le lien doit être aussi court que possible (les SMS ont une limite de caractères, et si la longueur dépasse la longueur, plusieurs frais seront facturés)

technologie connexe

1. Technologie d'application évoquée par le Web

Il existe trois schémas d'URL courants pour appeler des applications sur le Web, un lien universel (ios) et des liens d'application (android) ; après recherche, les schémas d'URL ne peuvent pas appeler d'applications dans des messages texte, mais les liens universels et les liens d'application le peuvent. Les trois techniques suivantes sont décrites en détail ci-dessous.

1.Schéma d'URL

Expliquez d'abord le schéma, regardons la composition de l'URL :

[scheme:][//authority][path][?query][#fragment]

Prenons https://www.baidu.com comme exemple, le schéma est https, qui est le début de l'url pour définir le type d'url. Nous pouvons attribuer une URL au début du schéma spécifié à l'application, et via cette URL, une certaine fonction de l'application peut être directement invoquée dans le navigateur.

Schéma d'URL des applications courantes

WeChat	Alipay	Taobao	Weibo
weixin://	heureux //	taobao://	sinaweibo://

défaut:

Lorsque l'application à appeler n'est pas installée, une erreur sera signalée lorsque vous cliquerez sur ce lien, et il existe différentes formes de rapport d'erreurs sur différents téléphones mobiles.
Si plusieurs applications sont enregistrées avec le même schéma, le côté Web sera impossible à distinguer et une fenêtre contextuelle apparaîtra pour que l'utilisateur puisse choisir quelle application ouvrir.
Fondamentalement, il ne peut être utilisé que dans le navigateur et ne peut pas être utilisé dans la vue Web de la plupart des applications, telles que WeChat.
Il est impossible de déterminer si l'application a été installée de manière à exécuter la logique d'ouverture de l'application ou de téléchargement de l'application, et l'effet ne peut être obtenu que par piratage.

2. lien universel

Le lien universel est une technologie de lien universel lancée par Apple après iOS 9. Le frontal peut ouvrir l'application en accédant au lien https ordinaire. Si l'application n'est pas installée, elle accédera normalement au contenu du lien https.

avantage:

Les performances sont très fluides lorsque l'utilisateur installe et n'installe pas l'application. S'il est installé, il ouvrira l'application directement. S'il n'est pas installé, il accédera normalement au contenu Web (généralement, nous pointerons le lien vers le page de téléchargement)
Unicité du lien : il n'y aura aucune situation dans laquelle un lien correspond à plusieurs applications, car le lien universel fait l'objet d'une vérification en une étape par le serveur pour garantir l'unicité.
Il existe de nombreux scénarios efficaces, car il s’agit d’une fonction du système et ne se limite donc pas au navigateur. Cela peut également prendre effet dans les messages texte (n’est-ce pas ce que nous voulons)

La carte illustre le processus d'utilisation commerciale du lien universel

3.liens d'application

Les liens d’application sont une technologie lancée après Android 6.0 et ses fonctions sont similaires aux liens universels, je n’entrerai donc pas dans les détails ici.

Comparaison des trois

2. Gardez les liens aussi courts que possible

1. Utiliser des services à chaîne courte (impossible)

Que les liens soient les plus courts possibles, on peut facilement penser à utiliser des services en chaîne courte. Le service de chaîne courte signifie que lorsque nous entrons dans un maillon long, le service de chaîne courte nous renvoie un maillon plus court que nous pouvons utiliser. Lorsque nous accédons au lien court, nous serons redirigés vers notre lien long d'origine. Mais ce type de service n'est pas adapté à notre scénario. Nous utilisons des liens universels et des liens d'application. Les deux technologies nécessitent que le fichier de configuration spécifié soit accessible dans le répertoire racine du nom de domaine. Lors de l'utilisation du service de chaîne courte, il n'y a pas de fichier de configuration correspondant sous le nom de domaine racine de la chaîne courte et la fonction d'appel direct de l'application ne peut pas être réalisée.

2. Demandez un nom de domaine court et coopérez avec l'arrière-plan opérationnel

Afin de pouvoir accéder à différentes fonctions de l'application, nous combinons généralement les paramètres après le lien pour spécifier des scénarios fonctionnels spécifiques, de sorte que l'ensemble du lien soit plus long.

À cette fin, nous implémentons un arrière-plan d'opération, qui configure des paramètres spécifiques par l'opération, puis génère un identifiant court, qui n'a que cet identifiant court sur le lien, et l'application lit la configuration d'arrière-plan de l'opération via cet identifiant court pour obtenir des informations spécifiques. paramètres
Demander un nom de domaine court
Le lien dans le SMS n'a pas l'entête du protocole https

Le formulaire de lien final est le suivant : z.short.com/5f2ac8dd

Mise en œuvre

Trions le processus global

Configurez des paramètres spécifiques en arrière-plan de l'opération pour générer un identifiant court tel que 5f2ac8dd
Lien d'envoi de SMS z.short.com/5f2ac8dd
iOS adopte le lien universel et Android adopte les liens d'application pour cliquer sur le lien SMS. Si l'utilisateur a installé l'application, il l'invoquera directement. Si l'utilisateur n'a pas installé l'application, le navigateur affichera la page de téléchargement de l'application.
Afin d'être compatible avec les téléphones mobiles dotés de versions inférieures qui ne prennent pas en charge les liens universels et les liens d'application, la page de téléchargement Web utilise la technologie URL Scheme pour couvrir le bas et essaie de réactiver l'application lorsque vous cliquez sur Télécharger.

1. Réalisation du contexte opérationnel

Il s'agit de la fonction de configuration de sauvegarde commune, concevoir la structure de la table en fonction des paramètres requis par l'application et enfin générer un identifiant d'identification pour que l'application puisse interroger des paramètres spécifiques.

2. lien universel

Le nom de domaine doit prendre en charge https
Téléchargez le fichier apple-app-site-association dans le répertoire racine du nom de domaine, le contenu est au format json

{
    
    
    "applinks": {
    
    
        "apps": [],
        "details": [
            {
    
    
                "appID": "你的TeamID.你的Bundle ID",
                "paths": ["/*"]
            }
        ]
    }
}

Configurez principalement
l'appID : laissez les collègues de l'application fournir
des chemins : configurez les chemins spécifiés, ces chemins évoqueront la fonction de l'application, prendront en charge l'utilisation de
caractères génériques

Le traitement qui doit être traité par le front-end se trouve ici. Si vous êtes intéressé par le traitement du client, vous pouvez rechercher le traitement du client.

point important:

Le lien universel doit nécessiter un inter-domaine. S'il est déclenché pour ajuster le lien universel B dans la page Web A, alors A et B doivent être des noms de domaine différents.
Universal Link demande une association de site d'application Apple lorsque l'application est installée et exécutée pour la première fois. Si l'association de site d'application Apple est mise à jour, elle ne prendra effet que lorsque l'application sera mise à niveau pour les anciens utilisateurs.

3.liens d'application

Le nom de domaine doit prendre en charge https
Téléchargez le fichier Assetlinks.json dans le répertoire racine nom de domaine.well-known, le contenu est le suivant

[
  {
    
    
    "relation": [
      "delegate_permission/common.handle_all_urls"
    ],
    "target": {
    
    
      "namespace": "android_app",
      "package_name": "com.ss.android.ugc.aweme",
      "sha256_cert_fingerprints": [
        "D7:81:1E:C4:16:6F:EA:6C:C7:20:BA:66:69:9D:C8:4B:58:4A:C9:E6:98:66:13:A7:6D:4E:43:D8:CB:E3:2B:27"
      ]
    }
  }
]

la relation peut spécifier quels chemins peuvent évoquer l'application, et d'autres contenus peuvent
être fournis

4 z.short.com/5f2ac8dd Visitez la page de téléchargement Web

Étant donné qu'un nom de domaine distinct est appliqué pour la fonction de rappel SMS, tous les liens inaccessibles peuvent être résolus vers la page de téléchargement quelles que soient les autres extensions, et les ressources statiques accessibles sont accessibles normalement.

Ici, utilisez directement la directive try_files pour configurer
nginx

La configuration de l'emplacement nginx est la suivante

location / {
   try_files $uri $uri/ /download.html;
}

Analyse de la commande try_files :
La fonction de cette commande est la suivante. Lors de la réception d'une demande d'accès, testez d'abord si $uri est un fichier, puis testez s'il s'agit d'un répertoire. Si vous voulez continuer à accéder, sinon, appelez la commande de redirection interne. Dans cette configuration, elle redirige vers
/download.html

5. La page de téléchargement Web utilise la technologie URL Scheme pour couvrir les résultats

Cliquez sur Télécharger pour essayer de réactiver l'application. Si cela ne réveille pas l'application, téléchargez-la. Nous ne pouvons pas juger si l'application est réveillée, nous pouvons donc l'implémenter avec un autre hack.

Lorsque l'application est réveillée avec succès, notre page Web deviendra masquée. Si notre page n'est pas dans l'état masqué après 3 secondes d'exécution, nous considérerons que l'application n'a pas été réveillée avec succès et exécuterons la logique de téléchargement. Le code est mis en œuvre comme suit

function openApp(deeplink, downloadUrl) {
    
    
  window.location.href = deeplink;

  setTimeout(() => {
    
    
    const isHidden = document.hidden || document.webkitHidden;
    if (typeof isHidden !== 'undefined') {
    
    
      if (!isHidden) {
    
    
        window.location.href = downloadUrl;
      }
    } else {
    
    
      window.location.href = downloadUrl;
    }
  }, 3000);
}

épilogue

C'est la fin du contenu pertinent du rappel des utilisateurs par SMS, j'espère que cela sera utile aux étudiants confrontés à ce genre de scénario commercial.

Bienvenue à tous pour laisser un message pour discuter, je vous souhaite un bon travail et une vie heureuse !

Je suis le front end de bigo, rendez-vous dans le prochain numéro.