이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 102의 새로운 기능

Pete LePage

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

설치된 PWA는 파일 핸들러로 등록할 수 있으므로 사용자가 디스크에서 직접 파일을 쉽게 열 수 있습니다.
inert 속성을 사용하면 DOM의 일부를 비활성으로 표시할 수 있습니다.
Navigation API를 사용하면 단일 페이지 앱에서 URL 탐색 및 업데이트를 더 쉽게 처리할 수 있습니다.
그 밖에도 다양한 기능이 있습니다.

저는 피트 르페이지입니다. Chrome 102의 개발자용 새로운 기능을 자세히 살펴보겠습니다.

File Handling API

File Handling API를 사용하면 설치된 PWA가 OS에 파일 핸들러로 등록할 수 있습니다. 등록되면 사용자는 파일을 클릭하여 설치된 PWA로 파일을 열 수 있습니다. 이는 이미지 편집기, IDE, 텍스트 편집기 등 파일과 상호작용하는 PWA에 적합합니다.

PWA에 파일 처리 기능을 추가하려면 웹 앱 매니페스트를 업데이트하여 PWA에서 처리할 수 있는 파일 유형에 관한 세부정보가 포함된 file_handlers 배열을 추가해야 합니다. 열려는 URL, mime 유형, 파일 형식의 아이콘, 실행 유형을 지정해야 합니다. 실행 유형은 단일 클라이언트에서 여러 파일을 열어야 하는지 또는 여러 클라이언트에서 열어야 하는지를 정의합니다.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

그런 다음 PWA가 실행될 때 이러한 파일에 액세스하려면 launchQueue 객체의 소비자를 지정해야 합니다. 실행은 소비자가 처리할 때까지 대기열에 추가됩니다.

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

자세한 내용은 설치된 웹 애플리케이션을 파일 핸들러로 사용을 참고하세요.

`inert` 속성

inert 속성은 포커스 이벤트 및 보조 기술의 이벤트를 비롯한 요소의 사용자 입력 이벤트를 무시하도록 브라우저에 지시하는 전역 HTML 속성입니다.

이는 UI를 빌드할 때 유용할 수 있습니다. 예를 들어 모달 대화상자의 경우 포커스가 표시되면 모달 내부에 포커스를 '트랩'하려고 합니다. 또는 사용자에게 항상 표시되지 않는 창의 경우 inert를 추가하면 창이 화면 밖에 있는 동안 키보드 사용자가 실수로 창과 상호작용할 수 없습니다.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

여기서 inert는 두 번째 <div> 요소에 선언되었으므로 <button> 및 <label>를 비롯하여 내에 포함된 모든 콘텐츠가 포커스를 받거나 클릭될 수 없습니다.

inert는 Chrome 102에서 지원되며 Firefox와 Safari에도 제공될 예정입니다.

자세한 내용은 inert 소개를 참고하세요.

많은 웹 앱은 페이지 탐색 없이 URL을 업데이트하는 기능을 사용합니다. 현재는 History API를 사용하지만 이 API가 투박하고 항상 예상대로 작동하지는 않습니다. Navigation API는 History API의 미흡한 부분을 패치하려고 하지 않고 이 영역을 완전히 개편합니다.

Navigation API를 사용하려면 전역 navigation 객체에 navigate 리스너를 추가합니다.

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

이 이벤트는 기본적으로 중앙 집중화되어 있으며 사용자가 링크 클릭, 양식 제출, 앞뒤로 이동과 같은 작업을 실행했는지 여부와 관계없이 모든 유형의 탐색에 대해 실행됩니다. 탐색이 프로그래매틱 방식으로 트리거되는 경우에도 마찬가지입니다. 대부분의 경우 코드가 해당 작업에 대한 브라우저의 기본 동작을 재정의할 수 있습니다.

자세한 내용과 데모를 확인하려면 최신 클라이언트 측 라우팅: Navigation API를 참고하세요.

그 외에도 다양한 기능 제공

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

새 Sanitizer API는 임의의 문자열을 페이지에 안전하게 삽입할 수 있는 강력한 프로세서를 빌드하는 것을 목표로 합니다.
hidden=until-found 속성을 사용하면 브라우저가 숨겨진 영역에서 텍스트를 검색하고 일치하는 항목이 있는 경우 해당 섹션을 표시할 수 있습니다.

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. Chrome 102의 추가 변경사항은 아래 링크를 확인하세요.

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

저는 Pete LePage입니다. Chrome 103이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.

Chrome 102의 새로운 기능

File Handling API

inert 속성

Navigation API

그 외에도 다양한 기능 제공

추가 자료

구독

`inert` 속성