Chrome 79의 새로운 기능

Pete LePage

Chrome 79가 출시되었습니다.

저는 피트 르페이지입니다. Chrome 79에서 개발자를 위해 새로 제공되는 기능을 살펴보겠습니다.

마스크 가능한 아이콘

Android O 이상을 실행하고 프로그레시브 웹 앱을 설치한 경우 아이콘 주위에 성가신 흰색 원이 보셨을 것입니다.

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

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


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

Tiger Oakes의 CSS Tricks - 마스킹 가능한 아이콘: PWA용 Android 적응형 아이콘에 관한 훌륭한 게시물에는 모든 세부정보가 포함되어 있으며, 아이콘이 잘 표시되는지 테스트하는 데 사용할 수 있는 훌륭한 도구도 있습니다.

웹 XR

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

WebXR을 사용하면 다양한 몰입형 환경을 제공할 수 있습니다. 증강 현실을 사용하여 새 소파를 구매하기 전에 집에 배치했을 때의 모습을 확인하는 것부터 가상 현실 게임, 360도 영화 등 다양한 콘텐츠를 즐길 수 있습니다.

새 API를 시작하려면 웹에서 가상 현실 제공을 읽어보세요.

새로운 오리진 트라이얼

오리진 체험판은 Google에서 실험적 기능과 API를 검증할 수 있는 기회를 제공하고 개발자가 광범위한 배포에서 이러한 기능의 사용성과 효과에 관한 의견을 제공할 수 있도록 합니다.

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

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

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

Wake Lock

Google Slides에서 가장 불편한 점 중 하나는 한 슬라이드에서 자료가 열려 있는 상태로 너무 오래 있으면 스크린 보호기가 실행된다는 것입니다. 계속하려면 컴퓨터를 잠금 해제해야 합니다. 으.

하지만 새 Wake Lock API를 사용하면 페이지에서 잠금을 요청하고 화면이 어두워지거나 화면 보호기가 실행되는 것을 방지할 수 있습니다. 슬라이드에 적합하지만 안내를 따르는 동안 화면을 켜 두고 싶은 레시피 사이트와 같은 곳에서도 유용합니다.

웨이크락을 요청하려면 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로 설정되면 요소의 콘텐츠가 그려지거나 히트 테스트가 실행되지 않으므로 렌더링이 최적화됩니다.

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

Chrome Dev Summit 2019

Chrome Dev Summit을 놓치셨다면 모든 대담을 YouTube 채널에서 시청하실 수 있습니다.

또한 잭은 팀의 새로운 멤버인 Surjiko를 비롯해 대화 중간에 있었던 재미있는 모든 내용을 담은 멋진 트위터 대화목록을 작성했습니다.

추가 자료

여기에는 주요 내용 중 일부만 다룹니다. Chrome 78의 추가 변경사항은 아래 링크를 확인하세요.

구독

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

저는 펫 르페이지입니다. Chrome 80이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.