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" }
    ]
  },
]

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

Web Animations API

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

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

여기에서 모든 개선사항을 설명하거나 좋은 예시를 제공할 수는 없습니다. 자세한 내용은 Chromium 84의 Web Animations API 개선사항을 참고하세요.

Content indexing 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의 새로운 기능을 바로 알려드리겠습니다.