Chrome 95의 새로운 기능

Pete LePage

다음 사항에 유의하시기 바랍니다.

제 이름은 피트 르페이지입니다. 지금부터 개발자를 위한 Chrome 95의 새로운 기능을 알아보겠습니다.

URLPattern을(를) 통한 라우팅

거의 모든 웹 앱은 코드 실행 여부와 관계없이 어떤 방식으로든 라우팅에 의존합니다. 단일 페이지 앱의 로직 또는 디스크의 파일에 경로를 매핑하는 서버 는 URL이 변경될 때 DOM을 업데이트합니다. URLPattern는 새로운 웹입니다. 플랫폼 API를 제공합니다.

기존 프레임워크를 기반으로 빌드되므로 더 쉽게 수행할 수 있습니다. 일반적인 라우팅 태스크에 대해 알아봅니다. 예를 들어 전체 URL 또는 URL과 매칭 pathname을 설정하여 토큰 및 그룹 일치에 대한 정보를 반환합니다.

Express의 라우팅 구문에 이미 익숙하다면 Ruby on Rail 또는 path-to-regexp의 경우 익숙하게 느껴질 것입니다.

사용하려면 새 URLPattern()를 만들고 원하는 세부정보를 제공하세요. 패턴을 찾습니다. 패턴에는 와일드 카드, 이름이 지정된 토큰 그룹, 정규 표현식 그룹, 그룹 수정자를 지원합니다

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

예를 들어 Google Docs에서 사용될 수 있는 URLPattern를 살펴보겠습니다. 파일의 kind, ID 파일, 파일을 열 mode를 지정합니다. 그런 다음 test() 또는 exec()를 호출하여 패턴을 사용할 수 있습니다.

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern는 Chrome 및 Edge 버전 95 이상에서 기본적으로 사용 설정되어 있습니다. 아직 지원하지 않는 Node와 같은 브라우저나 환경의 경우 urlpattern-polyfill 라이브러리를 사용할 수 있습니다.

Jeff의 자료 URLPattern을 통해 웹 플랫폼으로 라우팅을 제공함을 확인해 보세요. 참조하세요.

Eye Dropper API로 색상 선택

제가 사용해 본 디자인 앱 대부분에는 스포이트 도구가 있어서 무언가가 무엇인지 쉽게 알 수 있습니다. 일부 브라우저에는 스포이트가 있음 기능은 <input type=color>에 내장되어 있기는 하지만 이상적이지는 않습니다.

Microsoft의 몇몇 사람들이 구현한 스포이트 API는 제공할 수 있게 되었습니다. 사용하려면 새 EyeDropper()을(를) 만드세요. 그런 다음 open()를 호출합니다.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

다른 많은 최신 웹 API와 마찬가지로 비동기식으로 작동하므로 기본 스레드를 차단하지 않습니다. 사용자가 원하는 색상을 클릭하면 클릭한 색상으로 해결됩니다.

간단한 데모를 사용해 보고 코드를 참조하세요.

PWA 서밋

이번 달 초에 PWA Summit을 보셨나요?

많은 분들이 PWA에 관해 이야기하고 자신의 경험을 있습니다. 아직 못 보셨다면 동영상이 모두 재생된 것이므로 반드시 확인하시기 바랍니다. PWASummit.org 또는 PWA Summit YouTube 채널.

사용자 에이전트 축소 오리진 트라이얼

사용자 에이전트 축소는 수동적 사용자 에이전트의 정보를 줄여 지문 표면에 문자열을 브라우저의 브랜드 및 중요한 버전, 데스크톱 또는 모바일 구분, 그리고 이것이 실행되는 플랫폼이 무엇인지를 압니다.

Chrome 95부터 새로운 오리진 트라이얼이 이제 축소된 UA 문자열을 수신하도록 선택할 수 있습니다. 이렇게 하면 줄어든 UA가 기본값이 되기 전에 문제를 발견하고 해결할 수 있어야 합니다. 확인할 수 있습니다.

변경사항은 여러 출시에 걸쳐 점진적으로 적용되지만 준비하고 테스트하는 데 필요한 모든 것이 지금 바로 준비되어 있습니다.

모든 세부정보와 일정은 사용자 에이전트 축소 오리진 트라이얼 게시 developer.chrome.com.

그 외에도 다양한 기능 제공

물론 이 외에도 많은 것이 있습니다.

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. 아래 링크에서 Chrome 95의 추가 변경사항입니다.

구독

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

저는 Chrome 96이 출시되자마자 피트 르페이지입니다. Chrome의 새로운 기능을 소개합니다.