Пусть установленные веб-приложения будут обработчиками файлов

Зарегистрируйте приложение в качестве обработчика файлов в операционной системе.

Thomas Steiner

Теперь, когда веб-приложения способны читать и записывать файлы , следующим логическим шагом является предоставление разработчикам возможности объявлять эти веб-приложения в качестве обработчиков файлов для тех файлов, которые их приложения могут создавать и обрабатывать. API обработки файлов позволяет сделать именно это. После регистрации приложения текстового редактора в качестве обработчика файлов и его установки вы можете щелкнуть правой кнопкой мыши по файлу .txt в macOS и выбрать «Получить информацию», чтобы указать операционной системе, что она всегда должна открывать файлы .txt с помощью этого приложения по умолчанию.

Примеры использования API для работы с файлами.

Примеры сайтов, которые могут использовать этот API, включают:

• Офисные приложения, такие как текстовые редакторы, табличные редакторы и программы для создания слайд-шоу.
• Графические редакторы и инструменты для рисования.
• Инструменты для редактирования уровней в видеоиграх.

Как использовать API обработки файлов

Прогрессивное улучшение

Сам по себе API обработки файлов не может быть полифиллирован. Однако функциональность открытия файлов в веб-приложении может быть реализована двумя другими способами:

• API Web Share Target позволяет разработчикам указывать свое приложение в качестве целевого объекта для общего доступа, чтобы файлы можно было открывать из меню общего доступа операционной системы.
• API доступа к файловой системе можно интегрировать с функцией перетаскивания файлов, что позволяет разработчикам обрабатывать перетащенные файлы в уже открытом приложении.

Поддержка браузеров

Обнаружение признаков

Чтобы проверить, поддерживается ли API обработки файлов, используйте:

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

Декларативная часть API обработки файлов

В качестве первого шага веб-приложениям необходимо декларативно описать в своем манифесте, какие типы файлов они могут обрабатывать. API обработки файлов расширяет манифест веб-приложения новым свойством под названием "file_handlers" , которое принимает массив, собственно, обработчиков файлов. Обработчик файла — это объект со следующими свойствами:

• Свойство "action" , значение которого указывает на URL-адрес в рамках приложения.
• Свойство типа "accept" , ключами которого является объект, содержащий MIME-типы, а значениями — списки расширений файлов.
• Свойство "icons" содержит массив значков ImageResource . Некоторые операционные системы позволяют привязывать тип файла к значку, который является не просто значком соответствующего приложения, а специальным значком, связанным с использованием этого типа файла в приложении.
• Свойство "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 , масштабируемые векторные графические файлы ( .svg ) по адресу /open-svg и вымышленный формат файлов Grafr с любым из расширений .grafr , .graf или .graph по адресу /open-graf . Первые два файла будут открываться в одном клиенте, последний — в нескольких клиентах, если обрабатывается несколько файлов.

Императивная часть 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 отсутствует, но я отправил запрос на добавление этой функции .

Демо

Я добавил поддержку работы с файлами в Excalidraw , приложение для рисования в мультяшном стиле. Чтобы протестировать её, сначала нужно установить Excalidraw. После создания файла и его сохранения в файловой системе, вы можете открыть его двойным щелчком или щелчком правой кнопкой мыши, а затем выбрать «Excalidraw» в контекстном меню. Реализацию можно посмотреть в исходном коде.

Безопасность

Команда Chrome разработала и внедрила API для обработки файлов, используя основные принципы, изложенные в документе «Контроль доступа к мощным функциям веб-платформы» , включая пользовательский контроль, прозрачность и эргономику.

Права доступа, сохранение прав доступа и обновления обработчиков файлов.

Для обеспечения доверия пользователей и безопасности их файлов, при открытии файла через API обработки файлов перед просмотром файла PWA будет отображаться запрос на предоставление разрешений. Этот запрос на разрешение будет показан сразу после того, как пользователь выберет PWA для открытия файла, что позволит тесно связать запрос с действием открытия файла с помощью PWA, сделав его более понятным и актуальным.

Это разрешение будет отображаться каждый раз, пока пользователь не нажмет « Разрешить» или «Заблокировать обработку файлов для сайта» или не проигнорирует запрос три раза (после чего Chromium заблокирует это разрешение). Выбранная настройка сохранится при закрытии и повторном открытии PWA.

При обнаружении обновлений манифеста и изменений в разделе "file_handlers" права доступа будут сброшены.

Проблемы, связанные с файлами

Существует обширная категория векторов атак, которые открываются при предоставлении веб-сайтам доступа к файлам. Они описаны в статье об API доступа к файловой системе . Дополнительная, имеющая важное значение для безопасности возможность, которую предоставляет API обработки файлов по сравнению с API доступа к файловой системе, заключается в возможности предоставления доступа к определенным файлам через встроенный пользовательский интерфейс операционной системы, а не через средство выбора файлов, отображаемое веб-приложением.

По-прежнему существует риск того, что пользователи могут непреднамеренно предоставить веб-приложению доступ к файлу, открыв его. Однако общепринято, что открытие файла позволяет приложению, с помощью которого он был открыт, читать и/или изменять этот файл. Поэтому явный выбор пользователя открыть файл в установленном приложении, например, через контекстное меню «Открыть с помощью…», может рассматриваться как достаточный сигнал доверия к приложению.

Проблемы обработчика по умолчанию

Исключением является случай, когда в хост-системе отсутствуют приложения для данного типа файлов. В этом случае некоторые хост-операционные системы могут автоматически, незаметно для пользователя, повысить статус вновь зарегистрированного обработчика до обработчика по умолчанию для данного типа файлов. Это означает, что если пользователь дважды щелкнет файл этого типа, он автоматически откроется в зарегистрированном веб-приложении. В таких хост-операционных системах, когда пользовательский агент определяет, что для данного типа файлов отсутствует существующий обработчик по умолчанию, может потребоваться явный запрос разрешения, чтобы избежать случайной отправки содержимого файла в веб-приложение без согласия пользователя.

Управление пользователем

В спецификации указано, что браузеры не должны регистрировать каждый сайт, способный обрабатывать файлы, в качестве обработчика файлов. Вместо этого регистрация обработчика файлов должна осуществляться только после установки и никогда не должна происходить без явного подтверждения пользователя, особенно если сайт должен стать обработчиком по умолчанию. Вместо того чтобы перехватывать существующие расширения, такие как .json , для которых у пользователя, вероятно, уже зарегистрирован обработчик по умолчанию, сайтам следует рассмотреть возможность создания собственных расширений.

Прозрачность

Все операционные системы позволяют пользователям изменять существующие ассоциации файлов. Это выходит за рамки возможностей браузера.

Обратная связь

Команда Chrome хочет узнать о вашем опыте использования API обработки файлов.

Расскажите о проектировании API.

Есть ли что-то в API, что работает не так, как вы ожидали? Или отсутствуют какие-то методы или свойства, необходимые для реализации вашей идеи? Есть вопрос или комментарий по модели безопасности?

• Создайте заявку в соответствующем репозитории GitHub или поделитесь своими мыслями в уже существующей заявке.

Сообщить о проблеме с реализацией

Вы обнаружили ошибку в реализации Chrome? Или реализация отличается от спецификации?

• Сообщите об ошибке на сайте new.crbug.com . Обязательно укажите как можно больше подробностей, простые инструкции по воспроизведению и введите UI>Browser>WebAppInstalls>FileHandling в поле Components .

Показать поддержку API

Планируете ли вы использовать API обработки файлов? Ваша публичная поддержка помогает команде Chrome расставлять приоритеты в разработке новых функций и показывает другим разработчикам браузеров, насколько важно их поддерживать.

• Поделитесь своими планами по его использованию в ветке обсуждения WICG на форуме.
• Отправьте твит @ChromiumDev , используя хэштег #FileHandling , и расскажите, где и как вы его используете.

Полезные ссылки

• Публичное пояснение
• Демонстрация API обработки файлов | Исходный код демонстрации API обработки файлов
• Отслеживание ошибки в Chromium
• Запись на ChromeStatus.com
• Компонент Blink: UI>Browser>WebAppInstalls>FileHandling
• Обзор TAG
• Позиция Mozilla по стандартам

Благодарности

API для обработки файлов был разработан Эриком Виллигерсом , Джеем Харрисом и Реймесом Хури . Данная статья была проверена Джо Медли .