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. Я использовал оба расширения файлов для своих проектов, и они, кажется, работают одинаково хорошо, но ваш опыт может отличаться.