H5 깨 우기 APP 실현 방법 및 주의 점 요약

머리말
전단 개발 자로 서 이런 수요 가 자주 발생 하 는데 한 사용자 가 자신의 앱 을 설치 하면 앱 첫 페이지 를 열거 나 페이지 를 지정 하고 앱 을 설치 하지 않 으 면 해당 다운로드 페이지 로 이동한다.이러한 수요 도 새로운 것 을 끌 어 올 리 고 분열 시 키 는 데 없어 서 는 안 될 부분 이기 때문에 우리 가 해결 해 야 한다.오늘 어떻게 이 루어 지 는 지 볼 까요?
점프 앱 방식
현재 이 기능 을 실현 하 는 두 가지 좋 은 방법 은 URL Scheme,meta 태그 와 Universal Links 이다.
URL Scheme
URL Scheme 은 app 이 서로 뛰 어 넘 을 수 있 는 대외 인터페이스 입 니 다.앱 에 유일한 URL 경 로 를 정의 함으로써 외부 에서 이 지 정 된 앱 을 빠르게 열 수 있 습 니 다.앱 마다 URL Scheme 이 다 릅 니 다.같은 URL Scheme 이 존재 하면 시스템 은 그 앱 을 먼저 설치 한 URL Scheme 에 응답 합 니 다.나중에 설치 한 앱 의 URL Scheme 이 덮어 져 서 호출 할 수 없습니다.URL scheme 의 형식 은:
[scheme]://[host]/[path]?[query]
자주 사용 하 는 URL Scheme 플랫폼 을 소개 합 니 다.

QQ： mqq://

위 챗:weixin:/

텐 센트 웨 이 보:TencentWeibo:/

타 오 바 오:타 오 바 오:/

알 리 페 이:/

웨 이 보:sinaweibo:/

Android 와 iOS 플랫폼 을 동시에 지원 합 니 다.
메타 태그
웹 페이지 에 meta 탭 을 설정 하고 safari 를 사용 하여 열 면 상단 에 자신의 app 내 비게 이 션 바 를 표시 합 니 다.앱 이 설치 되 어 있 지 않 으 면 앱 스토어 로 이동 해서 다운로드 할 수 있 습 니 다.앱 이 설치 되 어 있 으 면 맨 위 에 있 는 메타 탭 을 통 해 앱 을 깨 울 수 있 습 니 다.
iOS 만 의
Universal Links
Universal Links 는 일반적인 링크 입 니 다.iOS 9 이상 의 사용 자 는 이 링크 를 클릭 하여 빈 틈 없 이 app 응용 프로그램 으로 전환 할 수 있 습 니 다.safari 를 통 해 점프 를 열지 않 아 도 됩 니 다.사용자 가 이 앱 을 설치 하지 않 으 면 safari 에서 이 링크 가 가리 키 는 웹 페이지 를 엽 니 다.
iOS 만 있 고 iOS 9.0 에서 나 왔 습 니 다.
여러 가지 방식 의 사용
URL Scheme 과 Universal Links 는 모두 설정 해 야 하 며 설정 해 야 작 동 할 수 있 습 니 다.
URL 구성 표 사용
URL Scheme 의 사용 방식 은 어렵 지 않 습 니 다.가장 간단 한 사용 방법 은 탭 링크 를 추가 하 는 것 입 니 다.
위 챗 열기
이런 방식 으로 접근 하 는 것 은 비교적 간단 하 다.안 드 로 이 드 와 IOS 는 모두 사용 할 수 있 지만 위 챗 단 에 서 는 안 된다.위 챗 단 에 화이트 리스트 를 설정 하고 URL Scheme 용법 을 완전히 차단 했다.화이트 리스트 를 넣 지 않 으 면 경 동 처럼 바로 열 수 있 고 그렇지 않 으 면 불가능 하 다.
meta 태그 사용
meta 태그 의 방식 도 간단 합 니 다.웹 페이지 에 meta 태그 만 추가 하면 됩 니 다.

 <meta charset="UTF-8" name="apple-itunes-app" content="app-id=7777777, affiliate-data=myAffiliateData, app-argument=yourScheme://">

효 과 는 웹 페이지 의 맨 위 에 톱 바 를 표시 하 는 것 이다.
Universal Links 사용
이런 방식 의 설정 은 좀 번 거 롭 습 니 다.본인 도 iOS 개발 을 접 해 본 적 이 없어 서 관사이트에 게 소개 해 드 렸 습 니 다.
총결산
위의 모든 방식 은 완벽 하 게 해결 되 지 못 한다.애플 만 지원 하거나 머리 앱 제한 이 많 기 때문에 다른 일 을 많이 해 야 잘 어 울 릴 수 있다.
먼저 우 리 는 어떤 방식 을 취 하 는 지 확인 해 야 한다.상기 소 개 를 종합해 보면 첫 번 째 URL Scheme 방식 만 이 가장 좋 은 선택 이 라 고 할 수 있다.왜냐하면 두 플랫폼 이 모두 지원 하기 때문이다.그 다음 에 두 플랫폼 은 머리 앱 에서 어떻게 열 리 는 지 하 는 것 이다.사실은 이 문 제 는 사용자 가 외부 브 라 우 저 에서 열 리 는 것 을 보 여 주 는 것 이기 때문에 이 문 제 를 대체적으로 해결 할 수 있다.다음은 코드 로 한 걸음 한 걸음 실현 하 겠 습 니 다.
깨 우기 앱 기능 구현
알림 브 라 우 저 열기
우선 브 라 우 저 에서 열 리 는 작은 힌트 를 다음 과 같이 실현 해 야 합 니 다.

두부 APP 판단 기능 구현
여기 가 바로 브 라 우 저의 User-agent 를 통 해 위 챗 또는 다른 앱 브 라 우 저 인지 판단 하 는 것 입 니 다.코드 는 다음 과 같 습 니 다.

/**
 *           APP
 */
function isBlackApp() {
  var u = navigator.userAgent.toLowerCase();
  return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf('mqqbrowser') > -1;
}

위의 함 수 는 몇 가지 브 라 우 저,위 챗,웨 이 보,QQ,QQ 브 라 우 저 를 판단 했다.열 리 거나 다운로드 단 추 를 눌 렀 을 때 머리 앱 인지 여 부 를 판단 하고,브 라 우 저 에서 열 리 지 않 으 면 자신의 앱 을 직접 열 면 된다 는 것 을 알려 준다.코드 는 다음 과 같다.

function openTuer() {
  if (isBlackApp()) {
    //   APP              
    showTips();
  } else {
    //     APP     ，            ，          
    openApp(0, 0);
  }
}

앱 을 깨 우 는 핵심 방법
위 에서 도 openApp 이라는 함 수 를 언급 했 습 니 다.그러면 구체 적 으로 어떤 것 일 까요?여기 서 우 리 는 이 함 수 를 어떻게 실현 하 는 지 보 겠 습 니 다.여기 서 현재 자신의 프로젝트 수요 에 따라 앱 을 열 려 면 두 개의 인자 가 필요 합 니 다.하 나 는 앱 을 여 는 특정한 페이지 which 이 고 하 나 는 특정한 페이지 를 여 는 데 필요 한 인자 arg 입 니 다.그래서 우리 openApp 함수 에 두 개의 인자 가 필요 합 니 다.
openApp 의 실현
openApp 이 함 수 는 매우 간단 합 니 다.바로 두 개의 함 수 를 다음 과 같이 호출 하 는 것 입 니 다.

function openApp(which, arg) {
    jumpApp("testApp://which=" + which + "&arg=" + arg);
    noApp();
}

첫 번 째 함 수 는 앱 을 여 는 것 이 고,두 번 째 함 수 는 앱 을 열지 않 았 거나 앱 을 설치 하지 않 았 을 때 이동 하 는 주소 처 리 를 책임 진다.
jump App 의 실현
이 함수 의 실현 은 iOS 8 이전에 iframe 을 사용 하여 이 루어 질 수 있 음 을 주의해 야 합 니 다.그러나 그 후의 것 은 안 됩 니 다.애플 에 의 해 차단 되 었 기 때문에 페이지 를 통 해 이동 할 수 밖 에 없습니다.구체 적 인 코드 는 다음 과 같 습 니 다.

function jumpApp(t) {
  try {
    var e = navigator.userAgent.toLowerCase(),
      n = e.match(/cpu iphone os (.*?) like mac os/);
    if (((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)) {
      window.location.href = t;
    } else {
      var r = document.createElement("iframe");
      (r.src = t), (r.style.display = "none"), document.body.appendChild(r);
    }
  } catch (e) {
    window.location.href = t;
  }
}

noApp 의 실현
noApp 의 실현 도 간단 합 니 다.타 이 머 를 정의 하 는 것 입 니 다.특정한 시간 내 에 반응 이 없 으 면 지정 한 다운로드 페이지 로 이동 하면 됩 니 다.구체 적 인 코드 는 다음 과 같다.

var timer = null;
function noApp() {
  var t = Date.now(),
    r = "http://www.tuerapp.com";
  timer = setTimeout(function() {
    return Date.now() - t > 2200
      ? (clearTimeout(timer), !1)
      : !document.webkitHidden && !document.hidden && void (location.href = r);
  }, 2000);
}

이로써 기본 적 인 기능 을 실현 하 였 으 며,실제 과정 에서 많은 문제 가 존재 할 수 있다.
총결산
H5 깨 우기 앱 의 실현 방법 및 주의 점 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 H5 깨 우기 앱 방법 에 관 한 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!