Chrome 91의 새로운 기능

Pete LePage

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

저는 피트 르페이지입니다. 집에서 일하며 촬영을 하고 있습니다. 그럼 Chrome 91의 개발자를 위한 새로운 기능을 자세히 살펴보겠습니다

File System Access API의 추천 이름

올해 Fugu 프로젝트에서 나온 것은 제가 가장 좋아하는 API 중 하나는 File System Access API입니다. 사용자가 권한을 부여하면 앱은 설치된 다른 앱과 동일한 방식으로 사용자 로컬 기기의 파일과 상호작용할 수 있으므로 더 자연스러운 사용자 환경을 만들 수 있습니다.

이제 Chrome 91부터 상호작용할 파일 또는 디렉터리의 이름과 위치를 제안할 수 있습니다. 이렇게 하려면 showSaveFilePicker 옵션의 일부로 suggestedName 속성을 전달합니다.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

기본 시작 디렉터리도 마찬가지입니다. 예를 들어 텍스트 편집기는 documents 폴더에서 파일 저장 또는 파일 열기 대화상자를 시작하려고 할 수 있습니다. 반면 이미지 편집기는 pictures 폴더에서 시작하려고 할 수 있습니다. startIn 속성을 전달하여 기본 시작 디렉터리를 제안할 수 있습니다.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

자세한 내용은 톰의 파일 시스템 액세스 게시물을 확인하세요.

클립보드에서 파일 읽기

Chrome 91에는 파일과 상호작용하기 위한 또 다른 멋진 새 API가 있습니다. 이제 데스크톱에서 웹 앱이 클립보드에 있는 파일을 읽을 수 있습니다. (클립보드의 파일 읽기는 2018년부터 Safari에서 지원되었습니다.)

물론 클립보드에 무제한으로 액세스할 수 없으므로 paste 이벤트 리스너를 설정해야 합니다. 그런 다음 이벤트 핸들러에서 클립보드에 있는 각 파일의 콘텐츠에 액세스할 수 있습니다.

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

제휴 사이트에서 사용자 인증 정보 공유

사이트에 여러 도메인이 있고 도메인이 동일한 계정 관리 백엔드를 공유하는 경우 이제 사이트를 서로 연결할 수 있으므로 사용자가 사용자 인증 정보를 한 번 저장하면 Chrome 비밀번호 관리자가 관련 사이트에 이를 추천하도록 할 수 있습니다.

이는 사이트가 google.com, google.ca와 같은 여러 최상위 도메인에서 제공되는 경우에 이상적입니다. 또는 여러 도메인 이름을 가지고 있을 수도 있습니다

웹사이트를 연결하려면 도메인 간의 관계를 정의하는 assetlinks.json 파일을 만들어야 합니다. 아래 예에서는 브라우저에 .com 도메인과 .co.uk 도메인이 모두 관련되어 있으며 사용자 인증 정보를 공유할 수 있음을 알립니다.

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

그런 다음 각 도메인의 .well-known 폴더에서 assetlinks.json 파일을 호스팅합니다.

이 기능은 Chrome 91에서 점진적으로 배포되기 시작하며 1일 차에는 제공되지 않을 수도 있으므로 Chrome에서 제휴 사이트 간에 로그인 사용자 인증 정보를 공유하도록 사용 설정에서 최신 세부정보를 확인하세요.

그 외에도 다양한 기능 제공

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

I/O 2021의 모든 동영상이 현재 온라인에서 공개되어 있습니다. 훌륭한 콘텐츠가 있으니 확인해 보세요.

Web Transport(이전의 Quic Transport)에 여러 변경사항이 적용되었으며 새로운 오리진 트라이얼이 시작되었습니다.

웹 어셈블리 SIMD가 오리진 트라이얼이 종료되었으며 모든 사용자가 사용할 수 있습니다.

마침내 업데이트된 양식 요소가 Android에 출시되어 사용자 환경이 개선되었습니다.

또한 <link> 요소의 media 속성은 link rel="icon"에 적용됩니다. 즉, 미디어 쿼리에 따라 다양한 아이콘을 정의할 수 있습니다. 어두운 모드와 밝은 모드를 위한 다른 아이콘을 예로 들 수 있습니다.

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

추가 자료

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

구독

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

저는 Pete LePage입니다. Chrome 92가 출시되면 곧 Chrome의 새로운 기능을 소개해 드리겠습니다.