설치된 웹 애플리케이션을 파일 핸들러로 허용

앱을 운영체제의 파일 핸들러로 등록합니다.

Thomas Steiner

이제 웹 앱이 파일을 읽고 쓸 수 있으므로, 다음 논리 논리 개발자가 이러한 웹 앱을 앱이 실행할 수 있는 파일에 대한 파일 핸들러로 선언할 수 있도록 하는 단계입니다. 만들고 처리합니다 File Handling API를 사용하면 이 작업을 바로 할 수 있습니다. 텍스트 등록 후 편집기 앱을 파일 핸들러로 설정하고 설치 후 macOS에서 .txt 파일을 마우스 오른쪽 버튼으로 클릭하고 '정보 보기'를 선택합니다. 그런 다음 이 앱을 사용하여 항상 .txt 파일을 다음과 같이 열도록 OS에 지시합니다. 기본값입니다.

File Handling API 추천 사용 사례

이 API를 사용할 수 있는 사이트의 예는 다음과 같습니다.

• 텍스트 편집기, 스프레드시트 앱, 슬라이드쇼 제작 도구와 같은 오피스 애플리케이션
• 그래픽 편집기 및 그리기 도구
• 비디오 게임 레벨 편집기 도구

File Handling API 사용 방법

점진적 개선

File Handling API 자체는 폴리필할 수 없습니다. 웹에서 파일을 여는 기능 앱을 사용할 수 있게 하려면 다음 두 가지 방법을 사용하세요.

• Web Share Target API를 사용하면 개발자가 앱을 공유 타겟으로 지정할 수 있습니다. 운영체제의 공유 시트에서 파일을 열 수 있습니다.
• File System Access API는 파일 드래그 앤 드롭과 통합할 수 있으므로 개발자가 이미 열려 있는 앱에서 드롭된 파일을 처리할 수 있습니다.

브라우저 지원

특성 감지

File Handling API가 지원되는지 확인하려면 다음을 사용하세요.

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  // The File Handling API is supported.
}

File Handling API의 선언 부분

첫 번째 단계로, 웹 앱은 웹 앱 매니페스트에 선언적으로 설명해야 합니다. 처리할 수 있는 파일의 종류를 결정합니다. File Handling API는 웹 앱 매니페스트를 파일 핸들러 배열을 허용하는 "file_handlers"라는 속성입니다. 파일 핸들러는 다음 속성이 있는 객체:

• 앱 범위 내의 URL을 값으로 가리키는 "action" 속성
• MIME 유형의 객체를 키로, 파일 확장자 목록을 키로 사용하는 "accept" 속성 값으로 사용됩니다.
• ImageResource의 배열이 있는 "icons" 속성 있습니다. 일부 운영 체제는 파일 형식 연결을 통해 단순히 파일 형식이 아닌 관련 애플리케이션 아이콘이 아니라 해당 파일 형식의 사용과 관련된 특수한 아이콘입니다. 애플리케이션입니다.
• 여러 파일을 한 번에 열어야 하는지 여부를 정의하는 "launch_type" 속성 여러 클라이언트에 연결할 수 있습니다 기본값은 "single-client"입니다. 사용자가 여러 파일을 열고 파일 핸들러가 "multiple-clients"로 주석이 추가된 경우 "launch_type"가 되면 앱이 두 번 이상 실행되며 실행할 때마다 앱이 실행될 때마다 LaunchParams.files 배열 (아래 참고) 에는 요소가 하나만 있습니다.

아래 예에서는 웹 앱 매니페스트의 관련 발췌 부분만 보여주므로 더 명확함:

{
  "file_handlers": [
    {
      "action": "/open-csv",
      "accept": {
        "text/csv": [".csv"]
      },
      "icons": [
        {
          "src": "csv-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-svg",
      "accept": {
        "image/svg+xml": ".svg"
      },
      "icons": [
        {
          "src": "svg-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-graf",
      "accept": {
        "application/vnd.grafr.graph": [".grafr", ".graf"],
        "application/vnd.alternative-graph-app.graph": ".graph"
      },
      "icons": [
        {
          "src": "graf-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "multiple-clients"
    }
  ]
}

이는.csv /open-csv, /open-svg의 확장 가능한 벡터 그래픽 (.svg) 파일, 만든 Grafr 파일 형식 /open-graf에서 확장자가 .grafr, .graf 또는 .graph 중 하나인 경우. 처음 두 개의 여러 파일을 처리 중인 경우 여러 클라이언트의 마지막 항목입니다.

File Handling API의 필수 부분

이제 앱이 이론상 어떤 범위 내 URL에서 처리할 수 있는 파일을 선언했으므로 실제로는 수신 파일로 무언가를 명령적으로 수행하는 것입니다. 여기에서 launchQueue를 사용할 수 있습니다. 흥미로울 수 있습니다. 실행된 파일에 액세스하려면 사이트에서 window.launchQueue의 소비자를 지정해야 합니다. 객체를 지정합니다. 출시는 호출된 지정된 소비자가 처리할 때까지 큐에 추가됩니다. 실행할 때마다 한 번씩만 사용하세요 이러한 방식으로 실행 시점과 관계없이 소비자를 지정했습니다.

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  launchQueue.setConsumer((launchParams) => {
    // Nothing to do when the queue is empty.
    if (!launchParams.files.length) {
      return;
    }
    for (const fileHandle of launchParams.files) {
      // Handle the file.
    }
  });
}

DevTools 지원

이 글을 작성하는 시점에서는 DevTools를 지원하지 않지만 기능 요청을 추가되었습니다.

데모

만화 스타일의 그리기 앱인 Excalidraw에 파일 처리 지원을 추가했습니다. 테스트하려면 먼저 Excalidraw를 설치해야 합니다. 그런 다음 이를 사용하여 파일을 만들고 더블클릭하거나 마우스 오른쪽 버튼을 클릭하여 파일을 열고 "엑스칼리드로" 컨텍스트 메뉴에서 소스 코드 모음에서 구현을 확인하세요. 있습니다.

</ph> <ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다.

</ph> <ph type="x-smartling-placeholder">

보안

Chrome팀은 정의된 주요 원칙을 사용하여 File Handling API를 설계 및 구현했습니다. 강력한 웹 플랫폼 기능에 대한 액세스 제어에서 사용자 제어, 투명성, 인체 공학적 측면입니다.

권한, 권한 지속성, 파일 핸들러 업데이트

사용자의 신뢰와 안전을 보장하기 위해 파일, 파일 처리 API가 파일을 열 때 PWA에서 파일을 보기 전에 권한 메시지가 표시됩니다. 이 권한 메시지가 표시됩니다 사용자가 PWA를 선택하여 파일을 연 직후 PWA를 사용하여 파일을 여는 동작으로, 파일을 더 이해하기 쉽고 관련성 있게 만들 수 있습니다.

이 권한은 사용자가 파일 처리 허용 또는 차단을 클릭할 때까지 매번 표시됩니다. 메시지를 세 번 무시하거나 (그 후 Chromium은 금수 조치하고 이를 차단함) 권한이 있는지 확인하세요. 선택한 설정은 PWA를 닫고 다시 열어도 유지됩니다.

"file_handlers" 섹션의 매니페스트 업데이트 및 변경사항이 감지되면 권한 초기화됩니다.

파일 관련 문제점

웹사이트가 파일에 액세스하도록 허용하여 열리는 광범위한 공격 벡터가 있습니다. 이러한 사항은 File System Access API 도움말을 참조하세요. 이 File System API가 파일 시스템을 통해 제공하는 보안 관련 추가 기능 Access API는 운영 체제의 기본 제공 소프트웨어를 통해 특정 파일에 대한 액세스 권한을 부여하는 기능입니다. UI를 통해 구현됩니다.

그러나 사용자가 의도치 않게 열 수 있습니다. 그러나 일반적으로 파일을 열면 해당 파일을 읽거나 조작할 수 있습니다. 따라서 사용자가 파일을 열 수 있는 명시적인 선택은 설치된 애플리케이션에서(예: '연결 프로그램...' 컨텍스트 메뉴판처럼 신뢰 신호를 전달합니다.

기본 핸들러 본인 확인 요청

호스트 시스템에 특정 파일 형식의 애플리케이션이 없는 경우는 예외입니다. 포함 이 경우 일부 호스트 운영 체제는 새로 등록된 핸들러를 기본 핸들러를 자동으로 호출합니다. 이렇게 하면 사용자가 해당 유형의 파일을 두 번 클릭하면 등록된 있습니다. 이러한 호스트 운영체제에서 사용자 에이전트가 기존에 존재하는 기본 핸들러가 아닌 핸들러의 경우 명시적인 권한 메시지가 사용자의 동의 없이 파일 콘텐츠를 웹 애플리케이션에 실수로 보내는 행위

사용자 제어

사양에 따르면 브라우저에서 파일을 파일로 처리할 수 있는 모든 사이트를 등록해서는 안 됩니다. 처리됩니다. 파일 처리 등록은 설치 후에 제어되어야 하며 를 방문하세요. 오히려 사용자에게 이미 기본 핸들러가 있을 수 있는 .json 같은 기존 확장 프로그램을 도용하는 것보다 사이트에서 자체 확장 프로그램을 제작하는 것을 고려해야 합니다.

투명성

모든 운영체제에서는 사용자가 현재의 파일 연결을 변경할 수 있습니다. 지원 범위에 해당하지 않습니다. 있습니다.

의견

Chrome팀에서 File Handling API 사용 경험에 대한 의견을 듣고자 합니다.

API 설계에 대해 알려주세요.

API에서 예상대로 작동하지 않는 부분이 있나요? 또는 누락된 메서드가 있나요? 속성이 있나요? 보안에 대한 질문이나 의견이 있으면 무엇인가요?

• 해당 GitHub 저장소에서 사양 문제를 신고하거나 기존 있습니다.

구현 문제 신고

Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요?

• new.crbug.com에서 버그를 신고합니다. 최대한 많은 세부정보를 포함해야 합니다. 간단한 재현 지침을 입력하고 UI>Browser>WebAppInstalls>FileHandling를 구성요소 상자를 클릭합니다. Glitch를 사용하면 쉽고 빠르게 공유할 수 있습니다. 있습니다.

API 지원 표시

File Handling API를 사용할 계획인가요? 여러분의 공개적 지원은 Chrome팀이 다음을 수행하는 데 도움이 됩니다. 기능의 우선순위를 지정하고 해당 기능을 지원하는 것이 얼마나 중요한지 다른 브라우저 공급업체에 보여줍니다.

• WICG 담화 대화목록에서 사용 계획을 공유합니다.
• 해시태그를 사용하여 @ChromiumDev에 트윗을 보냅니다. #FileHandling 어디서 어떻게 사용하는지 알 수 있습니다.

유용한 링크

• 공개 설명
• 파일 처리 API 데모 | 파일 처리 API 데모 소스
• Chromium 추적 버그
• ChromeStatus.com 항목
• 깜박임 구성요소: UI>Browser>WebAppInstalls>FileHandling
• TAG 검토
• Mozilla 표준 입지

감사의 말씀

File Handling API는 에릭 윌거스가 명시했습니다. 제이 해리스, 레임스 쿠리. 이 기사에 대해 리뷰한 사용자 조 메들리