2018년 4월 13일 금요일

Save-Data Client Hint

Save-Data Client Hint

ilya grigorik은 Client Hint라 하여 웹사이트에서 코드를 구현시에 그에 더 맞게 구현할 수 있도록 헤더 값 등을 통하여 제공해주어야 한다 제안하였다(Client Hint Draft)
그 중 일부 Save-Data(데이터 절약모드 상태) 클라이언트(헤더 값) 힌트를 이용하면 헤더를 통해 선택적으로 컨텐츠를 제공 할 수 있다.

Save-Data 기능 ON
  • 직접 Header 값에서 Save-Data : On 이라 제공
  • 아래 기기들에서 여러가지 모드 설정을 하면 Save-Data 헤더값에 On을 제공한다
1. Chrome49+(PC) 브라우저 데이타세이버(Data Saver) 플러그인 사용
    • 설치가 되면 우측 상단에 데이타 세이버가 설치 된 것을 알 수 있다.

2. 안드로이드 Chrome에서 데이터 절약모드 사용
- 태블릿 혹은 스마트폰에서 Chrome 열기 - 오른쪽 상단 설정 클릭 - 고급에서 데이터 절약모드 선택

3. Opera 35+ 에서 Opera Turbo Mode 사용 시
4. Yandex 16.2+ 에서 Turbo Mode 사용 시

Data-Saver ??
데이터 절약 모드를 사용하면 웹 리소스가 구글 서버를 거쳐 압축이 이루어져서 데이터를 절약할 수 있다. 현재 안드로이드, 크롬에서만 사용 가능하며, apple에서도 추가 할 예정

데이터 압축 프록시 작동 방법
출처 : Data-Saver의 동작과정
(https://developer.chrome.com/multidevice/data-compression)
  •  이를 이용하여 데이터 절약을 원하는 사람들에게 adaptive하게 리소스를 전달 할 수 있음

Data-Saver 특징
  • 암호화 되지 않은 상태에서 proxy 동작 후 https 대상에 https로 전달함
  • 프록시를 통하기 때문에 ip는 X-Forwarded-For 헤더값을 통함
  • 사이트 소유자의 콘텐츠 옵트아웃(Opt-out : 당사자가 자신의 데이터를 수집을 허용하지 않는다고 명시)에 대해서는 Cache-Control: no-transform 지시자를 존중
    데이터를 변형하지 않고 직접 전달