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

Chrome 88의 새로운 기능

Pete LePage

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

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

이제 manifest V3를 사용하여 Chrome 웹 스토어에 확장 프로그램을 업로드할 수 있습니다.
aspect-ratio CSS 속성을 사용하면 모든 요소의 가로세로 비율을 쉽게 설정할 수 있습니다.
Chrome 88은 특정 조건에서 숨겨진 페이지의 연쇄 자바스크립트 타이머를 강적으로 제한합니다.
이제 신뢰할 수 있는 웹 활동에서 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;
  }
}

Jen Simmons님께 감사드립니다. 이 기능은 최신 Safari Technical Preview에서 지원되므로 곧 Safari에서 사용할 수 있을 것입니다. Una의 데모에서 실제 과정을 확인해 보세요.

연결된 JS 타이머의 과도한 제한

Chrome 88은 특정 조건에서 숨겨진 페이지의 연쇄 자바스크립트 타이머를 크게 제한합니다. 이렇게 하면 CPU 사용량이 줄어 배터리 사용량도 줄어듭니다. 이로 인해 동작이 변경되는 극단적인 사례가 있지만 타이머는 다른 API가 더 효율적이고 신뢰할 수 있는 경우에 사용되는 경우가 많습니다.

이는 꽤 전문 용어로 많고 약간 모호했습니다. 자세한 내용은 제이크의 Chrome 88부터 연결된 JS 타이머의 과도한 제한 문서를 참고하세요.

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

이제 신뢰할 수 있는 웹 활동에서 Play 결제를 사용하여 새 Digital Goods 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' ]);

아드리아나와 안드레가 Chrome Dev Summit 대담(Play 웹 앱의 새로운 기능)에서 자세한 내용을 살펴보거나 docs를 확인하세요.

기타

물론 더 많은 기능이 있습니다.

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

추가 자료

여기에서는 주요 특징 중 일부만 다루었습니다. Chrome 88의 추가 변경사항은 아래 링크를 확인하세요.

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

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