크롬 사용자 정의 탭

BY admin
|

크롬 사용자 정의 탭은 무엇입니까? #

앱 개발자는 사용자가 브라우저를 실행하거나 웹뷰를 사용하여 자체 인앱 브라우저를 구축하기 위해 웹 사이트를 탭할 때 선택에 직면합니다.

두 가지 옵션 모두 도전 과제를 제시합니다—브라우저를 시작하는 것은 사용자 정의 할 수없는 무거운 컨텍스트 스위치이며 웹보기는 브라우저와 상태를 공유하지 않으며 유지 관리 오버 헤드를 추가하지 않습니다.

크롬 사용자 정의 탭은 자신의 웹 경험을 통해 애플 리케이션을 더 제어 할 수 있습니다,웹보기에 의존하지 않고 네이티브 및 웹 콘텐츠 사이의 전환이 더 원활합니다.

크롬 사용자 정의 탭은 앱이 크롬의 모양과 느낌을 사용자 정의 할 수 있습니다. 앱은 다음과 같이 변경할 수 있습니다:

  • 도구 모음 색상
  • 애니메이션 입력 및 종료
  • 크롬 도구 모음,오버플로 메뉴 및 하단 도구 모음에 사용자 지정 작업 추가

크롬 사용자 지정 탭은 개발자가 크롬을 미리 시작하고 빠른 로딩을 위해 콘텐츠를 미리 가져올 수 있습니다.

이제 우리의 샘플을 테스트 할 수 있습니다.

언제 크롬 사용자 정의 탭 대 웹보기를 사용해야합니까? #

웹보기는 앱 내에서 자신 만의 콘텐츠를 호스팅하는 경우 좋은 솔루션입니다. 사용자 지정 탭을 사용하는 것이 좋습니다:

  • 구현이 간단합니다. 요청,권한 부여 또는 쿠키 저장소를 관리하기 위해 코드를 작성할 필요가 없습니다.

  • 사용자 정의:

    • 도구 모음 색상
    • 동작 버튼
    • 사용자 정의 메뉴 항목
    • 사용자 정의 입력/출력 애니메이션
    • 하단 도구 모음

  • 탐색 인식:브라우저는 외부 탐색 시 응용 프로그램에 콜백을 제공합니다.

  • 보안:브라우저는 위험한 사이트에서 사용자와 장치를 보호하기 위해 구글의 세이프 브라우징을 사용합니다.

  • 성능 최적화:

    • 백그라운드에서 브라우저의 사전 온난화,응용 프로그램에서 자원을 훔치는 피하면서.
    • 투기 작업을 수행 할 수있는 브라우저에 미리 가능성이 높은 웹 사이트를 제공하여 페이지로드 시간을 단축시킵니다.

  • 수명 주기 관리:브라우저는 응용 프로그램이”포그라운드”수준으로 중요도를 높임으로써 시스템에 의해 제거되는 것을 방지합니다.

  • 공유 쿠키 항아리 및 사용 권한 모델을 통해 사용자는 이미 연결된 사이트에 로그인하거나 이미 부여한 사용 권한을 다시 부여할 필요가 없습니다.

  • 사용자가 데이터 세이버를 사용 설정한 경우에도 데이터 세이버의 혜택을 누릴 수 있습니다.

  • 더 나은 양식 완성을 위해 장치간에 동기화 된 자동 완성.

  • 간단한 사용자 정의 모델.

  • 신속하게 하나의 탭으로 응용 프로그램으로 돌아갑니다.

  • 당신은 장치 사전 롤리팝(자동 업데이트 웹보기)대신 이전 웹 뷰의 최신 브라우저 구현을 사용하고 싶습니다.

이 사용할 수 있습니다 때? #

크롬 45 로,크롬 사용자 정의 탭은 이제 크롬의 지원되는 안드로이드 버전(젤리 빈 이후)의 모든에,크롬의 모든 사용자에게 일반적으로 사용할 수 있습니다.

우리는이 프로젝트에 대한 피드백,질문과 제안을 찾고 있습니다,그래서 우리는 당신이 문제를 제기하는 것이 좋습니다 crbug.com 그리고 우리의 트위터 계정에 질문을하십시오.

구현 가이드#

전체 예제는https://github.com/GoogleChrome/custom-tabs-client에서 확인할 수 있습니다. 사용자 인터페이스를 사용자 정의하고 백그라운드 서비스에 연결하며 응용 프로그램 및 사용자 지정 탭 활동의 수명 주기를 처리하기 위한 재사용 가능한 클래스가 포함되어 있습니다.

이 페이지의 지침을 따르면 훌륭한 통합을 만들 수 있습니다.

사용자 지정 탭 통합을 위한 첫 번째 단계는 사용자 지정 탭 지원 라이브러리를 프로젝트에 추가하는 것입니다. build.gradle파일을 열고 종속성 섹션에 지원 라이브러리를 추가합니다.

dependencies {
...
compile 'com.android.support:customtabs:23.3.0'
}

지원 라이브러리가 프로젝트에 추가되면 두 가지 가능한 사용자 지정 집합이 있습니다:

  • 사용자 정의 탭과의 사용자 정의 및 상호 작용.
  • 페이지를 더 빠르게 로드하고 응용 프로그램을 계속 유지합니다.

사용자 지정 사용자 지정은CustomTabsIntent및CustomTabsIntent.Builder클래스를 사용하여 수행됩니다.

크롬 사용자 정의 탭 열기#

주소 표시줄의 색상 구성#

크롬 사용자 정의 탭의 가장 중요하고 구현하기 쉬운 측면 중 하나는 주소 표시줄의 색상을 앱의 테마와 일치하도록 변경하는 기능입니다.

// Changes the background color for the omnibox. colorInt is an int
// that specifies a Color.
builder.setToolbarColor(colorInt);

사용자 지정 작업 단추 구성#

응용 프로그램의 개발자로서,당신은 크롬 탭에서 사용자에게 표시되는 작업 버튼을 완벽하게 제어 할 수 있습니다.

대부분의 경우 이 작업은 공유와 같은 기본 작업이거나 사용자가 수행할 다른 일반적인 작업입니다.

액션 버튼은 액션 버튼 아이콘과 사용자가 액션 버튼을 누르면 크롬에 의해 호출되는 펜 던 트와 함께 번들로 표시됩니다. 이 아이콘은 현재 높이가 24 인치이고 너비가 24-48 인치입니다.

사용자 지정 메뉴 구성#

크롬 브라우저는 사용자가 브라우저 내에서 자주 수행 할 작업의 포괄적 인 메뉴가 있습니다,그러나 그들은 당신의 응용 프로그램 컨텍스트에 관련되지 않을 수 있습니다.

개발자는 아이콘 행과 발 항목 사이에 나타나는 최대 5 개의 메뉴 항목을 추가하고 사용자 지정할 수 있습니다.

메뉴 항목은 제목과 사용자가 항목이 매개 변수로 전달 도청 할 때 크롬이 당신을 대신하여 호출하는 펜던트CustomTabsIntent.Builder#addMenuItem를 호출하여 추가됩니다.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

구성 사용자 정의 입력 및 종료 애니메이션#

대부분의 안드로이드 응용 프로그램은 사용자 정의보기 입구와 출구 애니메이션을 사용 할 때 안드로이드에 활동 사이의 전환. 크롬 사용자 정의 탭은 응용 프로그램의 나머지 부분과 일관성을 유지하기 위해 애니메이션(사용자가 다시 누를 때)입구와 출구를 변경할 수 있습니다,다르지 않습니다.

웜업 크롬 페이지를 더 빠르게 로드하기 위해#

기본적으로CustomTabsIntent#launchUrl가 호출되면 크롬을 회전시키고 페이지를 시작합니다. 이 부드러움의 인식에 귀중한 시간과 영향을 걸릴 수 있습니다.

우리는 사용자가 거의 즉각적인 경험을 요구한다고 생각,그래서 우리는 당신의 응용 프로그램에 연결하고 브라우저와 기본 구성 요소를 따뜻하게 크롬을 말할 수있는 크롬에서 서비스를 제공하고 있습니다. 우리는 또한 당신을 위해 능력을 실험하고,개발자는 크롬에게 사용자가 방문 할 웹 페이지의 가능성 세트를 말할 수 있습니다. 크롬은 다음을 수행 할 수 있습니다:

  • 기본 도메인
  • 기본 도메인
  • 기본 도메인

크롬 예열 과정은 다음과 같습니다:

  • CustomTabsClient#bindCustomTabsService을 사용하여 서비스에 연결합니다.
  • 서비스가 연결되면CustomTabsClient#warmup로 전화하여 뒤에서 크롬을 시작합니다.
  • CustomTabsClient#newSession을 호출하여 새 세션을 만듭니다. 이 세션은 모든 요청에 사용됩니다.
  • 필요에 따라 새 세션을 만들 때CustomTabsCallback을 매개 변수로 연결하여 페이지가 로드되었음을 알 수 있습니다.
  • 사용자가CustomTabsSession#mayLaunchUrl로 로드할 가능성이 있는 페이지를 크롬에 알립니다.
  • 생성 된CustomTabsSession을 매개 변수로 전달하는CustomTabsIntent.Builder생성자를 호출하십시오.

크롬 서비스에 연결#

CustomTabsClient#bindCustomTabsService방법은 사용자 지정 탭 서비스에 연결하는 복잡성을 제거합니다.

CustomTabsServiceConnection을 확장하는 클래스를 만들고onCustomTabsServiceConnected을 사용하여CustomTabsClient의 인스턴스를 가져옵니다. 이 인스턴스는 다음 단계에서 필요합니다.

브라우저 프로세스 예열#

boolean warmup(long flags)

브라우저 프로세스를 예열하고 네이티브 라이브러리를 로드합니다. 워밍업은 비동기이며 반환 값은 요청이 수락되었는지 여부를 나타냅니다. 여러 성공적인 호출은 사실 돌아갑니다.

은 성공을 위해true을 반환합니다.

새 탭 세션 만들기#

boolean newSession(CustomTabsCallback callback)

세션 연결 호출,사용자 지정 탭과 서로 생성 된 탭을 후속 호출에 사용 됩니다. 여기에 제공된 콜백은 생성된 세션과 연결됩니다. 생성 된 세션에 대한 모든 업데이트(아래 사용자 정의 탭 콜백 참조)도이 콜백을 통해 수신됩니다. 세션이 성공적으로 생성되었는지 여부를 반환합니다. 동일한 사용자 지정 탭 콜백 또는 널 값을 가진 여러 호출이 거짓으로 반환됩니다.

#

boolean mayLaunchUrl(Uri url, Bundle extras, List otherLikelyBundles)

이 사용자 지정 탭세션 메서드는 브라우저에 대한 향후 탐색 가능성을 알려줍니다. 메서드warmup()는 최상의 방법으로 먼저 호출해야 합니다. 가장 가능성이 높은 페이지가 먼저 지정되어야 합니다. 선택적으로,다른 가능성이 있는 링크의 목록이 제공될 수 있다. 그들은 첫번째 것보다는 보다 적게 할 것 같은 대우되고,감소하는 우선권 순서안에 분류되어야 한다. 이러한 추가 링크는 무시될 수 있습니다. 이 방법에 대한 이전의 모든 호출은 박탈됩니다. 작업이 성공적으로 완료되었는지 여부를 반환합니다.

사용자 지정 탭 연결 콜백#

void onNavigationEvent(int navigationEvent, Bundle extras)

사용자 지정 탭에서 탐색 이벤트가 발생하면 호출됩니다. ‘탐색 이벤트 인텐트’는 페이지의 상태를 정의하는 6 개의 값 중 하나입니다. 자세한 내용은 아래를 참조하십시오.

사용자에게 최신 버전의 크롬이 설치되어 있지 않으면 어떻게 됩니까? #

사용자 정의 탭은 사용자 인터페이스의 주요 추가 기능과 함께 작업 _보기 인텐트를 사용하여 사용자 정의 할 수 있습니다. 즉,기본적으로 페이지가 시스템 브라우저 또는 사용자의 기본 브라우저에서 열립니다.

사용자가 크롬을 설치하고 기본 브라우저 인 경우,자동으로 엑스트라를 선택하고 사용자 정의 사용자 인터페이스를 제시 할 것이다. 다른 브라우저가 유사한 사용자 정의 인터페이스를 제공하기 위해 의도 엑스트라를 사용하는 것도 가능하다.

크롬이 크롬 사용자 지정 탭을 지원하는지 어떻게 확인할 수 있습니까? #

크롬 사용자 정의 탭을 지원하는 크롬의 모든 버전은 서비스를 노출합니다. 크롬이 사용자 정의 탭을 지원하는지 여부를 확인하려면 서비스에 바인딩하려고합니다. 성공하면 사용자 지정 탭을 안전하게 사용할 수 있습니다.

모범 사례#

크롬 사용자 정의 탭이 출시 된 이후,우리는 품질의 서로 다른 수준의 다양한 구현을 보았다. 이 섹션에서는 좋은 통합을 만들기 위해 찾은 모범 사례 집합에 대해 설명합니다.

사용자 지정 탭 서비스에 연결 하 고 워밍업()호출#

서비스에 연결 하 고 크롬을 미리 로드 하 여 사용자 지정 탭으로 링크를 열 때 최대 700 밀리초 저장할 수 있습니다.

사용자 지정 탭을 시작하려는 활동의 시작()방법에 대한 사용자 지정 탭 서비스에 연결합니다. 연결 시 워밍업()을 호출합니다.

로드는 우선 순위가 낮은 프로세스로 수행되므로 응용 프로그램에 부정적인 성능 영향을 미치지는 않지만 링크를로드 할 때 큰 성능 향상을 제공합니다.

사전 렌더링 콘텐츠#

사전 렌더링은 외부 콘텐츠를 즉시 열어줍니다. 따라서 사용자가 링크를 클릭할 가능성이 50%이상인 경우 메이런처 메서드를 호출합니다.

메이라운철을 호출하면 사용자 지정 탭이 지원 컨텐츠와 함께 메인 페이지를 미리 가져오고 미리 렌더링합니다. 이 페이지 로딩 프로세스에 최대 속도를 줄 것이다,하지만 네트워크 및 배터리 비용이 함께 제공됩니다.

사용자 지정 탭은 스마트하며 사용자가 계량 네트워크에서 전화를 사용하고 있는지 또는 로우 엔드 장치인지 알고 있으며 사전 렌더링은 장치의 전반적인 성능에 부정적인 영향을 미치며 이러한 시나리오에서 사전 페치 또는 사전 렌더링되지 않습니다. 따라서 이러한 경우에 맞게 응용 프로그램을 최적화 할 필요가 없습니다.

사용자 지정 탭이 설치되지 않은 경우에 대한 대체 제공#

대부분의 사용자가 사용자 지정 탭을 사용할 수 있지만 사용자 지정 탭을 지원하는 브라우저가 장치에 설치되지 않거나 장치에서 사용자 지정 탭이 활성화된 브라우저 버전을 지원하지 않는 경우도 있습니다.

기본 브라우저를 열거 나 자신의 웹보기 구현을 사용하여 좋은 사용자 경험을 제공하는 대체를 제공해야합니다.

리퍼러로 앱 추가#

일반적으로 웹 사이트에서 트래픽이 어디에서 오는지 추적하는 것이 매우 중요합니다. 사용자 지정 탭

intent.putExtra(Intent.EXTRA_REFERRER,
Uri.parse(Intent.URI_ANDROID_APP_SCHEME + "//" + context.getPackageName()));

사용자 지정 애니메이션 추가#

사용자 지정 애니메이션을 실행하면 응용 프로그램에서 웹 콘텐츠로 보다 원활하게 전환됩니다. 사용자가 탐색이 시작된 컨텐츠로 돌아간다는 것을 이해하는 데 도움이 되므로 마침 애니메이션이 시작 애니메이션의 반대인지 확인합니다.

액션 버튼 아이콘 선택#

액션 버튼을 추가하면 사용자가 앱 기능에 더 많은 관심을 갖게 됩니다. 그러나 작업 단추가 수행할 작업을 나타내는 좋은 아이콘이 없으면 작업을 설명하는 텍스트가 있는 비트맵을 만듭니다.

비트맵의 최대 크기는 다음과 같습니다.

다른 브라우저 준비#

사용자에게 사용자 지정 탭을 지원하는 브라우저가 둘 이상 설치되어 있을 수 있음을 기억하십시오. 사용자 지정 탭을 지원하는 브라우저가 두 개 이상 있고 선호하는 브라우저가 없는 경우 사용자에게 링크를 열려는 방법을 묻습니다.

사용자가 사용자 지정 탭을 선택 해제하도록 허용#

사용자가 사용자 지정 탭을 사용하는 대신 기본 브라우저에서 링크를 열 수 있도록 응용 프로그램에 옵션을 추가합니다. 응용 프로그램이 사용자 지정 탭에 대한 지원을 추가하기 전에 브라우저를 사용하여 링크를 연 경우 특히 중요합니다.

네이티브 응용 프로그램에서 콘텐츠를 처리하도록 허용#

사용자가 트위터 앱을 설치하고 트윗에 대한 링크를 클릭 한 경우. 그녀는 트위터 응용 프로그램이 그것을 처리 할 것으로 기대하고있다.

응용 프로그램에서 링크를 열기 전에 기본 대안을 사용할 수 있는지 확인하고 사용하십시오.

도구 모음 색상 사용자 지정#

사용자가 콘텐츠가 응용 프로그램의 일부라고 느끼도록 하려면 응용 프로그램의 기본 색상으로 사용자 지정합니다.

사용자가 응용 프로그램을 떠났음을 분명히 하려면 색상을 전혀 사용자 지정하지 마십시오.

공유 작업 추가#

사용자가 대부분의 사용 사례에서 보고 있는 콘텐츠에 대한 링크를 공유할 수 있을 것으로 예상하고 사용자 지정 탭은 기본적으로 추가하지 않으므로 오버플로 메뉴에 공유 작업을 추가해야 합니다.

닫기 버튼 사용자 지정#

닫기 버튼을 사용자 지정하여 사용자 지정 탭이 응용 프로그램의 일부라고 느끼게 합니다.

사용자가 사용자 지정 탭을 모달 대화 상자처럼 느끼게하려면 기본”엑스”버튼을 사용하십시오. 사용자가 사용자 지정 탭이 응용 프로그램 흐름의 일부라고 느끼도록 하려면 뒤로 화살표를 사용합니다.

내부 링크 처리#

안드로이드에 의해 생성 된 링크에 대한 클릭을 가로 챌 때:자동 링크 또는 웹 뷰의 링크에 대한 클릭을 재정의하면 응용 프로그램이 내부 링크를 처리하고 사용자 정의 탭이 외부 링크를 처리하도록하십시오.

여러 번의 클릭 처리#

사용자가 링크를 클릭하고 사용자 지정 탭을 여는 사이에 처리해야 하는 경우 100 밀리초 미만으로 실행되는지 확인합니다.그렇지 않으면 사람들이 응답하지 않는 것을 보고 링크에서 여러 번 클릭할 수 있습니다.

지연을 방지할 수 없는 경우 사용자가 동일한 링크에서 여러 번 클릭하고 사용자 지정 탭을 여러 번 열지 않는 경우에 대비해야 합니다.응용 프로그램을 사용자 지정 탭과 통합하기 위해 권장되는 방법은 사용자 지정 탭 지원 라이브러리를 사용하는 것이지만 낮은 수준의 구현도 사용할 수 있습니다.

지원 라이브러리의 전체 구현은 깃허브에서 사용할 수 있으며 시작점으로 사용할 수 있습니다. 그것은 또한 크롬 저장소에 포함 된 사람은 안드로이드 스튜디오와 직접 사용할 수 없기 때문에,서비스에 연결하는 데 필요한 에이들 파일이 포함되어 있습니다.2454>

낮은 수준의 사용자 지정 탭을 실행하기 위한 기본 사항 작업_보기 인텐트에 엑스트라를 추가하여 사용자 지정 사용자 지정이 포함됩니다. 사용자 인터페이스에 사용되는 추가 키의 전체 목록은 사용자 지정 탭인텐트 문서에서 찾을 수 있습니다. 사용자 지정 도구 모음 색상을 추가하는 방법에 대한 예는 다음과 같습니다:

사용자 지정 탭 서비스에 연결#

사용자 지정 탭 서비스는 다른 안드로이드 서비스와 동일한 방식으로 사용할 수 있습니다. 프록시 서비스 클래스가 자동으로 생성됩니다.

프록시 서비스의 메서드를 사용하여 워밍업,세션 생성 및 사전 페치

유용한 링크#

  • 사용자 지정 탭을 사용하여 사용자 지정 탭을 탐색 할 수 있습니다.#
    • 안정적인 채널에서 언제 사용할 수 있습니까?
      • 크롬 사용자 정의 탭은 크롬 45 에서 사용할 수 있습니다.
    • 어디에서 질문을 할 수 있습니까?크롬 사용자 정의 탭은 다음과 같습니다.