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

Chrome 88의 새로운 기능

Pete LePage

Chrome 88이 안정화 버전으로 출시되기 시작했습니다.

다음 사항에 유의하시기 바랍니다.

이제 매니페스트 V3를 사용하여 Chrome 웹 스토어에 확장 프로그램을 업로드할 수 있습니다.
aspect-ratio CSS 속성을 사용하면 모든 요소의 가로세로 비율을 쉽게 설정할 수 있습니다.
Chrome 88에서는 특정 조건에서 숨겨진 페이지의 체이닝된 JavaScript 타이머를 상당히 제한합니다.
이제 신뢰할 수 있는 웹 활동에서 Play 결제를 사용할 수 있습니다.
Chrome Dev Summit의 모든 동영상이 게시되었습니다.
이 외에도 다양한 기능이 있습니다.

저는 집에서 작업하고 촬영하는 피트 르페이지입니다. Chrome 88에서 개발자를 위해 새로 제공되는 기능을 살펴보겠습니다.

Manifest V3

이제 Chrome 88에서 Manifest V3로 빌드된 확장 프로그램을 지원하며 Chrome 웹 스토어에 업로드할 수 있습니다. Manifest V3는 기본적으로 Chrome 확장 프로그램의 보안, 성능, 개인 정보 보호를 강화하는 새로운 확장 프로그램 플랫폼입니다.

예를 들어 원격으로 호스팅된 코드는 허용되지 않으므로 Chrome 웹 스토어 검토자가 확장 프로그램이 야기하는 위험을 더 잘 이해하는 데 도움이 됩니다. 확장 프로그램을 더 빠르게 업데이트할 수 있습니다.

백그라운드 페이지를 대체하는 서비스 워커를 도입합니다. 서비스 워커는 필요할 때만 메모리에 상주하므로 확장 프로그램은 시스템 리소스를 덜 사용합니다.

또한 확장 프로그램이 데이터를 사용하고 공유하는 방식을 사용자에게 더 명확하게 보여주고 제어할 수 있도록 향후 버전에서는 사용자가 설치 시 민감한 권한을 보류할 수 있는 새로운 설치 흐름을 채택할 예정입니다.

자세한 내용과 현재 확장 프로그램을 Manifest V3로 이전하는 방법은 developer.chrome.com을 참고하세요.

CSS `aspect-ratio` 속성

일반적으로 이미지와 같이 일부 요소에만 가로세로 비율이 있습니다. 이러한 요소의 경우 너비 또는 높이만 지정된 경우 다른 하나는 내부 가로세로 비율을 사용하여 자동으로 계산됩니다.

<!-- Height is auto-computed from width & aspect ratio -->
<img src="..." style="width: 800px;">

Chrome 88에서는 aspect-ratio 속성을 사용하여 가로세로 비율을 명시적으로 지정하여 유사한 동작을 사용할 수 있습니다.

.square {
  aspect-ratio: 1 / 1;
}

점진적 개선을 사용하여 브라우저에서 지원되는지 확인하고 필요한 경우 대체를 적용할 수도 있습니다. 그런 다음 새 CSS 4 not 선택기를 사용하여 코드를 좀 더 깔끔하게 만들 수 있습니다.

.square {
  aspect-ratio: 1 / 1;
}

@supports not (aspect-ratio: 1 / 1) {
  .square {
    height: 4rem;
    width: 4rem;
  }
}

젠 시몬스님이 최신 Safari 기술 미리보기에서 지원된다고 알려주셔서 감사합니다. 곧 Safari에서 확인할 수 있을 것입니다. Una의 데모를 확인하여 작동 방식을 알아보세요.

체이닝된 JS 타이머의 심한 제한

Chrome 88에서는 특정 조건에서 숨겨진 페이지의 체이닝된 JavaScript 타이머를 크게 제한합니다. 이렇게 하면 CPU 사용량이 줄어 배터리 사용량도 줄어듭니다. 이렇게 하면 동작이 변경되는 일부 특수한 경우가 있지만 타이머는 다른 API가 더 효율적이고 안정적인 경우에 자주 사용됩니다.

전문 용어가 많고 약간 모호하므로 자세한 내용은 제이크의 도움말인 Chrome 88부터 체이닝된 JS 타이머의 심각한 제한을 참고하세요.

신뢰할 수 있는 웹 활동에서 Play 결제

이제 신뢰할 수 있는 웹 활동에서 Play 결제를 사용하여 새로운 디지털 상품 API를 통해 디지털 상품과 정기 결제를 판매할 수 있습니다. 이 기능은 Android의 Chrome 88에서 오리진 체험판으로 제공되며, 다음 출시에서는 ChromeOS로 오리진 체험판을 확장할 예정입니다.

계정이 설정되면 신뢰할 수 있는 웹 활동을 업데이트하여 Play 결제를 사용 설정하고 Play Console에서 디지털 상품을 만듭니다. 그런 다음 PWA에서 출처 체험판 토큰을 추가합니다. 그러면 기존 구매를 확인하고, 사용 가능한 구매를 쿼리하고, 새 구매를 실행하는 코드를 추가할 수 있습니다.

// Get list of potential digital goods

const itemService =
  await window.getDigitalGoodsService("https://play.google.com/billing");

const details =
  await itemService.getDetails(['ripe_bananas', 'walnuts', 'pecans' ]);

Adriana와 Andre가 Chrome Dev Summit 강연인 Play의 웹 앱 관련 새로운 기능에서 자세히 설명하거나 문서를 확인하세요.

기타

물론 그 외에도 많은 기능이 있습니다.

HTML 표준의 변경사항을 준수하기 위해 이제 target="_blank"가 있는 앵커 태그는 기본적으로 rel="noopener"를 의미합니다. 이렇게 하면 탭 납치 공격을 방지할 수 있습니다.
대부분의 운영체제는 기본적으로 마우스 가속을 사용 설정하지만 일부 게임에서는 문제가 될 수 있습니다. Chrome 88에서는 Pointer Lock API를 사용하여 마우스 가속을 사용 중지할 수 있습니다. 즉, 느리거나 빠르거나 동일한 물리적 움직임이 동일한 회전을 일으켜 더 나은 게임 환경과 더 높은 정확성을 제공합니다.
또한 addEventListener가 이제 Abort Signal을 옵션으로 사용합니다. abort()를 호출하면 해당 이벤트 리스너가 삭제되므로 더 이상 필요하지 않을 때 이벤트 리스너를 쉽게 종료할 수 있습니다.

추가 자료

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

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

저는 Pete LePage입니다. Chrome 89가 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.