Chrome 76의 새로운 기능

피트 레페이지

Chrome 76에서는 다음 지원이 추가되었습니다.

제 이름은 Pete LePage입니다. 지금부터 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);
});

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

WebAPK 업데이트 속도 향상

Android에 프로그레시브 웹 앱이 설치되어 있으면 Chrome에서 자동으로 웹 APK를 요청하고 설치합니다. 설치된 후 Chrome은 웹 앱 매니페스트가 변경되었는지 정기적으로 확인합니다. 개발자가 아이콘, 색상을 업데이트하거나 앱 이름을 변경했는지 확인하여 새로운 WebAPK가 필요한지 확인합니다.

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

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

어두운 모드

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

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

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

톰이 알아야 할 모든 내용과 밝은 모드와 어두운 모드를 모두 지원하는 스타일시트를 설계하는 팁이 포함된 web.dev의 유용한 문서인 Hellodarkness, my 오래된 친구를 확인하세요.

그 외에도 다양한 기능 제공

개발자를 위한 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()라는 세 가지 새로운 메서드로 Blob를 더 쉽게 읽을 수 있습니다. 즉, 더 이상 파일 리더 주위에 래퍼를 만들 필요가 없습니다.

// 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의 이미지 지원

또한 AAsync Clipboard API에 이미지 지원을 추가하여 프로그래매틱 방식으로 쉽게 이미지를 복사하여 붙여넣을 수 있습니다.

추가 자료

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

구독

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

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