Некоторые мысли об открытии приложения на странице H5

APP

1. Спрос

Некоторое время назад мы разработали проект и столкнулись с требованием. Короче говоря, наша страница H5 имеет "вAppПосле того, как пользователь нажмет кнопку «Открыть», если пользователь установилapp, затем сразу открытьapp, если у пользователя он не установленappЗатем перейдите к скачиваниюappстраница

Прежде всего, на мой взгляд, H5 не должен иметь возможности определять, установлено ли приложение (если кто-то из друзей знает, как определить, пожалуйста, сообщите мне об этом в комментариях, спасибо!), поэтому нам нужны некоторые навыки, чтобы Complete Процесс определения того, установлено ли приложение.

Следующие шаги представлены на примере телефона Android.ios9Система после версии нам не нужнаH5сделать эти сужденияappУстанавливать ли процесс (ios9之后предоставив универсальную ссылку（Universal link）, так что, если приложение не установлено, будет предложено открыть Apple App Store, а если приложение установлено, оно сразу же откроется)

2. О протоколе схемы

Протокол схемы — это протокол перехода внутри страницы. Мы можем перейти на каждую страницу в приложении, на которую хотим перейти, настроив протокол схемы.schemeсоглашение заключеноurlпрыгает в виде , поэтому мыH5также через этоurlПерейти к прыжкуappВнутри указанной страницы это H5 openappпринцип.

Формат URL-адреса схемы аналогичен:[scheme]://[host]/[path]?[query]

3. H5 реализует два метода открытия в приложении.

3.1 Судя по простому использованию таймера

Идея этого метода состоит в том, чтобы сначала установить адрес, на который мы хотим перейти, с помощью собственногоAppОпределяем вместе со студентамиschemeизurl, после этого установите таймер, логика, выполняемая в таймере, заключается в переходе к загрузкеappстраницу, так что если телефон пользователя не имеетapp, через некоторое время он перейдет на страницу загрузки.

Основной код выглядит следующим образом: (вы можете использоватьiframeПрыжок сделан, но его нужно учитыватьiframeВы вiosи другие устройства разрешены)

const schemeUrl = 'xxx'
const downloadUrl = 'XXX'
const wait = 500
try {
    location = schemeUrl
    setTimeout(() => {
        location = downloadUrl
    }, wait)
} catch (e) {
    console.error(e)
}

существующие проблемы

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

3.2 Используйте скрытый атрибут окна для оценки

Идея этого метода заключается в том, что при успешном вызовеapp, наша страница H5 находится на заднем плане,window.hiddenсвойства станутtrue, о чем можно судить по изменению этого свойстваappОткрыта она или нет, перейти на страницу загрузки, если она не открыта, разумеется, здесь также используется таймер

Основной код выглядит следующим образом:

function checkOutApp() {
    const schemeUrl = 'xxx'
    const downloadUrl = 'XXX'
    const wait = 1000
    // 是否进入后台
    const hidden = false
    location = schemeUrl
    // 如果一定时间内，页面没有隐藏，则跳转到下载页
    setTimeout(() => {
        if (!hidden) {
            location = downloadUrl
        }
    }, wait)
    // 页面可见性变化事件
    document.addEventListener("visibilitychange", function(){
        if (document.hidden) {
            hidden = true
        }
    });
}

существующие проблемы

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

4. Некоторые мысли

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

Категории