Chrome 80의 새로운 기능

Pete LePage

Chrome 80이 출시되었습니다. 개발자를 위한 새로운 기능이 많이 포함되어 있습니다.

다음을 지원합니다.

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

모듈 작업자

이제 JavaScript 모듈의 인체공학적 설계와 성능 이점을 갖춘 웹 작업자의 새로운 모드인 모듈 작업자를 사용할 수 있습니다. Worker 생성자는 스크립트가 로드되고 실행되는 방식을 <script type="module">와 일치하도록 변경하는 새 {type: "module"} 옵션을 허용합니다.

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

JavaScript 모듈로 전환하면 작업자 실행을 차단하지 않고 지연 로드 코드에 동적 가져오기를 사용할 수도 있습니다. 자세한 내용은 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에서는 선택적 체이닝이라는 새로운 JavaScript 기능을 지원합니다. 선택적 체이닝을 사용하면 속성 중 하나가 null 또는 undefined를 반환하는 경우 오류를 발생시키는 대신 전체가 undefined를 반환합니다.

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

자세한 내용은 v8 블로그의 옵셔널 체이닝 블로그 게시물을 확인하세요.

오리진 체험판 종료

Origin 체험판에서 안정화 버전으로 전환된 세 가지 새로운 기능이 있으며, 이를 통해 토큰 없이 모든 사이트에서 사용할 수 있습니다.

주기적 백그라운드 동기화

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

연락처 선택 도구

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

사용자가 원하는 콘텐츠만 원하는 시점에 공유할 수 있으며, 친구 및 가족과 더 쉽게 소통할 수 있습니다.

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

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

새로운 오리진 트라이얼

Content indexing 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 이미지를 favicon으로 사용하는 기능도 지원됩니다.

추가 자료

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

구독

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

저는 펫 르페이지입니다. Chrome 81이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.