이 페이지는 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를 사용하지만 사용하기 까다롭고 예상대로 작동하지 않을 수도 있습니다. 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` 속성