Перейти к содержанию

Создание ярлыков приложений

изображение названия и автора

Добро пожаловать на неделю 2 день 2 из серии 30 Days of PWA! В сегодняшней статье мы расскажем о том, как упростить пользователям переход к страницам с общими задачами в приложении с помощью Shortcuts.

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

Контекстное меню Twitter PWA в Windows 11, обеспечивающее быстрый доступ к публикации нового твита, прямым сообщениям и т.д.

Здесь вы видите, что Twitter PWA предоставляет быстрый доступ к созданию нового твита, поиску, а также к упоминаниям и прямым сообщениям. Но как они это сделали? На самом деле это довольно простой процесс в манифесте Web App Manifest:

1
2
3
4
5
6
{
    "name": "My App",
    "shortcuts": [
        /* One or more ShortcutItem objects */
    ]
}

Элемент shortcuts позволяет определить массив элементов быстрого доступа. Каждый элемент ярлыка представляет собой объект:

1
2
3
4
5
{
    "name": "Today's agenda",
    "url": "/today",
    "description": "List of events planned for today"
}

Это простой пример, определяющий имя ярлыка (видимый текст), место, на которое он должен переводить PWA (url), и некоторый описательный текст, который может быть предоставлен вспомогательным технологиям операционной системой хоста. При необходимости можно также определить short_name.

Для более полной настройки можно также определить набор иконок для каждого элемента ярлыка:

1
2
3
4
5
6
7
8
{
    "name": "Today's agenda",
    "url": "/today",
    "description": "List of events planned for today",
    "icons": [
        /* One or more ImageResource objects */
    ]
}

Их определение точно такое же, как и определение значка приложения с помощью члена icons, о котором мы рассказывали в week 1 day 3 — Make PWA Installable.

Собираем все вместе

В качестве реального примера можно привести то, как я реализовал ярлыки на своем сайте:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
{
    /* The rest of the Web App manifest is not shown here for brevity */
    "shortcuts": [
        {
            "name": "Notebook",
            "url": "/notebook/",
            "icons": [
                {
                    "src": "/i/icons/notebook.svg",
                    "type": "image/svg+xml",
                    "purpose": "any monochrome"
                },
                {
                    "src": "/i/icons/notebook.png",
                    "type": "image/png",
                    "sizes": "120x120",
                    "purpose": "any monochrome"
                }
            ]
        },
        {
            "name": "Speaking",
            "url": "/speaking-engagements/",
            "icons": [
                {
                    "src": "/i/icons/mic.svg",
                    "type": "image/svg+xml",
                    "purpose": "any monochrome"
                },
                {
                    "src": "/i/icons/mic.png",
                    "type": "image/png",
                    "sizes": "120x120",
                    "purpose": "any monochrome"
                }
            ]
        },
        {
            "name": "Publications",
            "url": "/publications/",
            "icons": [
                {
                    "src": "/i/icons/books.svg",
                    "type": "image/svg+xml",
                    "purpose": "any monochrome"
                },
                {
                    "src": "/i/icons/books.png",
                    "type": "image/png",
                    "sizes": "120x120",
                    "purpose": "any monochrome"
                }
            ]
        },
        {
            "name": "Interviews",
            "url": "/interviews/",
            "icons": [
                {
                    "src": "/i/icons/chat.svg",
                    "type": "image/svg+xml",
                    "purpose": "any monochrome"
                },
                {
                    "src": "/i/icons/chat.png",
                    "type": "image/png",
                    "sizes": "120x120",
                    "purpose": "any monochrome"
                }
            ]
        }
    ]
}

В этом коде я определил 4 ярлыка: "Записная книжка", "Выступление", "Публикации" и "Интервью". Поскольку значения name являются краткими и простыми, я не стал добавлять short_name или description для каждого из них. Каждому из них соответствует свой url, и для каждого я определил два варианта иконок: одна — четкая, векторная SVG, а другая — растровая PNG. Я также сообщил хостовой операционной системе, что они монохромные (через purpose), на случай, если она захочет переключить цвет в соответствии со своей собственной светлой/темной темой.

Несколько заключительных замечаний

На момент написания этой статьи ярлыки поддерживаются в PWA на Android, устанавливаемых с помощью Chrome, и в настольных ОС (macOS, Windows и некоторых версиях Linux) для PWA, устанавливаемых с помощью браузеров на базе Chromium, таких как Chrome и Edge. PWA, распространяемые через Play Store и Microsoft Store, также могут использовать ярлыки на Android и Windows соответственно.

Говоря об операционных системах, следует отметить, что каждая ОС отличается от другой и имеет свои ограничения на количество отображаемых ярлыков. По этой причине следует избирательно подходить к выбору количества и порядка расположения ярлыков. Если их будет слишком много, они могут отображаться не все. Располагайте ярлыки в порядке приоритета — от наиболее важных к наименее важным. Браузерам предписано обращать внимание на этот порядок, и в случае необходимости они будут отбрасывать ярлыки из конца списка.

Кроме того, поскольку вы полностью контролируете URL для ярлыков, вы можете добавить параметр запроса, который позволит вам отслеживать использование функции "Ярлыки". Например:

1
2
3
4
5
6
7
8
{
    "name": "Today's agenda",
    "url": "/today?utm_source=shortcut",
    "description": "List of events planned for today",
    "icons": [
        /* One or more ImageResource objects */
    ]
}

И это действительно все. Ярлыки — это относительно простой, но мощный инструмент, обеспечивающий удобство для пользователей. Вам обязательно стоит им воспользоваться.

Настройтесь на завтрашний выпуск следующего поста из этой серии, где мы расскажем о том, как передавать данные в PWA и из него.

Ресурсы

Более подробную информацию о Shortcuts можно найти здесь:

Комментарии