사라지고 있는 안드로이드 표준 브라우저를 지원하지 않아 고민의 씨앗을 없애는 이야기

8406 단어 HTMLAndroidJavaScript
Android 4.3 시스템이 이전에 사용했던 표준 브라우저(Android Browser)에는 많은 문제점이 있고 디버깅 방법도 좋지 않습니다.이미 스마트폰이 된 IE6의 이 브라우저는 지원을 멈추고 싶어 한다.
이 표준 브라우저는 Google의 지원에 의해 차단되었습니다.취약성도 극찬 방치 중!
https://plus.google.com/+ AdrianLudwig/posts/1md7 ruEwBLF(공식적으로 찾을 수 없음)
따라서 사용자든 개발자든 표준 브라우저를 사용하는 장점이 없다
표준 브라우저의 사용자를 크롬으로 이동하기 위해 페이지 상단에 경고가 표시되고 지원에서 Android 표준 브라우저가 제거됩니다.

표준 브라우저 확인 방법


JS에서 열심히 하고 싶지 않기 때문에 UA로 판정한다.언제나 혼돈의 UA, 이번에도 혼돈.

Android 터미널 사용자 에이전트 요약

  • au http://www.au.kddi.com/developer/android/kishu/ua/
  • docomo http://spec.nttdocomo.co.jp/spmss/
  • softbank ?
  • auは1ページにまとまっていて見やすかった。
    docomoは見るの面倒だったので有名そうなやつだけ選んで確認しています。
    
    나는 안드로이드 브라우저의 UA를 몇 개 골랐다.
    모델
    UA
    Xperia Z4 SOV31
    Mozilla/5.0 (Linux; Android 5.0.2; SOV31 Build/28.0.D.0.404) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.93 Mobile Safari/537.36
    Xperia Z1 SOL23
    Mozilla/5.0 (Linux; U; Android 4.2.2; ja-jp; SonySOL23 Build/14.1.C.0.467) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
    isai FL LGL24
    Mozilla/5.0 (Linux; U; Android 4.4.2; ja-jp; LGL24 Build/KVT49L.LGL2410a) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.1599.103 Mobile Safari/537.36
  • 먼저 표준 브라우저임을 나타내는 문자열이 없습니다.
  • Chrome에서 튕기고 싶지만 이렇게 되면 Firefox와 Opera 등 다른 무한한 존재의 안드로이드 브라우저도 나와 NG를 낸다.
  • 크롬Linux;에서 표준 브라우저Linux; U;에서 전체적으로 보면 좋지만 Linux; U;와 가입된 크롬의 단말기도 있다.
  • 이 경우 안드로이드 OS 버전으로 판단할 수 있지만 복잡하게 만들어진 것 같아 하지 않았다.
  • 최종 UA의 조건은 Android, Linux; U;Chrome이다.
  • 판정된 JS는 다음과 같다.


    js
    var isAndroidBrowser = false
    var ua = window.navigator.userAgent
    if (/Android/.test(ua) && /Linux; U;/.test(ua) && !/Chrome/.test(ua)) {
      isAndroidBrowser = true
    }
    

    크롬이 있을 때는 텐트에 들어가게 하고 없을 때는 구글플레이를 날려보내는 방법


    기본 브라우저에서는 Chrome에 대한 링크가 표시됩니다.
  • 크롬이 있을 때 크롬으로 이 페이지를 직접 열기
  • 크롬이 없을 때 Google Play의 크롬 페이지로 건너뛰기
  • iOS와 달리 안드로이드의 경우 hrefintent://에 입력하면 자동으로 진행된다.
    intent://{path}#Intent;scheme={protocol};action={package};
    
    chrome의 포장 이름은 com.android.chrome입니다.
    예를 들어 https://gamy.jp 이 URL의 경우 HTML은 이런 느낌이다.
    html
    <a href="intent://gamy.jp#Intent;scheme=https;action=android.intent.action.VIEW;package=com.android.chrome;end">Google Chromeでひらく</a>
    

    기본 브라우저를 사용할 때 페이지 상단에 큰 경고 표시


    이런 느낌을 줄 수 있어요.

    이 삼각형 경고 아이콘도 CSS에 생성됩니다.
    멋지게 쓰면 표준 브라우저가 나타나지 않는다.
    html
    <div class="alert"></div>
    
    css
    .alert {
        position: relative;
        height: 80px;
        width: 100px;
        margin: 0.5em auto 1.5em;
    }
    .alert:before{
        content: "!";
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 0;
        width: 100px;
        text-align: center;
        line-height: 60px;
        font-size: 46px;
        font-weight: bold;
        color: #111;
    }
    .alert:after{
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -50px;
        z-index: 1;
        border-width: 0 50px 80px;
        border-style: solid;
        border-color: #f9d311 transparent;
        background: transparent;
    }
    

    지원 종료


    특히 지원을 멈추면 공급업체 접두사가 더 보기 좋다.
    IE8은 새해에도 힘을 받을 수 있어 밝은 미래를 볼 수 있다는 느낌을 받았다.심리 작용인가 봐요.

    그럼에도 불구하고 문제


    안드로이드 4.0 시스템 아래 크롬에서도 지원이 끊겨 다른 브라우저(Firefox 등)에서 재생해야 한다.

    좋은 웹페이지 즐겨찾기