Chrome 79의 새로운 기능

피트 레페이지

Chrome 79가 출시되었습니다.

저는 Pete LePage입니다. 지금부터 Chrome 79의 개발자를 위한 새로운 기능을 알아보겠습니다.

마스크 가능한 아이콘

Android O 이상을 실행하고 Progressive Web App을 설치한 경우 아이콘을 둘러싼 성가신 흰색 원을 발견하셨을 것입니다.

다행히 Chrome 79에서는 이제 설치된 프로그레시브 웹 앱에서 마스크 가능한 아이콘을 지원합니다.아이콘은 안전 영역(기본적으로 캔버스의 지름이 80% 인 원)에 맞도록 디자인해야 합니다.

그런 다음 웹 앱 매니페스트에서 새 purpose 속성을 아이콘에 추가하고 값을 maskable로 설정해야 합니다.


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes에서는 CSS 팁인 마스크 가능한 아이콘: PWA용 Android 적응형 아이콘에 관한 모든 세부정보를 게시했으며 아이콘이 적합한지 테스트하는 데 사용할 수 있는 유용한 도구를 제공하고 있습니다.

웹 XR

이제 WebXR Device API를 사용하여 스마트폰과 헤드 마운트 디스플레이를 위한 몰입형 환경을 만들 수 있습니다.

WebXR은 다양한 몰입형 환경을 지원합니다. 증강 현실을 사용하여 새 소파를 구입하기 전에 집에 어떤 모습일지 확인하는 것부터 가상 현실 게임과 360도 영화 등에 이르기까지 다양합니다.

새 API를 시작하려면 Virtual Reality Comes to the Web을 읽어보세요.

새로운 오리진 트라이얼

오리진 트라이얼을 통해 실험용 기능과 API를 검증하고, 개발자가 광범위한 배포에서의 사용성과 효과에 관한 의견을 제공할 수 있습니다.

실험용 기능은 일반적으로 플래그가 지정된 상태에서만 사용할 수 있지만 Google에서 기능에 관한 오리진 트라이얼을 제공하는 경우 해당 오리진 트라이얼에 등록하여 오리진의 모든 사용자에게 이 기능을 사용 설정할 수 있습니다.

오리진 트라이얼을 선택하면 베타 테스트 사용자가 Chrome에서 특별한 플래그를 뒤집을 필요 없이 체험판 기간 동안 사용해 볼 수 있는 데모와 프로토타입을 빌드할 수 있습니다.

오리진 트라이얼에 관한 자세한 내용은 웹 개발자를 위한 오리진 트라이얼 가이드를 참고하세요. 활성 오리진 트라이얼 목록을 확인하고 Chrome 오리진 트라이얼 페이지에서 가입할 수 있습니다.

wake lock

Google Slides에서 가장 우려하는 것 중 하나는 단일 슬라이드의 자료를 너무 오래 열어두면 스크린세이버가 작동한다는 점입니다. 계속하려면 먼저 컴퓨터를 잠금 해제해야 합니다. 으.

하지만 새로운 Wake Lock API를 사용하면 페이지에서 잠금을 요청하고 화면이 어두워지거나 화면 보호기가 시작되지 않도록 할 수 있습니다. 이는 프레젠테이션에 적합하지만, 안내를 따르는 동안 화면을 켜진 상태로 유지할 수 있는 레시피 사이트와 같은 작업에도 유용합니다.

wake lock을 요청하려면 navigator.wakeLock.request()를 호출하고 반환되는 WakeLockSentinel 객체를 저장해야 합니다.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

사용자가 페이지에서 벗어나거나 개발자가 이전에 저장한 WakeLockSentinel 객체에서 release를 호출할 때까지 잠금이 유지됩니다.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

자세한 내용은 web.dev/wakelock을 참고하세요.

속성 rendersubtree개

DOM의 일부가 즉시 렌더링되지 않게 하고 싶을 때가 있습니다. 예를 들어 많은 양의 콘텐츠가 있는 스크롤러나 주어진 시점에 일부 콘텐츠만 표시되는 탭 형식의 UI를 예로 들 수 있습니다.

새 rendersubtree 속성은 해당 하위 트리 렌더링을 건너뛸 수 있다고 브라우저에 알립니다. 이렇게 하면 브라우저에서 페이지의 나머지 부분을 처리하는 데 더 많은 시간을 할애할 수 있으므로 성능이 향상됩니다.

rendersubtree가 invisible로 설정되면 요소의 콘텐츠가 그려지거나 Hit Test되지 않으므로 렌더링 최적화가 가능합니다.

rendersubtree를 activatable로 변경하면 invisible 속성을 삭제하고 콘텐츠를 렌더링하여 콘텐츠가 표시됩니다.

Chrome 개발자 서밋 2019

Chrome Dev Summit에 참석하지 못하셨다면 YouTube 채널에서 모든 내용을 확인하실 수 있습니다.

제이크는 새로운 팀원인 수지코를 비롯해 대담 사이에 진행된 모든 재미있는 내용이 담긴 트위터 대화목록도 보유하고 있습니다.

추가 자료

주요 특징 중 일부만 다룹니다. Chrome 78의 추가 변경사항은 아래 링크를 확인하세요.

구독

최신 동영상을 확인하고 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 80이 출시되는 대로 바로 Chrome의 새로운 기능을 소개해 드리겠습니다.