H5 Evoke Prubsentirenies (с базой данных Source Save)

внешний интерфейс JavaScript Android iOS APP

Некоторое время назад я работал над некоторыми страницами H5, большая часть спроса приходилась на лендинг, задача лендинга — привлечение трафика. Существует две формы оттока трафика, которые также являются нашим определением вызывающей стороны: направление пользователей, которые загрузили, на открытие приложения, и направление пользователей, которые не загрузили его, на загрузку приложения.

Направляя загруженных пользователей к открытию приложения, с точки зрения данных, пользователь остается в приложении больше времени, что должно улучшить липкость пользователя; с точки зрения опыта, приложение лучше, чем H5. Направляя пользователей, которые еще не загрузили приложение, к загрузке приложения, мы можем увеличить нашу пользовательскую базу.

На самом деле, выше объясненокто звониттак же какЗачем звонить, то есть,3 Вт правилоЧто и почему вкак позвонить.

Давайте сначала рассмотрим общие методы вызова и их применимые сценарии:

СМИ вызывающего абонента

URL Scheme

источник

В наших мобильных телефонах много личной информации, такой как контактная информация, фотографии, информация о банковской карте... Мы не хотим, чтобы эта информация была свободно получена приложениями для мобильных телефонов, и опасность утечки информации очень велика. Таким образом, как гарантировать, что личная информация используется с ведома и разрешения владельца устройства, является основной проблемой безопасности интеллектуальных устройств.

Для этого Apple используетПесочницаМеханизм: приложение может получить доступ только к тем ресурсам, доступ к которым объявлен возможным. Однако песочница также препятствует разумному обмену информацией между приложениями, что в некоторой степени ограничивает возможности приложений.

Поэтому нам срочно нужен вспомогательный инструмент, который поможет нам реализовать коммуникацию приложений, и URL Scheme — это этот инструмент.

Что такое URL-схема

Смотрим, URL состоит из:

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

Мы принимаемhttps://www.baidu.comНапример, схема естественноhttps.

Точно так же, как назначение URL-адреса серверному ресурсу, чтобы мы могли получить к нему доступ, мы также можем назначить специально отформатированный URL-адрес мобильному приложению для доступа к этому приложению или функции в этом приложении (для реализации связи). У приложения должен быть логотип, чтобы мы могли его найти, который является частью схемы URL-адреса.

URL-схема общих приложений

APP WeChat Alipay Таобао Вейбо QQ Знай почти Короткое сообщение
URL Scheme weixin:// alipay:// taobao:// sinaweibo:// mqq:// zhihu:// sms://

Синтаксис схемы URL

Приведенная выше таблица представляет собой простейшую схему URL-адресов для открытия приложения, а следующий является нашим часто используемым форматом схемы URL-адресов:

     行为(应用的某个功能)    
            |
scheme://[path][?query]
   |               |
应用标识       功能需要的参数

Intent

Собственный Google Chrome для Android внес некоторые изменения в функцию вызова терминала по сравнению с версией chrome25, и схема URL больше не может запускать приложения Android. Например, через iframe, указывающий наweixin://, даже если у пользователя установлен WeChat, его нельзя открыть. Поэтому приложение должно реализовать официальную предоставленную Googleintent:Грамматика или реализация, позволяющая пользователям открывать приложение с помощью пользовательских жестов, конечно, это отступление.

Синтаксис намерения

intent:
   HOST/URI-path // Optional host 
   #Intent; 
      package=[string]; 
      action=[string]; 
      category=[string]; 
      component=[string]; 
      scheme=[string]; 
   end;

Если пользователь не установит приложение, оно перейдет к системному хранилищу по умолчанию. Конечно, если вы хотите указать адрес перехода, который не вызывается, добавьте следующую строку вend;Незадолго до:

S.browser_fallback_url=[encoded_full_url]

Пример

Ниже показано намерение открыть приложение Zxing для сканирования QR-кода.

intent:
   //scan/
   #Intent; 
      package=com.google.zxing.client.android; 
      scheme=zxing; 
   end;

Чтобы открыть это приложение, вы можете сделать следующее:

 <a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;S.browser_fallback_url=http%3A%2F%2Fzxing.org;end"> Take a QR code </a>

Universal Link

Что такое универсальная ссылка

Universal Link — это новая функция, представленная Apple для iOS9 на WWDC2015, которая позволяет открывать приложения через традиционные HTTP-ссылки. Если пользователь не устанавливает приложение, оно перейдет на страницу, соответствующую ссылке.

Зачем использовать универсальную ссылку

Ссылки традиционной схемы имеют следующие болевые точки:

  • На ios появится всплывающее окно подтверждения, предлагающее пользователю открыть его.Для пользователя вызов терминала является дополнительным шагом. Если у пользователя не установлено приложение, также появится окно с подсказкой, сообщающее нам: «Не удается открыть эту страницу, поскольку URL-адрес недействителен».
  • Традиционный переход по схеме не может знать, успешен ли вызывающий объект или нет.Если вызывающий объект Universal Link не работает, вы можете напрямую открыть страницу, соответствующую этой ссылке.
  • Схема была запрещена в браузерах WeChat, Weibo, QQ и Shoubaizhong, и Universal Link можно использовать, чтобы избежать их блокировки (по состоянию на 21 августа 2018 г. браузеры WeChat и QQ запретили Universal Link, другие основные приложения не обнаружены). запрещен)

Как сделать так, чтобы ваше приложение поддерживало Universal Link

Там много статей, которые подробно расскажут как настроить, так же можете прочитатьофициальная документация, я просто пишу здесь 12345.

  1. иметь поддержкуhttpsдоменное имя
  2. существуетЦентр разработчиков, Найдите свой идентификатор приложения в разделе «Идентификаторы приложений» в разделе «Идентификаторы», отредактируйте и откройте службу «Связанные домены».
  3. Откройте связанные домены в конфигурации проекта и введите имя домена, которое вы хотите поддерживать в доменах.applinks:приставка
  4. настроитьapple-app-site-associationфайл, имя файла должно бытьapple-app-site-association,Без какого-либо суффикса
  5. Загрузите файл на свой HTTPS-серверКорневая директорияили.well-knownПод содержанием

Пит в конфигурации Universal Link

Вот ямки, с которыми мы столкнулись в процессе настройки.Конечно, в первую очередь необходимо строго соблюдать вышеуказанные требования в процессе настройки, особенно выделенные жирным шрифтом места.

  1. междоменная проблема

    После IOS 9.2 для поддержки вызовов Universal Link необходимо активировать междоменное взаимодействие.

    На стороне IOS есть такое суждение: если универсальная ссылка, которую вы хотите открыть, имеет то же доменное имя, что и текущая страница, ios учитывает наиболее вероятное намерение пользователя и напрямую открывает страницу, соответствующую ссылке. Если он не находится под тем же доменным именем, откройте ссылку в своем приложении, то есть выполните определенную операцию вызова.

  2. Универсальная ссылка — это пустая страница

    Универсальная ссылка — это, по сути, пустая страница.Если приложение не установлено, универсальная ссылка рассматривается как обычная ссылка на страницу и, естественно, переходит на страницу 404, поэтому нам нужно привязать ее к нашей странице передачи или странице загрузки.

Как позвонить в три звонящих СМИ

Из предыдущего введения мы можем обнаружить, что будь то схема URL-адресов, намерение или универсальная ссылка, все они являются URL-адресами, но схема URL-адресов и намерение являются специальными URL-адресами. Таким образом, мы можем использовать их так же, как мы используем URL-адреса.

iframe

<iframe src="sinaweibo://qrcode">

Во времена схемы URL-адресов чаще всего использовались iframe. Потому что, если приложение не установлено, оно не перейдет на страницу с ошибкой. Однако до сих пор существует множество проблем с совместимостью iframe в различных системах и приложениях, и схема URL не может использоваться для всех.

этикетка

<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end"">扫一扫</a>

Ранее мы упоминали протокол Intent.Официальный вариант использования использует используемый тег, поэтому мы можем использовать его вместе..

Во время использования для динамически генерируемых тегов используйтеdispatchЧтобы имитировать инициирование события щелчка, было обнаружено, что многие виды событий в прошлом недействительны; используйтеclick()Для имитации срабатывания в некоторых сценариях бывает такая ситуация: после первого клика вернуться на исходную страницу, кликнуть еще раз, позиция клика и позиция, идентифицируемая страницей, имеют небольшое отклонение, поэтому протокол Intent меняется с пометить окно. .location.

window.location

Схема URL в ios 9+, такая как браузеры Safari, UC, QQ, iframe не может успешно вызвать приложение, только через window.location может успешно вызвать терминал.

Конечно, если наше приложение поддерживает Universal Link, iOS 9+ не использует схему URL. И Universal Link я нашел в QQ, будь то навигация iframe или открытая метка или Window.Location не может успешно вызвать конец, я думал, что это QQ и WeChat, я не банил функциональность Universal Link, На самом деле, в общем тесте Top.Location вызывается успешно.

Определить, успешно ли завершился вызов

Если звонящий не работает (приложение не установлено), нам всегда приходится выполнять некоторую обработку, которая может заключаться в переходе на страницу загрузки или переходе в App Store под ios... Но Js не дает нам возможности получить статус возбуждения приложения, Android Intent и Universal Link не о чем беспокоиться, их собственные механизмы позволяют им напрямую переходить на соответствующую страницу после сбоя вызова, но схема URL не имеет такой возможности, поэтому мы можем только реализовать ее в некоторых очень хакерских способах функция обнаружения пробуждения APP.

// 一般情况下是 visibilitychange 
const visibilityChangeProperty = getVisibilityChangeProperty();
const timer = setTimeout(() => {
  const hidden = isPageHidden();
  if (!hidden) {
    cb();
  }
}, timeout);

if (visibilityChangeProperty) {
  document.addEventListener(visibilityChangeProperty, () => {
    clearTimeout(timer);
  });

  return;
}

window.addEventListener('pagehide', () => {
  clearTimeout(timer);
});

Если приложение активировано, страница перейдет в фоновый режим для запуска, и будет запущено событие видимости изменения страницы. Если он срабатывает, это указывает на то, что страница была успешно пробуждена, и clearTimeout вызывается вовремя, чтобы очистить обратный вызов функции отказа (обратный вызов), когда страница не скрыта.

Конечно, это событие совместимо.Когда реализуется конкретный код, проверяется, нужно ли событие иметь префикс (например, -webkit- ). Если ни один из них не совместим, мы будем использовать событие pagehide, чтобы добиться цели.

Идеального решения не существует

Через вышеуказанные пункты мы можем найти, что ли этоСМИ вызывающего абонента,среда окончания вызоваещеОценка конечного результата вызоваИдеального метода не существует.Что мы можем сделать на уровне кода, так это максимизировать совместимость с оставшимися сценариями, гарантируя, что наиболее часто используемые сценарии (такие как WeChat, Weibo, Shoubai и т. д.) вызываются правильно.

Хорошо, давайте вытащим немного кода наружу, чтобы наше приложение можно было вызывать на других платформах.

  • WeChat, Weibo, Shoubai, браузер QQ и т. д.

    Эти приложения блокируют вызывающих абонентов, потому что они напрямую блокируют схему URL. Дальше могут возникнуть сомнения у чиновников.Вы можете открыть Dianping в WeChat, а можете открыть Youku в Weibo.Как это достигается?

    Каждый из них поддерживает белый список.Если ваше доменное имя находится в белом списке, все схемы URL-адресов, инициированные страницами под этим доменным именем, будут разрешены. Как и в WeChat, если вы являетесь «членом семьи» Tencent, вы можете присоединиться к белому списку.Белый список WeChat обычно содержит только «членов семьи», и подать заявку на квалификацию в белый список сложно. Но Weibo и тому подобное могут связаться с детской обувью своего канала, чтобы подать заявку, но условия разные.Например, Weibo должен добавить запись, чтобы открыть Weibo в вашем приложении, и она будет вызываться более 100 раз в течение трех месяцев. Можно добавить в белый список.

  • Tencent App Store напрямую открывает функцию приложения

    Мы только что упомянули, что если вы не являетесь членом семьи WeChat, вам будет сложно войти в белый список, поэтому в Android мы обычно напрямую открываем Tencent App Store, а в ios напрямую открываем App Store. Нажатие кнопки «Открыть» в Tencent App Store может напрямую вызвать наше приложение, но не может открыть функцию в приложении (то есть не может открыть указанную страницу).

    Tencent App Store открыл приложение под названием APP Link. Если вы подали заявку на APP Link, вы можете добавить адрес после адреса магазина приложений при открытии магазина приложений.&android_schema={your_scheme}, чтобы открыть указанную страницу.

Готовая callapp-lib

Много информации! Все виды проблем должны быть проверены самостоятельно! Сердце разбито!

Не волнуйтесь, рецепт приготовлен для вас, просто следуйте рецепту, чтобы принять лекарство😏 —— npm packagecallapp-lib

Вы также можете пройтиscriptЗагрузите файл cdn напрямую:

<script src="https://unpkg.com/callapp-lib"></script>

Его можно успешно использовать в большинстве сред, и на нем легко жарить курицу. Его можно использовать, когда вы его берете. Он также поддерживает множество расширенных функций. Приходите и взгляните на него.ДокументацияАх~~~

Справочная статья

  1. Запустите собственное приложение в браузере, в противном случае перейдите в магазин приложений для загрузки.
  2. приложение для пробуждения h5
  3. Подробное объяснение использования схем URL
  4. Android Intents with Chrome
  5. Общая схема URL
  6. Примечания к разработке интерфейсного развертывания Universal Link
  7. Support Universal Links
  8. Universal Link — лжец

Эта статья была впервые опубликована на:кислая слива.GitHub.IO/2018/08/23/…

Категории