TL; DR: PWA, установленные из Chrome, теперь могут иметь ярлыки, как собственные приложения
Прогрессивное веб-приложение (сокращенно PWA) - это веб-приложение, в котором используются современные API-интерфейсы браузера и методы прогрессивного улучшения, чтобы обеспечить работу, аналогичную нативному приложению. Они поддерживают автономное взаимодействие, могут отправлять пользователям push-уведомления и устанавливаются как приложение. Теперь они также поддерживают ярлыки при установке через Chrome.
Прежде чем я подробно остановлюсь на ярлыках, давайте немного поговорим о PWA. Хотя в настоящее время можно установить прогрессивные веб-приложения из некоторых магазинов приложений (например, из Google Play Store), наиболее распространенным способом их установки является посещение веб-сайта, который предоставляет собственную версию PWA. Веб-приложения получают свои сверхспособности PWA (частично) из так называемого файла манифеста. Чтобы сделать веб-сайт доступным как PWA, вы создаете manifest.webmanifest
файл * в корне своего веб-сайта, который сообщает браузеру и операционной системе, как его установить. Затем, когда пользователь посещает веб-сайт, ему может быть предложено установить PWA.
Файл манифеста - это довольно простой файл JSON. Наиболее широко поддерживаемые свойства, включенные в файл, - это name
, short_name
, icons
, start_url
, display
, theme_color
и background_color
. Вот образец manifest.webmanifest
файла.
{ "short_name": "App name", "name": "App name", "icons": [ { "src": "favicon.ico", "sizes": "32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": ".", "display": "standalone", "theme_color": "#15403B", "background_color": "#15403B" }
Горячие клавиши теперь доступны!
Chrome недавно добавил поддержку еще одного свойства в файле манифеста под названием shortcuts
, что помогает нам продолжать приближаться к тому, чтобы наши веб-приложения были похожи на приложения!
Ярлыки позволяют предоставить пользователю быстрые ссылки для перехода непосредственно к действию в вашем приложении без необходимости сначала открывать приложение и переходить к действию.
Они работают для PWA аналогично тому, как они в настоящее время работают для собственных приложений Android, где долгое нажатие на значок приложения отображает контекстное меню. Эта функция доступна для PWA теперь в Chrome (начиная с версии 84.0.4147.111).
Также ходят слухи, что Microsoft планирует добавить поддержку этого в PWA, установленные в Windows 10. Это возможно для PWA, установленных из Microsoft Store, но не для PWA, установленных из браузера.
Добавление ярлыков в PWA
Чтобы добавить ярлыки в PWA, добавьте в файл manifest.webmanifest
следующее:
"shortcuts": [ { "name": "Shortcut name to show in the menu", "description": "A description of what the shortcut does", "url": "Link to shortcut", "icons": [ { "src": "/icons/play-later.png", "sizes": "96x96", "type": "image/png", "purpose": "any" } ] } ]
Вы можете добавить несколько ярлыков в свой PWA, добавив объект с именем, описанием и URL-адресом для каждого из них.
При желании вы также можете показать значок для каждого ярлыка. Если операционная система поддерживает значки в контекстном меню и значки того типа, который вы указали для ярлыка, он будет отображаться в меню. Chrome рекомендует использовать значки размером 192 x 192 пикселей или, предоставляя значки, размер которых увеличивается на 48 dp (т. Е. 48x48, 72x72, 96x96, 144x144, 192x192). В настоящее время он также поддерживает только файлы PNG. Вы можете узнать больше о реализации Chrome на сайте Google Web.dev.
Рекомендуется размещать наиболее важные ярлыки на первом месте, поскольку разные браузеры и операционные системы могут иметь ограничения на количество отображаемых ярлыков. Последний рабочий проект спецификаций веб-манифестов W3C описывает ожидаемое поведение свойства ярлыков.
Теперь вы можете использовать это в своих PWA в Chrome.
*Side Note: manifest.json
vs. manifest.webmanifest
В зависимости от того, куда вы посмотрите, есть противоречивые советы о том, следует ли называть файл манифеста manifest.json
или manifest.webmanifest
. Согласно Проекту редактора манифеста W3C, официальное расширение - .webmanifest
. В черновике также указано, что можно использовать .json
файл. Главное требование - убедиться, что файл передается с использованием mime-типа application/manifest+json
. Я использовал оба расширения файлов для своих проектов, и они, кажется, работают одинаково хорошо, но ваш опыт может отличаться.