이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Device Memory API

Philip Walton

오늘날 웹에 연결할 수 있는 기기의 기능은 더 넓어지고 있습니다. 그 어느 때보다도 큰 문제가 되고 있습니다. 고급 컴퓨터에 제공되는 동일한 웹 응용 프로그램이 데스크톱 컴퓨터는 저전력 휴대전화, 시계 또는 태블릿에 제공될 수도 있습니다. 공감대를 형성하고 효과적인 흥미로운 경험을 만드는 것은 모든 기기에서 원활하게 작동합니다.

Device Memory API는 새로운 웹입니다. 웹 개발자가 최신 기기를 다루는 데 도움을 주는 플랫폼 기능입니다. 가로 모드입니다. navigator 객체에 읽기 전용 속성을 추가합니다. navigator.deviceMemory: 기기의 RAM 크기를 반환합니다. 기가바이트로, 2의 거듭제곱에 가장 가까운 값으로 내림됩니다. 또한 이 API에는 클라이언트 힌트 헤더, 동일한 값을 보고하는 Device-Memory입니다.

개발자는 Device Memory API를 사용하여 다음 두 가지 주요 작업을 할 수 있습니다.

반환된 기기 메모리 값 (예: '라이트' 버전)을 사용하여 실행할 수 있습니다.
방법을 더 잘 이해할 수 있도록 이 값을 분석 서비스에 보고하세요. 사용자 행동, 전환수 또는 기타 측정항목과 상관관계가 있는 기기 메모리 중요한 역할을 합니다

기기 메모리를 기반으로 콘텐츠를 동적으로 맞춤설정

자체 웹 서버를 실행 중이고 리소스를 제공하면 Device-Memory 클라이언트 힌트 헤더.

GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*

이 기법을 사용하면 하나 이상의 애플리케이션 버전을 만들 수 있습니다. 스크립트를 작성하고 Device-Memory 헤더에 설정된 값입니다. 이러한 버전은 완전히 다른 코드를 사용해야 합니다 (유지관리하기가 더 까다롭기 때문). 대부분의 경우 '라이트' 비용이 많이 들고 중요하지 않은 기능만 제외합니다. 사용자 경험에 큰 영향을 미칩니다.

클라이언트 힌트 헤더 사용

Device-Memory 헤더를 사용 설정하려면 클라이언트 힌트 <meta> 태그를 추가하세요. 문서의 <head>에 추가합니다.

<meta http-equiv="Accept-CH" content="Device-Memory">

또는 '기기-메모리'를 포함합니다. 서버의 Accept-CH 응답 헤더에 다음을 추가하세요.

HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width

이렇게 하면 모든 하위 리소스와 함께 Device-Memory 헤더를 보내도록 브라우저에 지시합니다. 현재 페이지에 대한 요청입니다.

즉, 위에서 설명한 옵션 중 하나를 사용자가 RAM이 0.5GB인 기기에서 방문하는 경우 모든 이미지, CSS 및 이 페이지의 JavaScript 요청에는 Device-Memory 헤더가 포함됩니다. 값을 '0.5'로 설정하면 여러분의 서버는 이러한 요청에 알 수 있습니다.

예를 들어 다음 Express 경로는 '라이트' Device-Memory 헤더가 설정되고 값이 1개 미만이거나 '가득 찬' 해당 브라우저가 Device-Memory 헤더 또는 값이 1 이상입니다.

app.get('/static/js/:scriptId', (req, res) => {
  // Low-memory devices should load the "lite" version of the component.
  // The logic below will set `scriptVersion` to "lite" if (and only if)
  // `Device-Memory` isn't undefined and returns a number less than 1.
  const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';

  // Respond with the file based on `scriptVersion` above.
  res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});

JavaScript API 사용

경우에 따라 (예: 정적 파일 서버 또는 CDN 사용) HTTP 헤더를 기반으로 조건부로 요청에 응답합니다 이러한 경우 사용자는 JavaScript API를 사용하여 JavaScript 코드에서 조건부 요청을 할 수 있습니다.

다음 로직은 동적이라는 점을 제외하면 위의 익스프레스 경로와 유사합니다. 는 클라이언트 측 로직에서 스크립트 URL을 결정합니다.

// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';

const component = await import(`path/to/component.${componentVersion}.js`);
component.init();

동일한 구성요소의 여러 버전을 조건부로 제공하는 동안 좋은 전략이지만 때로는 구성요소를 전혀 제공하지 않습니다.

대부분의 경우 구성요소는 순수한 개선 사항일 뿐입니다. 거기에 세련된 느낌을 더하고 앱의 핵심 기능에는 필요하지 않습니다. 포함 이러한 경우 이러한 구성 요소를 애초에 로드하지 않는 것이 좋습니다. 사용자 환경 개선을 위한 구성요소로 인해 앱이 느려지는 경우 목표를 달성하지 못하는 것입니다

사용자 경험에 영향을 미치는 모든 결정이 내려졌을 때 측정할 수 있습니다 또한 이해관계자와의 협업을 어떻게 확인할 수 있습니다

장치 메모리와 현재 장치의 사용자 행동의 상관관계 이해 취해야 할 조치를 더 잘 알 수 있고 향후 변경의 성공 여부를 측정할 수 있는 기준을 제공합니다.

애널리틱스로 기기 메모리 추적

Device Memory API는 새로운 API이며 대부분의 분석 제공업체에서 이를 추적하지 않음 기본적으로 제공됩니다 다행히도 대부분의 분석 서비스 제공업체는 비정형 데이터를 기반으로 하는 (예: Google 애널리틱스에는 맞춤 측정기준이라는 기능이 있음) 사용자의 기기 메모리를 추적하는 데 기기에서 사용할 수 있습니다.

맞춤 기기 메모리 측정기준 사용

Google 애널리틱스에서 맞춤 측정기준을 사용하려면 두 단계를 거쳐야 합니다.

Google 애널리틱스에서 맞춤 측정기준을 설정합니다.
추적 코드를 set(으)로 업데이트합니다. 방금 만든 맞춤 측정기준의 기기 메모리 값입니다.

맞춤 측정기준을 만들 때 이름을 '기기 메모리'로 지정합니다. 그런 다음 'session' 범위 로 설정합니다. 이 값은 사용자의 탐색 세션 중에는 변경되지 않기 때문입니다.

그런 다음 추적 코드를 업데이트합니다. 예를 들면 다음과 같습니다. Device Memory API를 지원하지 않는 브라우저의 경우 값은 '(not set)'이 됩니다.

// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');

// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');

// Do any other other custom setup you want...

// Send the initial pageview.
ga('send', 'pageview');

기기 메모리 데이터 보고

기기 메모리 크기가 set 추적기 객체를 사용하면 Google 애널리틱스로 전송하는 모든 데이터에 이 값이 포함됩니다. 이렇게 하면 원하는 측정항목 (예: 페이지 로드 시간, 목표 달성률 등)을 기기별로 분류할 수 있습니다. 상관 관계가 있는지 확인할 수 있습니다.

기기 메모리는 기본 제공 측정기준이 아닌 맞춤 측정기준이므로 표준 보고서에 표시되지 않습니다. 이 데이터에 액세스하려면 다음 단계를 따르세요. 맞춤 보고서를 만듭니다. 예를 들어 두 기간의 로드 시간을 비교하는 맞춤 보고서를 기기 메모리는 다음과 같을 수 있습니다.

생성된 보고서는 다음과 같을 수 있습니다.

기기 메모리 데이터를 수집하고 사용자가 애플리케이션을 경험하고 싶다면 다양한 사용자에게 다양한 리소스를 제공하는 기술 중 하나 이상에 해당합니다. 이후에는 결과가 개선되었는지 확인할 수 있습니다.

요약

이 게시물에서는 Device Memory API를 사용하여 애플리케이션을 맞춤설정하는 방법을 설명합니다. 애플리케이션의 성능을 향상하기 위해 얼마나 많은 사람들이 내 기기처럼 이러한 사용자가 앱을 경험하게 됩니다.

이 게시물에서는 Device Memory API에 중점을 두지만 대부분의 기법은 여기에 설명된 모든 API는 기기 기능 또는 네트워크 상태.

기기 환경이 지속적으로 확대됨에 따라 그 어느 때보다도 웹 개발자들은 모든 스펙트럼을 고려하여 결정을 내리고 영향을 줄 수 있습니다.