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의 Web Animations 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

베티 크로커 웹사이트의 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();

물론 그 밖에도 몇 가지가 더 있으니 Screen 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에 대해 자세히 알아보고 지금 바로 실험을 시작하는 방법은 Idle Detection API로 비활성 사용자 감지를 참고하세요.

웹 어셈블리 SIMD

Web Assembly SIMD는 출처 체험판을 시작합니다. 하드웨어에서 일반적으로 사용 가능한 SIMD 명령어에 매핑되는 작업을 도입합니다. SIMD 연산은 특히 멀티미디어 애플리케이션에서 성능을 개선하는 데 사용됩니다.

WebAssembly SIMD에 대해 자세히 알아보려면 WebAssembly SIMD를 사용한 빠른 병렬 애플리케이션을 참고하세요.

기타

Chrome 84는 큰 규모이지만 짚고 넘어갈 몇 가지 중요한 업데이트가 있습니다.

추가 자료

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

구독

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

제 이름은 피트 르페이지이고 여전히 헤어컷이 필요합니다. Chrome 85가 출시되는 대로 Chrome의 새로운 기능을 소개해 드리겠습니다.