Chrome 84의 새로운 기능

Pete LePage

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

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

저는 피트 레페이지입니다. 집에서 일하며 촬영을 하고 있습니다. 개발자를 위한 Chrome 84의 새로운 기능을 알아보겠습니다.

앱 아이콘 바로가기

트위터 PWA의 앱 아이콘 바로가기

앱 아이콘 바로가기를 사용하면 사용자가 앱 내에서 일반적인 작업을 빠르게 시작할 수 있습니다. 예를 들어 새 트윗을 작성하거나, 메시지를 보내거나, 알림을 보는 등의 작업이 가능합니다. Android용 Chrome에서 지원됩니다.

이러한 바로가기는 Android에서 앱 아이콘을 길게 누르면 실행됩니다. PWA에 바로가기를 추가하는 방법은 간단합니다. 웹 앱 매니페스트에서 새로운 shortcuts 속성을 만들고 바로가기를 설명하고 아이콘을 추가하면 됩니다.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

자세한 내용은 앱 바로가기로 빠르게 작업하기를 참고하세요.

웹 애니메이션 API

Chrome 84에서는 이전에 지원되지 않았던 여러 기능이 Web Animations API에 추가됩니다.

  • animation.ready 및 animation.finished이(가) 약정되었습니다.
  • 이제 브라우저에서 오래된 애니메이션을 정리 및 삭제하여 메모리를 절약하고 성능을 개선할 수 있습니다.
  • 이제 합성 모드를 사용하여 애니메이션을 결합할 수 있습니다(add 및 accumulate 옵션 사용).

모든 개선사항을 제대로 반영하거나 여기서 좋은 예를 제공할 수 없기 때문에 자세한 내용은 Chromium 84의 웹 애니메이션 API 개선사항을 참고하세요.

콘텐츠 색인 생성 API

네트워크 연결 없이 콘텐츠를 사용할 수 있는지 여부 하지만 사용자는 그것에 대해 모릅니다. 정말로 사용할 수 있는가? 탐색 문제가 발생했습니다.

기존 무료 체험판이 종료된 Content Indexing API를 사용하면 오프라인에서 사용할 수 있는 콘텐츠의 URL 및 메타데이터를 추가할 수 있습니다. 이 메타데이터를 사용하면 콘텐츠가 사용자에게 표시되어 검색 가능성이 향상됩니다.

색인에 콘텐츠를 추가하려면 서비스 워커 등록에서 index.add()를 호출하고 콘텐츠에 대한 필수 메타데이터를 제공합니다.


const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  url: '/articles/123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

색인에 이미 있는 항목을 보고 싶으신가요? 서비스 워커 등록 시 index.getAll()를 호출합니다.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

자세한 내용은 Content Indexing API를 사용하여 오프라인 지원 페이지 색인 생성을 참조하세요.

Wake lock API

Betty Crocker 웹사이트의 wake lock 구현

저도 요리를 좋아하지만 레시피를 따라 할 때 정말 짜증이 날 때가 많아서 화면 보호기가 작동하죠. 또한 Chrome 84의 오리진 트라이얼에서 종료되는 wake lock API를 사용하면 사이트에서 화면이 어두워지거나 잠기는 것을 방지하기 위해 wake lock을 요청할 수 있습니다.

실제로 현재 Betty Crocker 웹사이트에서는 이를 사용하고 있으며 web.dev에 구매 의도 지표가 300% 증가한 우수사례를 발표했습니다.

wake lock을 가져오려면 navigator.wakeLock.request()를 호출하고 wake lock을 '해제'하는 데 사용되는 WakeLockSentinel 객체를 반환합니다.


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

물론 그보다 훨씬 더 많은 부분이 있으므로 화면 Wake Lock API로 절전 모드 해제를 확인하세요. 하지만 적어도 화면이 더 이상 밀가루로 덮이지 않을 것입니다.

오리진 트라이얼

강조하고 싶은 새로운 오리진 트라이얼이 두 가지 있습니다. 오리진 트라이얼을 처음 사용하는 경우 Chrome 오리진 트라이얼 시작하기를 확인하세요.

유휴 상태 감지

Idle Detection API는 사용자가 컴퓨터를 사용하지 않을 가능성이 있어 유휴 상태일 때 사용자에게 알림을 보냅니다. 채팅 애플리케이션이나 소셜 네트워킹 사이트와 같은 서비스에서 사용자에게 연락처의 사용 가능 여부를 알리는 데 유용합니다.

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

API에 대한 자세한 내용과 지금 바로 실험을 시작하는 방법은 유휴 감지 API로 비활성 사용자 감지를 참조하세요.

웹 어셈블리 SIMD

그리고 웹 어셈블리 SIMD가 오리진 트라이얼을 시작합니다. 하드웨어에서 일반적으로 사용 가능한 SIMD 명령에 매핑하는 작업을 소개합니다. SIMD 연산은 특히 멀티미디어 애플리케이션에서 성능을 개선하는 데 사용됩니다.

WebAssembly SIMD에 관한 자세한 내용은 WebAssembly SIMD를 사용한 빠른 병렬 애플리케이션을 참고하세요.

기타

Chrome 84는 큰 버전이지만 다른 중요한 업데이트도 몇 가지 있습니다.

추가 자료

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

구독

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

제 이름은 Pete LePage이고 제모를 해야 하지만 Chrome 85가 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.