Поделиться через

Использование манифеста веб-приложения для интеграции PWA в ОС

  • Статья

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

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

Манифест веб-приложения — это JSON-файл, на который необходимо ссылаться на HTML-страницу веб-сайта с помощью ссылки манифеста. Вставьте следующий код между <head> тегами и </head> HTML-страницы веб-сайта, чтобы связать с файлом манифеста:

<link rel="manifest" href="/manifest.json">

Тип файла манифеста веб-приложения

Содержимое манифеста веб-приложения должно быть допустимым JSON, но расширение файла может быть либо .json или .webmanifest.

Если вы решили использовать .webmanifest расширение, убедитесь, что HTTP-сервер обслуживает его с типом application/manifest+json MIME.

Элементы манифеста

Как минимум файл манифеста должен содержать следующие члены манифеста:

{
    "name": "My Sample PWA",
    "lang": "en-US",
    "start_url": "/"
}

Ниже приведен пример файла манифеста, содержащего больше элементов:

{
    "name": "My Sample PWA",
    "lang": "en-us",
    "short_name": "SamplePWA",
    "description": "A sample PWA for testing purposes",
    "start_url": "/",
    "scope": "/",
    "display": "standalone",
    "theme_color": "#2f3d58",
    "background_color": "#2f3d58",
    "orientation": "any",
    "icons": [
        {
            "src": "/icon512.png",
            "sizes": "512x512"
        }
    ]
}

PWA можно настроить еще больше, используя другие члены манифеста, например следующие:

Member Описание
name Имя приложения, используемое операционной системой для отображения рядом со значком приложения.
short_name Его можно использовать для отображения имени приложения, если недостаточно места для name.
description Описание приложения.
categories Список категорий, к которому принадлежит приложение.
icons Массив объектов изображений значков, используемых ОС в разных контекстах.
screenshots Массив объектов изображений снимка экрана, также используемый ОС в разных контекстах.
start_url Предпочтительный URL-адрес, по которому следует перейти при запуске приложения операционной системой.
scope Определяет область навигации для приложения. За пределами этой области посещенная страница возвращается на обычную веб-страницу, а не на PWA. По умолчанию используется значение start_url.
display Как должно выглядеть приложение. Это изменяет объем пользовательского интерфейса браузера, отображаемый пользователю.
display_override Используется для определения предпочтительного отображения для приложения в зависимости от того, что поддерживает устройство.
theme_color Цвет темы по умолчанию для приложения. Это влияет на отображение сайта в ОС.
background_color Цвет фона окна, в котором запускается приложение, перед применением таблицы стилей.
orientation На вспомогательных устройствах это определяет ориентацию приложения по умолчанию (например, альбомную или книжную).
protocol_handlers Список стандартных или настраиваемых схем протоколов URI, с которыми связано приложение.
shortcuts Список распространенных задач, которые пользователи смогут выполнять, щелкнув правой кнопкой мыши или нажав значок приложения.
share_target Тип данных, которые приложение принимает при совместном доступе к содержимому через диалоговое окно общего доступа к ОС.
file_handlers Тип файлов, с которыми можно запустить приложение.

Дополнительные сведения о членах манифеста см. в разделе Манифесты веб-приложения на сайте MDN.

Обработка определенных схем протокола

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

Чтобы зарегистрироваться в качестве обработчика протокола, используйте член манифеста protocol_handlers :

{
    "protocol_handlers": [
        {
            "protocol": "mailto",
            "url": "/newEmail?to=%s"
        }
    ]
}

Дополнительные сведения см. в статье Обработка протоколов в прогрессивных веб-приложениях.

Использование сочетаний клавиш для быстрого доступа к функциям

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

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

"shortcuts": [
    {
        "name": "Play Later",
        "description": "View the list of podcasts you saved for later",
        "url": "/play-later",
        "icons": [
            {
                "src": "/icons/play-later.svg",
                "type": "image/svg+xml",
                "purpose": "any"
            }
        ]
    },
    {
        "name": "Subscriptions",
        "description": "View the list of podcasts available in your subscription",
        "url": "/subscriptions?sort=desc"
    }
]

Дополнительные сведения см. в статье Определение ярлыков приложений.

Определение приложения в качестве целевого объекта общего доступа

Чтобы пользователи могли быстро обмениваться ссылками и файлами с собственными приложениями, используйте share_target объект в манифесте веб-приложения. Страница action похожа на форму. В объекте share_target вы определяете страницу action и параметры, которые должны быть переданы на страницу action .

"share_target": {
    "action": "/share.html",
    "params": {
        "title": "name",
        "text": "description",
        "url": "link"
    }
}

Указанный выше share_target объект устанавливается /share.html в action качестве страницы для общей папки. В этом примере также определяются три параметра, которые будут переданы на эту action страницу: title, textи url.

Дополнительные сведения об использовании функции "Общий доступ к целевому объекту" см. в статье Предоставление общего доступа к содержимому другим приложениям.

Связывание приложения с файлами

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

Для обработки файлов выведите список типов и расширений mime файлов, с которыми должно быть связано приложение, и определите URL-адрес, с помощью которого должно быть запущено приложение:

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

Затем обработайте файлы с помощью window.launchQueue() метода :

if ('launchQueue' in window) {
    launchQueue.setConsumer(launchParams => {
        // Do something with launchParams.files ...
    });
}

Дополнительные сведения см. в статье Обработка файлов в прогрессивных веб-приложениях.