archivo

Este artículo se publicó por primera vez en: https://github.com/bigo-frontend/blog/ Bienvenido a seguirlo y volver a publicarlo.

Anatomía del principio técnico de activación con un clic de una aplicación basada en una escena de SMS

Escenas

El volumen de desinstalaciones de la mayoría de las aplicaciones está aumentando y la situación a la que se enfrenta cada empresa es similar. Es necesario recuperar a los usuarios perdidos y el drenaje de SMS es una de las formas relativamente efectivas.

requisito del producto:

Coloque un enlace en el mensaje de texto y, si el usuario hace clic en el enlace, la aplicación se invocará directamente si el usuario la ha instalado (y no necesita pasar por un navegador) y si el usuario no ha instalado la aplicación. aplicación, se abrirá el navegador para mostrar la página de descarga de la aplicación.
El enlace debe ser lo más corto posible (los SMS tienen un límite de caracteres y, si la longitud excede la longitud, se cobrarán varios cargos)

tecnología relacionada

1. Tecnología de aplicaciones web evocadas

Hay tres esquemas de URL comunes para invocar aplicaciones en la web: enlace universal (ios), enlaces de aplicaciones (android); después de la investigación, los esquemas de URL no pueden invocar aplicaciones en mensajes de texto, pero los enlaces universales y los enlaces de aplicaciones sí. Las siguientes tres técnicas se describen en detalle a continuación.

1.Esquema de URL

Primero explique el esquema, veamos la composición de la URL:

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

Tome https://www.baidu.com como ejemplo, el esquema es https, que es el comienzo de la URL para definir el tipo de URL. Podemos asignar una URL al comienzo del esquema especificado a la aplicación y, a través de esta URL, se puede invocar directamente una determinada función de la aplicación en el navegador.

Esquema de URL de aplicaciones comunes

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

defecto:

Cuando la aplicación que se va a invocar no está instalada, se informará un error al hacer clic en este enlace y existen varias formas de informe de errores en diferentes teléfonos móviles.
Si se registran varias aplicaciones con el mismo esquema, el lado web será indistinguible y aparecerá una ventana emergente para que el usuario elija qué aplicación abrir.
Básicamente, solo se puede usar en el navegador y no se puede usar en la vista web en la mayoría de las aplicaciones, como WeChat.
Es imposible juzgar si la aplicación se ha instalado para ejecutar la lógica de abrir la aplicación o descargarla, y el efecto solo se puede lograr pirateando

2. enlace universal

El enlace universal es una tecnología de enlace universal lanzada por Apple después de iOS 9. La interfaz puede abrir la aplicación accediendo al enlace https ordinario. Si la aplicación no está instalada, normalmente accederá al contenido del enlace https.

ventaja:

El rendimiento es muy fluido cuando el usuario instala y no instala la aplicación. Si está instalada, abrirá la aplicación directamente. Si no está instalada, normalmente accederá al contenido web (normalmente apuntaremos el enlace a la página de descarga)
Unicidad del enlace: no habrá ninguna situación en la que un enlace corresponda a varias aplicaciones, porque el enlace universal tiene una verificación en un solo paso por parte del servidor para garantizar la unicidad.
Hay muchos escenarios efectivos, porque esta es una función del sistema, por lo que no se limita al navegador. También puede surtir efecto en mensajes de texto (¿no es esto lo que queremos?)

El mapa ilustra el proceso de uso empresarial del enlace universal.

3.enlaces de aplicaciones

Los enlaces de aplicaciones son una tecnología lanzada después de Android 6.0 y sus funciones son similares a las de los enlaces universales, por lo que no entraré en detalles aquí.

Comparación de los tres

2. Mantenga los enlaces lo más cortos posible.

1. Utilizar servicios de cadena corta (no factible)

Dejemos que los enlaces sean lo más cortos posible, podemos pensar fácilmente en utilizar servicios de cadena corta. El servicio de cadena corta significa que cuando ingresamos un eslabón largo, el servicio de cadena corta nos devolverá un eslabón más corto para que lo usemos. Cuando accedamos al enlace corto, seremos redirigidos a nuestro enlace largo original. Pero este tipo de servicio no es adecuado para nuestro escenario. Usamos enlaces universales y enlaces de aplicaciones. Ambas tecnologías requieren que se pueda acceder al archivo de configuración especificado en el directorio raíz del nombre de dominio. Cuando se utiliza el servicio de cadena corta, no hay un archivo de configuración correspondiente bajo el nombre de dominio raíz de la cadena corta y no se puede realizar la función de invocar directamente la aplicación.

2. Solicite un nombre de dominio corto y coopere con los antecedentes de la operación.

Para lograr saltar a diferentes funciones de la aplicación, generalmente unimos parámetros después del enlace para especificar escenarios funcionales específicos, de modo que todo el enlace sea más largo.

Para este fin, implementamos un fondo de operación, que configura parámetros específicos por operación, y luego genera una identificación corta, que solo tiene esta identificación corta en el enlace, y la aplicación lee la configuración de fondo de la operación a través de esta identificación corta para obtener información específica. parámetros
Solicite un nombre de dominio corto
El enlace del SMS no tiene cabecera de protocolo https

El formulario de enlace final es el siguiente: z.short.com/5f2ac8dd

Implementación

Resolvamos el proceso general.

Configure parámetros específicos en el fondo de la operación para generar una identificación corta como 5f2ac8dd
Enlace de envío de SMS z.short.com/5f2ac8dd
iOS adopta un enlace universal y Android adopta enlaces de aplicaciones para hacer clic en el enlace SMS. Si el usuario ha instalado la aplicación, la invocará directamente. Si el usuario no la ha instalado, el navegador mostrará la página de descarga de la aplicación.
Para ser compatible con teléfonos móviles con versiones inferiores que no admiten enlaces universales y enlaces de aplicaciones, la página de descarga web utiliza la tecnología URL Scheme para cubrir la parte inferior e intenta activar la aplicación nuevamente al hacer clic en descargar.

1. Realización de los antecedentes de la operación.

Esta es la función común de guardar configuración, diseña la estructura de la tabla de acuerdo con los parámetros requeridos por la aplicación y finalmente genera una identificación de identificación para que la aplicación consulte parámetros específicos.

2. enlace universal

El nombre de dominio debe ser compatible con https
Cargue el archivo apple-app-site-association en el directorio raíz del nombre de dominio, el contenido está en formato json

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

Configure principalmente
appID: permita que los colegas de la aplicación proporcionen
rutas: configure las rutas especificadas, estas rutas evocarán la función de la aplicación y admitirán el uso de
comodines

El procesamiento que debe ser procesado por el front-end está aquí. Si está interesado en el procesamiento del cliente, puede buscar el procesamiento del cliente.

punto importante:

El enlace universal debe requerir dominio cruzado; si se activa para ajustar el enlace universal B en la página web A, entonces A y B deben ser nombres de dominio diferentes
Universal Link solicita la asociación del sitio de la aplicación de Apple cuando la aplicación se instala y se ejecuta por primera vez. Si se actualiza la asociación del sitio de la aplicación de Apple, solo tendrá efecto cuando la aplicación se actualice para los usuarios antiguos.

3.enlaces de aplicaciones

El nombre de dominio debe ser compatible con https
Cargue el archivo activelinks.json en el nombre de dominio raíz.directorio conocido, el contenido es el siguiente

[
  {
    
    
    "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 relación puede especificar qué rutas pueden evocar la aplicación, y los colegas del cliente pueden
proporcionar

4 z.short.com/5f2ac8dd Visite la página de descarga web

Debido a que se aplica un nombre de dominio separado para la función de recuperación de SMS, todos los enlaces inalcanzables se pueden resolver en la página de descarga independientemente de otras extensiones, y se puede acceder a los recursos estáticos a los que se puede acceder normalmente.

Aquí use directamente la directiva try_files para configurar
nginx

La configuración de ubicación de nginx es la siguiente

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

Análisis del comando try_files:
La función de este comando es la siguiente: al recibir una solicitud de acceso, primero pruebe si $ uri es un archivo y luego pruebe si es un directorio, si es para continuar accediendo, si no, llame el comando de redirección interna. En esta configuración redirige a
/download.html

5. La página de descarga web utiliza tecnología de esquema de URL para cubrir el resultado final.

Haga clic en Descargar para intentar activar la aplicación; si no la activa, descárguela. No podemos juzgar si la aplicación está activada, por lo que podemos implementarla con otro truco.

Cuando la aplicación se activa con éxito, nuestra página web se ocultará. Si nuestra página no está en el estado oculto después de 3 segundos de ejecución, consideraremos que la aplicación no se ha activado correctamente y ejecutaremos la lógica de descarga. El código es implementado de la siguiente manera

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);
}

epílogo

Este es el final del contenido relevante sobre cómo recordar a los usuarios por SMS. Espero que sea útil para los estudiantes que se encuentren con este tipo de escenario empresarial.

Bienvenidos a todos a dejar un mensaje para discutir. ¡Les deseo un buen trabajo y una vida feliz!

Soy el front-end de bigo, nos vemos en el próximo número.