Chrome 80의 새로운 기능

Pete LePage

이제 Chrome 80이 출시되며 개발자를 위한 새로운 기능이 많이 제공됩니다.

다음과 같은 지원이 제공됩니다.

저는 피트 레페이지입니다. Chrome 80의 개발자를 위한 새로운 기능을 알아보겠습니다.

모듈 작업자

인체공학과 자바스크립트 모듈의 성능 이점을 갖춘 새로운 웹 작업자용 모드인 모듈 워커를 사용할 수 있습니다. 작업자 생성자는 새로운 {type: "module"} 옵션을 허용하여 <script type="module">에 맞게 스크립트가 로드 및 실행되는 방식을 변경합니다.

const worker = new Worker('worker.js', {
  type: 'module'
});

자바스크립트 모듈로 이동하면 작업자 실행을 차단하지 않고도 지연 로드 코드에 동적 가져오기를 사용할 수 있습니다. 자세한 내용은 web.dev에서 제이슨의 모듈 작업자로 웹 스레딩 게시물을 참고하세요.

선택적 체이닝

특히 객체에서 복잡하게 중첩된 속성을 읽으려고 하면 오류가 발생하기 쉽습니다. 특히 평가되지 않는 항목이 있을 가능성이 있는 경우 더욱 그렇습니다.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

계속하기 전에 각 값을 확인하면 복잡하게 중첩된 if 문으로 쉽게 전환되거나 try / catch 블록이 필요합니다.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80에서는 선택적 체이닝이라는 새로운 자바스크립트 기능 지원이 추가되었습니다. 선택적 체이닝을 사용하면 속성 중 하나가 null 또는 정의되지 않은 값을 반환하면 오류가 발생하는 대신 전체가 정의되지 않음을 반환합니다.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

자세한 내용은 v8 블로그의 Optional Chaining 블로그 게시물을 참고하세요.

오리진 트라이얼 종료

오리진 트라이얼에서 안정화 버전으로 전환된 세 가지 새로운 기능이 있으므로 토큰 없이도 모든 사이트에서 사용할 수 있습니다.

주기적인 백그라운드 동기화

첫 번째는 주기적 백그라운드 동기화입니다. 백그라운드에서 데이터를 주기적으로 동기화하므로 사용자가 설치된 PWA를 열 때 항상 최신 데이터가 제공됩니다.

연락처 선택도구

다음은 Contact Picker API입니다. 사용자는 연락처 목록에서 항목을 선택하고 선택된 항목의 제한된 세부정보를 웹사이트와 공유할 수 있는 주문형 API입니다.

이를 통해 사용자는 원할 때 원하는 것만 공유할 수 있고 친구 및 가족과 더 쉽게 연락하고 소통할 수 있습니다.

마지막으로 Get Installed Related Apps 메서드를 사용하면 웹 앱에서 네이티브 앱이 사용자 기기에 설치되어 있는지 확인할 수 있습니다.

가장 일반적인 사용 사례 중 하나는 네이티브 앱이 설치되지 않은 경우 PWA 설치를 승격할지 결정하는 것입니다. 또는 다른 앱에서 제공하는 경우 한 앱의 일부 기능을 사용 중지하는 것이 좋습니다.

새로운 오리진 트라이얼

콘텐츠 색인 생성 API

PWA에 캐시한 콘텐츠에 관해 사용자에게 어떻게 알리나요? 여기 탐색 문제가 있습니다. 사용자가 앱을 열 수 있다는 사실을 알 수 있나요? 또는 어떤 콘텐츠를 사용할 수 있나요?

Content Indexing API는 오프라인 지원 콘텐츠의 URL 및 메타데이터를 브라우저에서 유지관리하고 사용자에게 쉽게 표시할 수 있는 로컬 색인에 추가할 수 있는 새로운 오리진 트라이얼입니다.

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

색인에 항목을 추가하려면 서비스 워커 등록을 가져온 다음 index.add를 호출하고 콘텐츠에 대한 메타데이터를 제공해야 합니다.

색인이 채워지면 Android용 Chrome 다운로드 페이지의 전용 영역에 표시됩니다. 자세한 내용은 web.dev에서 제프의 Content Indexing API로 오프라인 지원 페이지 색인 생성 게시물을 참고하세요.

알림 트리거

알림은 많은 앱에서 중요한 부분입니다. 그러나 푸시 알림은 연결된 네트워크에 따라 안정적입니다. 대부분의 경우 잘 작동하지만 경우에 따라 오류가 발생합니다. 예를 들어 비행기 모드이므로 중요한 일정을 알리는 캘린더 알림이 전송되지 않으면 일정을 놓칠 수 있습니다.

알림 트리거를 사용하면 미리 알림을 예약할 수 있으므로 운영체제가 적시에 알림을 전송할 수 있습니다. 이는 네트워크에 연결되어 있지 않거나 기기가 절전 모드인 경우에도 마찬가지입니다.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

알림을 예약하려면 서비스 워커 등록에서 showNotification를 호출합니다. 알림 옵션에서 TimestampTrigger를 사용하여 showTrigger 속성을 추가합니다. 그런 다음 시간이 되면 브라우저에 알림이 표시됩니다.

오리진 트라이얼은 Chrome 83까지 실행할 예정이므로 web.dev에서 톰의 알림 트리거 게시물에서 자세한 내용을 확인하세요.

기타 오리진 트라이얼

Chrome 80부터 몇 가지 다른 오리진 트라이얼이 출시됩니다.

  • 웹 시리즈
  • PWA가 파일 핸들러로 등록되는 기능
  • 연락처 선택 도구의 새로운 속성

오리진 트라이얼의 전체 기능 목록을 확인하세요.

기타

물론 더 많은 기능이 있습니다.

  • 이제 #:~:text=something를 사용하여 페이지의 텍스트 프래그먼트에 직접 연결할 수 있습니다. Chrome은 해당 텍스트 프래그먼트의 첫 번째 인스턴스로 스크롤하여 강조표시합니다. 예: https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • 데스크톱 PWA에서 display: minimal-ui를 설정하면 설치된 PWA의 제목 표시줄에 뒤로 및 새로고침 버튼이 추가됩니다.
  • 이제 Chrome에서 SVG 이미지를 파비콘으로 사용할 수 있습니다.

추가 자료

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

구독

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

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