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부터 점진적으로 출시되며 출시 첫날에는 사용하지 못할 수도 있습니다. 최신 세부정보는 Chrome에서 제휴 사이트 간에 로그인 사용자 인증 정보를 공유하도록 사용 설정하기를 참고하세요.

그 외에도 다양한 기능 제공

물론 그 외에도 많은 기능이 있습니다.

I/O 2021의 모든 동영상이 이제 온라인에 게시되었습니다. 멋진 콘텐츠가 있으니 확인해 보세요.

웹 전송: 이전에 Quic 전송이라고 했던 이 전송은 여러 변경사항을 거쳤으며 새로운 출처 체험판을 시작합니다.

Web Assembly 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의 새로운 기능을 바로 알려드리겠습니다.