Обработка файлов в PWA

Прогрессивное веб-приложение (PWA), которое может обрабатывать файлы, кажется более машинным для пользователей и лучше интегрированным в операционную систему.

Веб-сайты уже могут позволить пользователям отправлять файлы с помощью <input type="file"> или перетаскивания, но PWA пойти еще дальше и зарегистрироваться в качестве обработчиков файлов в операционной системе.

Если PWA зарегистрирован в качестве обработчика файлов для определенных типов файлов, операционная система может автоматически запускать приложение, когда эти файлы открываются пользователем, аналогично тому, как Microsoft Word обрабатывает .docx файлы.

Определите, какие файлы обрабатываются приложением

Первое, что нужно сделать, — объявить, какие типы файлов обрабатываются приложением. Это делается в файле манифеста приложения с помощью элемента массива file_handlers . Каждая запись в массиве file_handlers должна иметь два свойства:

• action: URL-адрес, по который должна перейти операционная система при запуске PWA.
• accept: объект допустимых типов файлов. Ключи — это MIME-типы (частичные типы, использующие подстановочный знак *, принимаются), а значения — это массивы допустимых расширений файлов.

Рассмотрим следующий пример.

{
    "file_handlers": [
        {
            "action": "/openFile",
            "accept": {
                "text/*": [
                    ".txt"
                ]
            }
        }
    ]
}

В этом примере приложение регистрирует один обработчик файлов, который принимает текстовые файлы. .txt Если пользователь открывает файл, например, дважды щелкнув его значок на рабочем столе, операционная система запускает приложение, используя /openFile URL-адрес.

См. также:

• Связывание файлов с PWA в MDN > References > Прогрессивные веб-приложения.
• file_handlers в манифестах веб-приложения "Ссылки > MDN>".

Определение доступности API обработки файлов

Перед обработкой файлов приложение должно проверка, доступен ли API обработки файлов на устройстве и в браузере.

Чтобы проверка, доступен ли API обработки файлов, проверьте, существует ли launchQueue объект, как показано ниже.

if ('launchQueue' in window) {
    console.log('File Handling API is supported!');
} else {
    console.error('File Handling API is not supported!');
}

Обработка файлов при запуске

Когда приложение запускается ОС после открытия файла, вы можете использовать launchQueue объект для доступа к содержимому файла.

Для обработки текстового содержимого используйте следующий код JavaScript:

if ('launchQueue' in window) {
    console.log('File Handling API is supported!');

    launchQueue.setConsumer(launchParams => {
        handleFiles(launchParams.files);
    });
} else {
    console.error('File Handling API is not supported!');
}

async function handleFiles(files) {
    for (const file of files) {
        const blob = await file.getFile();
        blob.handle = file;
        const text = await blob.text();

        console.log(`${file.name} handled, content: ${text}`);
    }
}

Объект launchQueue помещает в очередь все запущенные файлы, пока потребитель не задается с setConsumerпомощью . Дополнительные сведения об объектах launchQueue и launchParams см. в описании обработки файлов.

Демонстрационная версия приложения обработчиков файлов PWA

Демонстрационное приложение обработчиков файлов PWA :

• /pwa-file-handlers/ — файл сведений и исходный код.
• Демонстрация обработчиков файлов PWA — динамическая демонстрация.

Чтобы использовать демонстрацию, выполните следующие действия:

1. Перейдите к демонстрации обработчиков файлов PWA в новом окне или вкладке.

   Установите демонстрационное приложение:

2. В адресной строке щелкните доступное приложение. Установить демонстрацию обработчиков файлов PWA ().

   В Edge откроется диалоговое окно Установка демонстрационного приложения обработчиков файлов PWA .

3. Нажмите кнопку Установить .

   Откроется окно демонстрационного приложения обработчиков файлов PWA . Откроется диалоговое окно Установка приложения .

4. Нажмите кнопку Разрешить .

   В диалоговом окне "Приложения Windows" появится запрос на закрепление демонстрации на панели задач.

5. Нажмите кнопку Да .

6. Закройте демонстрационную версию приложения обработчиков файлов PWA .

   Создайте текстовый файл:

   Если у вас есть текстовый файл, его можно использовать. На следующих шагах мы будем использовать Visual Studio Code для создания текстового файла с именем test.txt в папке Documents .

7. Откройте Visual Studio Code.

8. В меню Файл выберите команду Создать текстовый файл.

9. Добавьте в файл текст, например:

   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   
   * Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
   
   * Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   
   

10. Откройте меню Файл и нажмите кнопку Сохранить.

    Открывается диалоговое окноСохранить как.

11. Перейдите в каталог, C:\Users\localAccount\Documents\например .

12. В поле Со списком Имя файла введите test.

13. В поле Со списком Тип файла выберите Обычный текст (*.txt).

14. Нажмите кнопку Сохранить .

    Диалоговое окно закрывается.

15. На вкладке test.txt нажмите кнопку Закрыть ().

    Откройте текстовый файл и укажите приложение Открыть с помощью:

16. На панели задач Windows нажмите кнопку Пуск, введите проводник и нажмите кнопку Открыть.

    откроется проводник.

17. Перейдите в каталог, содержащий текстовый файл, например C:\Users\localAccount\Documents\.

18. Щелкните правой кнопкой мыши текстовый файл (напримерtest.txt, ), а затем выберите открыть с> помощьюдемонстрации обработчиков файлов PWA.

    Или дважды щелкните текстовый файл.

    Откроется диалоговое окно Microsoft Edge с запросом на открытие и изменение текстового файла в этом веб-приложении:

    

19. Нажмите кнопку Открыть .

    Откроется демонстрационное приложение обработчиков файлов PWA , отображающее .txt имя файла и текстовое содержимое файла: