(번역)Chrome 80 업데이트

이 글은 원문에서 참고했고 약간의 내 생각을 의역으로 덧붙인 글입니다.
This artice is come from this Site

Modules in worker
Optional chaining in JavaScript
새로운 시험 기능
시험 버전을 마친 기능
기타 등등

Moudles in workers

Mudule Worker는 Web worker를 위한 새로운 mode입니다. 인체공학적 기능 및 JS 모듈의 성능 이점을 이용할 수 있습니다. 아래와 같이 Worker constructor를 이용해서 {type: "module"}을 추가할 수 있습니다. 이는 스크립트를 가져올 때 <script type="module">을 추가한 것과 같은 기능입니다. Javascript 모듈 기능을 사용하면 Worker의 실행을 막지 않고 lazy-loading import 기능을 사용할 수 있습니다.

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

자세한 것은 Jason의 포스트 Threading the web with module workers를 참고해주세요.

Optional chaining in JavaScript

Object에서 깊숙이 내재된 속성을 읽으려고 한다면, 오류를 뱉어내기 십상이다.

// 오류를 뱉어내기 쉬운 아래와 같은 코드
const nameLength = db.user.name.length;

Error를 피하려면 if문을 여러개 사용해서 중첩되게 되거나 try/catch 블록을 사용해서 오류를 피하는 방법이 있을 것이다.

// 실수를 피하긴 쉽지만 읽기는 어려워짐
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome은 80버전부터 Optional Chaining 기능을 추가했다! Optional Chaining 기능에서는 만약 속성 하나가 null값이나, undefined를 가지고 있다면 오류를 던지는 대신 전체를 undefined해서 return 해준다.

// Error도 체크해주고 읽기도 쉽다.
const nameLength = db?.user?.name?.length;

Optional Chainging 문서에서 좀 더 자세히 확인할 수 있다.

이 기능을 현재 사용하려면 Typescript에서 사용할 수 있는 것으로 알고 있다. C#과 Swift에서도 역시 동일한 이름으로 존재한다.
참 편한 기능인데 크롬은 이제 사용할 수 있고 Safari는 아직 지원하지 않는다.

시험버전을 마친 기능

Origin 시험버전에서 안정적인 결과를 얻어 다음 세 가지를 이제 어떤 사이트에서든 Token 없이 사용할 수 있다.

Periodic background sync(백그라운드 동기화)

PWA를 위해 사용하는 기능이다. 만약 대역폭이 작거나 혹은 너무 많이 데이터를 써서 통신사에서 데이터 사용을 제한하는 경우 등.. 데이터를 어찌됬든 간에 가지고 오지 못하는 경우가 종종 발생한다.

네트워크에 연결되어 있을때 주기적으로 데이터를 싱크해서 유저가 원하는 데이터를 접하게 만드는 기능이다.

더 알고 싶다면 periodic background sync를 참고

Contact Picker

백문이 불여일견 아래와 같은 기능이다.

사용자 연락처에 접근 하는 기능은 네이티브 앱에서는 뭐 말할 것도 없이 기본적인 기능이다.
Chrome PWA에서도 이제 사용자가 연락처 목록에서 항목을 선택하고 웹 사이트와 공유할 수 있는 On-demand API인 Contact Picker를 제공한다.

자세한 내용: Contact Picker

마지막으로, Get Installed Related Apps method는 PWA가 사용자의 기기에 설치되어 있는지 확인할 수 있게 해준다.
이제는 네이티브와 웹앱을 동시에 가지고 있는 회사들이 종종 있다.
이 method는 기본앱이 설치되지 않은 경우 PWA 설치를 하라고 말할지 말지 결정할 수 있다. 또한 한 앱이 다른 앱에서 제공하는 기능 중 일부를 사용하지 않도록 설정할 수도 있다.

자세한 내용: Get Installed Related Apps

새로운 시험 기능

Content indexing API

User들이 캐싱해둔 콘텐츠를 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에 무언가를 추가하려면 Service 워커를 등록한 다음, index.add를 호출한다. 그리고 나서 콘텐츠에 대한 메타데이터를 제공해야 한다.
인덱스가 채워지면, 안드로이드 다운로드 페이지용 크롬 전용 영역에 표시된다. Jeff의 사이트를 참고

Notification triggers

알림은 많은 앱에서 중요한 부분이다. 그러나 푸시 알림은 연결된 네트워크만큼만 신뢰할 수 있다. 보통은 물론 대부분의 경우에는 효과가 있지만 사용 못할 수도 있다. 예를 들어, 만약 달력을 사용할 때 비행기 모드에 있다면 놓칠 수도 있다는 것이다.

이 일림 트리거를 사용하면 네트워크가 없거나 배터리 관리 모드에 있더라도 OS가 원하는 시간에 알림을 알릴 수 있도록 설정할 수 있다.

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을 호출하면 된다. 알림 옵션에서 시간 스탬프를 사용하여 showTrigger 속성을 추가하게 되면 원하는 시간에 브라우저에 통지가 표시된다.

음 괜찮은데?

크롬 83에 업데이트 하는 것을 목표로 하고 있다고 한다.

기타는 이 사이트를 참고

Published 9 Feb 2020

Web Developer 웹개발자 김요한입니다.Yohan Kim