Chrome 76의 새로운 기능

Pete LePage

Chrome 76에서는 다음을 지원합니다.

저는 피트 르페이지입니다. Chrome 76에서 개발자를 위해 새롭게 제공되는 기능을 살펴보겠습니다.

PWA 검색주소창 설치 버튼

Chrome 76에서는 검색주소창이라고도 하는 설치 버튼을 주소 표시줄에 추가하여 사용자가 데스크톱에 프로그레시브 웹 앱을 더 쉽게 설치할 수 있도록 합니다.

사이트가 프로그레시브 웹 앱 설치 가능성 기준을 충족하는 경우 Chrome의 주소 표시줄에 설치 버튼이 표시되어 사용자에게 PWA를 설치할 수 있음을 알립니다. 사용자가 설치 버튼을 클릭하면 beforeinstallprompt 이벤트에서 prompt()를 호출하는 것과 기본적으로 동일합니다. 설치 대화상자가 표시되어 사용자가 쉽게 PWA를 설치할 수 있습니다.

자세한 내용은 데스크톱 프로그레시브 웹 앱의 주소 표시줄 설치를 참고하세요.


PWA 미니 정보 표시줄을 더 세부적으로 제어

AirHorner의 '홈 화면에 추가' 미니 정보 표시줄의 예

모바일에서 Chrome은 프로그레시브 웹 앱 설치 가능 여부를 충족하는 경우 사용자가 사이트를 처음 방문할 때 미니 정보 표시줄을 표시합니다. 미니 정보 표시줄이 표시되지 않도록 하고 대신 자체 설치 프로모션을 제공하고 싶다는 의견이 접수되었습니다.

Chrome 76부터 beforeinstallprompt 이벤트에서 preventDefault()를 호출하면 미니 정보 표시줄이 더 이상 표시되지 않습니다.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

사용자에게 PWA를 설치할 수 있다는 사실을 알리기 위해 UI를 업데이트해야 합니다. 프로그레시브 웹 앱 설치를 홍보하기 위한 권장사항은 PWA 설치를 홍보하기 위한 패턴을 참고하세요.

WebAPK의 더 빠른 업데이트

프로그레시브 웹 앱이 Android에 설치되면 Chrome에서 자동으로 웹 APK를 요청하고 설치합니다. 설치 후 Chrome은 주기적으로 웹 앱 매니페스트가 변경되었는지(예: 아이콘, 색상 업데이트 또는 앱 이름 변경) 확인하여 새 WebAPK가 필요한지 확인합니다.

Chrome 76부터 Chrome에서 매니페스트를 더 자주 확인합니다. 3일이 아닌 매일 확인합니다. 주요 속성이 변경되면 Chrome에서 새 WebAPK를 요청하고 설치하여 제목, 아이콘, 기타 속성을 최신 상태로 유지합니다.

자세한 내용은 WebAPK 더 자주 업데이트를 참고하세요.

어두운 모드

현재 많은 운영체제에서 어두운 모드 또는 어두운 테마를 지원합니다.

prefers-color-scheme 미디어 쿼리를 사용하면 사용자의 선호 모드에 맞게 사이트의 디자인을 조정할 수 있습니다.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom은 web.dev의 Hello 어두운ness, 나의 오래된 친구 도움말에서 개발자가 알아야 할 모든 내용과 밝은 모드와 어두운 모드를 모두 지원하도록 스타일 시트를 설계하는 팁을 제공합니다.

그 외에도 다양한 기능 제공

이는 개발자를 위한 Chrome 76의 변경사항 중 일부에 불과하며, 물론 그 외에도 많은 변경사항이 있습니다.

Promise.allSettled()

저는 개인적으로 Promise.allSettled()에 대해 기대가 큽니다. Promise.all()와 유사하지만 모든 약속이 처리될 때까지 기다린 후 반환됩니다.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

블롭 읽기가 더 쉬워집니다.

Blob는 text(), arrayBuffer(), stream()라는 세 가지 새로운 메서드를 사용하여 더 쉽게 읽을 수 있습니다. 즉, 더 이상 파일 리더를 둘러싸는 래퍼를 만들 필요가 없습니다.

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

비동기 클립보드 API의 이미지 지원

또한 비동기 클립보드 API에 이미지 지원이 추가되어 이미지를 프로그래매틱 방식으로 쉽게 복사하여 붙여넣을 수 있습니다.

추가 자료

여기에는 일부 주요 내용만 포함되어 있습니다. Chrome 76의 추가 변경사항은 아래 링크를 참고하세요.

구독

관련 동영상을 놓치지 않고 확인하고 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.

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