Интеграция ОС

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

Работа с файловой системой

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

• Выберите файл или папку на устройстве и откройте его напрямую.
• Внесите изменения в эти файлы или папки и сразу сохраните изменения.
• Создайте новые файлы и папки.

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

Открытие файла

Чтобы открыть файл, мы используем метод window.showOpenFilePicker() . Обратите внимание, что для этого метода требуется жест пользователя, например нажатие кнопки. Вот остальная часть настройки для открытия файла:

1. Захватите дескриптор файла из API выбора файлов доступа к файловой системе. Это дает вам основную информацию о файле.
2. Используя метод getFile() дескриптора, вы получите особый вид Blob , называемый File , который включает в себя дополнительные свойства файла, доступные только для чтения (такие как имя и дата последнего изменения). Поскольку это Blob, для получения его содержимого можно вызывать методы Blob, например text() .

// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();

Сохранение изменений

Для сохранения изменений в файле также необходим жест пользователя; затем:

1. Используйте дескриптор файла для создания FileSystemWritableFileStream .
2. Внесите изменения в поток. Это не обновит файл на месте; вместо этого обычно создается временный файл.
3. Наконец, когда вы закончите вносить изменения, вы закроете поток, что переместит изменения из временного состояния в постоянное.

Давайте посмотрим это в коде:

// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();

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

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

После регистрации установленный вами PWA появится в качестве опции в файловой системе пользователя, что позволит ему открыть файл непосредственно в нем. Вот пример настройки манифеста для PWA для чтения текстовых файлов:

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

обработка URL-адресов

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

Такое поведение автоматически доступно на Android при использовании WebAPK, например, когда пользователи устанавливают PWA с Chrome. Невозможно захватить URL-адреса PWA, установленных на iOS и iPadOS, из Safari.

Для настольных браузеров сообщество веб-браузеров создало новую спецификацию. Эта спецификация в настоящее время является экспериментальной ; он добавляет новый элемент файла манифеста: url_handlers . Это свойство ожидает массив источников, которые PWA хочет захватить. Источник вашего PWA будет предоставлен автоматически, и каждый другой источник должен принять эту обработку, действуя через файл с именем web-app-origin-association . Например, если манифест вашего PWA размещен на сайте web.dev и вы хотите добавить источник app.web.dev, он будет выглядеть так:

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

В этом случае браузер проверит, существует ли файл по адресу app.web.dev/.well-known/web-app-origin-association , принимая обработку URL-адреса из URL-адреса области PWA. Разработчик должен создать этот файл. В следующем примере файл выглядит так:

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

обработка протокола URL

Обработка URL-адресов работает со стандартными URL-адресами протокола https , но можно использовать собственные схемы URI, например pwa:// . В некоторых операционных системах установленные приложения получают эту возможность благодаря регистрации своих схем.

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

Чтобы зарегистрироваться, вы можете использовать метод RegisterProtocolHandler() или использовать член protocol_handlers в своем манифесте с желаемой схемой и URL-адресом, который вы хотите загрузить в контексте вашего PWA, например:

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

Вы можете направить URL from-protocol к правильному обработчику и получить value строки запроса в своем PWA. %s — это заполнитель для экранированного URL-адреса, который инициировал операцию, поэтому, если у вас есть ссылка где-то, например <a href="web+pwa://testing"> , ваш PWA откроется /from-protocol?value=testing .

Вызов других приложений

Вы можете использовать схемы URI для подключения к любому другому установленному приложению (PWA или нет) на устройствах пользователей на любой платформе. Вам просто нужно создать ссылку или использовать navigator.href и указать нужную схему URI, передав аргументы в форме, экранированной URL-адресом.

Вы можете использовать известные стандартные схемы, такие как tel: для телефонных звонков, mailto: для отправки электронной почты или sms: для обмена текстовыми сообщениями; или вы можете узнать о схемах URL-адресов других приложений, например, из известных сообщений, карт, навигации, онлайн-встреч, социальных сетей и магазинов приложений.

Веб-общий доступ

С помощью API Web Share ваш PWA может отправлять контент в другие установленные приложения на устройстве через общий канал.

API доступен только в операционных системах с механизмом share , включая Android, iOS, iPadOS, Windows и ChromeOS. Вы можете поделиться объектом, содержащим:

• Текст (свойства title и text )
• URL-адрес (свойство url )
• Файлы (свойство files ).

Чтобы проверить, может ли текущее устройство совместно использовать простые данные, такие как текст, вы проверяете наличие метода navigator.share() , а для обмена файлами вы проверяете наличие метода navigator.canShare() .

Вы запрашиваете действие общего доступа, вызывая navigator.share(objectToShare) . Этот вызов возвращает обещание, которое разрешается с undefined или отклоняется с исключением.

Целевой веб-ресурс

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

В настоящее время он доступен на Android с WebAPK и ChromeOS и работает только после того, как пользователь установил PWA. Браузер регистрирует целевой ресурс в операционной системе при установке приложения.

Вы настраиваете цель общего веб-ресурса в манифесте с помощью share_target , определенного в черновой спецификации цели общего доступа к веб-ресурсу . share_target задан объект с некоторыми свойствами:

action

URL-адрес, который будет загружен в окно PWA, которое, как ожидается, получит общие данные.

method

Для действия будет использоваться метод HTTP-глагола, например GET , POST или PUT .

enctype

(Необязательно) Тип кодировки параметров по умолчанию — application/x-www-form-urlencoded , но его также можно установить как multipart/form-data для таких методов, как POST .

params

Объект, который будет сопоставлять общие данные (из ключей: title , text , url и files из веб-ресурса) с аргументами, которые браузер будет передавать в URL-адресе (в method: 'GET' ) или в теле запроса с помощью выбранная кодировка.

Например, вы можете определить для своего PWA, что хотите получать общие данные (только заголовок и URL-адрес), добавив в свой манифест:

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

В предыдущем примере, если какое-либо приложение в системе использует общий URL-адрес с заголовком, и пользователь выбирает ваш PWA в диалоговом окне, браузер создаст новую навигацию к вашему источнику /receive-share/?shared_title=AAA&shared_url=BBB , где AAA — общий заголовок, а BBB — общий URL-адрес. Вы можете использовать JavaScript для чтения этих данных из строки window.location , анализируя их с помощью конструктора URL .

Браузер будет использовать имя и значок PWA из вашего манифеста для подачи общей записи операционной системы. Для этой цели вы не можете выбрать другой набор.

Более подробные примеры и способы получения файлов см. в разделе Получение общих данных с помощью API-интерфейса Web Share Target.

Выбор контактов

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

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

Вы можете запросить доступные свойства для запроса с помощью navigator.contacts.getProperties() и запросить выбор одного или нескольких контактов со списком желаемых свойств.

Некоторые примеры свойств: name , email , address и tel . Когда вы просите пользователя выбрать один или несколько контактов, вы можете вызвать navigator.contacts.select(properties) , передав взамен массив свойств, которые вы хотите получить.

В следующем примере будут перечислены контакты, полученные сборщиком.

async function getContacts() {
   const properties = ['name', 'email', 'tel'];
   const options = { multiple: true };
   try {
     const contacts = await navigator.contacts.select(properties, options);
     console.log(contacts);
   } catch (ex) {
     // Handle any errors here.
   }
}

Ресурсы

• API доступа к файловой системе: упрощение доступа к локальным файлам
• Пусть установленные веб-приложения будут обработчиками файлов
• Обработка файлов в Progressive Web Apps
• Интеграция с пользовательским интерфейсом общего доступа к ОС с помощью API Web Share.
• Делитесь контентом с другими приложениями
• Получение общих данных с помощью API-интерфейса Web Share Target.
• Средство выбора контактов для Интернета