웹 측면에서 특정 응용 프로그램이 설치되었는지 판정·처리하는 방법 #마법의 램프

12487 단어 jQueryAndroidschemaiOS

개요

  • 웹 측면에서 원본 응용 프로그램(모드)을 설치했는지 확인하고 확인 결과에 따라 분기 처리합니다.
  • 전제 조건

  • myapp:// 이러한 오리지널 모드는 응용 프로그램을 시작할 수 있다
  • 스마트폰 방문만 대상.PC 액세스에서 애플리케이션 소개 페이지로 이동합니다.
  • 어플리케이션이 설치되지 않았을 때 각 OS(iOS, Android)의 오리지널 어플리케이션으로 이전하는 시장
  • 어플리케이션이 설치된 상태에서 어플리케이션 시작
  • 목표


    웹 측에서 오리지널 응용 프로그램을 설치했는지 판단합니다.


    응용 프로그램이 지원되지 않는 장치

  • 애플리케이션 소개 페이지로 마이그레이션
  • 어플리케이션 대응 장치

  • 설치됨
  • 애플리케이션 시작
  • 설치되지 않음
  • 액세스된 OS를 따라 애플리케이션 시장으로 마이그레이션
  • 문제점


    iOS와 Android는 표준 브라우저에서 특정 모드로 마이그레이션하는 방법이 다릅니다.


    iOS

  • 인식할 수 없는 시나리오 마이그레이션 전에 경고 표시
  • 스크립트 실행 소스 페이지에 머물러 있음
  • Android

  • 인식할 수 없는 구조로 이동한 후 오류 페이지 표시
  • 스크립트 실행 원본 페이지에서 벗어나기
  • sample.js
    var checkedAt = (new Date()).getTime();
    window.setTimeout(function() {
        var lagtime = (new Date()).getTime() - checkedAt;
        if (lagtime > LAG_TIME) {
            window.location = useragent ? IOS_STORE_URL : ANDROID_STORE_URL;
            return;
        }
    }, TIMEOUT);
    window.location = MY_APP_SCHEMA;
    
  • 상기 문제로 안드로이드의 경우 스크립트 실행 원본에서 벗어날 때 나머지 스크립트가 정지됩니다

  • 실행되지 않음setTimeout()
  • 항상 어플리케이션 설치가 완료됨
  • 해결 방법

  • iframe(마법등)를 사용하여 스크립트 실행 원본 페이지에서 벗어나지 않음
  • 스크립트 실행 원본의 페이지 내부에서 구조 이동을 시뮬레이션
  • 사용자 확인


    useragent.js
    window.MY_APP = window.MY_APP || {};
    
    MY_APP.UserAgent = (function() {
        var ua = navigator.userAgent;
        if ((ua.indexOf('Android') > 0 && ua.indexOf('Mobile') == -1)) {
            return 0;
        } else if ((ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) {
            return 0;
        } else if (ua.indexOf('iPhone') > 0) {
            return 1;
        } else if (ua.indexOf('iPad') > 0) {
            return 1;
        } else if (ua.indexOf('iPod') > 0) {
            return 1;
        } else {
            return -1;
        }
    });
    

    인식 가능한 아키텍처인지 확인


    index.html
    <!DOCTYPE html>
    <html>
    <head>
        <title>MY APP</title>
        <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
        <script type="text/javascript" src="js/useragent.js"></script>
    </head>
    <body>
    <script>
        const IOS_STORE_URL = "https://itunes.apple.com/jp/app/hoge/";
        const ANDROID_STORE_URL = "https://play.google.com/store/apps/details?id=hoge";
        const MY_WEB_PAGE_URL = "https://example.com";
        const MY_APP_SCHEMA = "myapp://";
        const USER_AGENT_NOT_SMART_PHONE = -1
        const LAG_TIME = 400;
        const TIMEOUT = 1000;
    
        $(function() {
            if (MY_APP.UserAgent() === USER_AGENT_NOT_SMART_PHONE) {
                window.location = MY_WEB_PAGE_URL;
                return false;
            }
    
            $("body").append("<iframe src='" + MY_APP_SCHEMA  + "' style='display:none'/>");
            var checkedAt = (new Date()).getTime();
            window.setTimeout(function() {
                var lagtime = (new Date()).getTime() - checkedAt;
                $("iframe").remove();
                if (lagtime > LAG_TIME) {
                    window.location = useragent ? IOS_STORE_URL : ANDROID_STORE_URL;
                    return;
                }
            }, TIMEOUT);
        });
    </script>
    </body>
    </html>
    

    좋은 웹페이지 즐겨찾기