Какие размеры значков необходимы для прогрессивных веб-приложений (PWA) по состоянию на 1 квартал 2018 года?

Какие значки и размеры приложений необходимы для прогрессивного веб-приложения (PWA)? Например, следует ли включать значки Apple, если Safari не поддерживает PWA?

Похоже, что у разработчиков есть общая потребность, но в настоящее время я не уверен, что для этого есть официальная спецификация или руководство.

ОТВЕТЫ

Ответ 1

Если вы хотите включить полный набор иконок для Android:

icon-72x72
icon-96x96
icon-128x128
icon-144x144
icon-152x152
icon-192x192
icon-384x384
icon-512x512

Есть несколько полезных инструментов, таких как https://app-manifest.firebaseapp.com/, для создания значков.

Для iOS вам потребуется:

icon-120x120
icon-180x180

С квадратным фоном (не может быть прозрачным фоном). Хороший репозиторий для ссылок на https://github.com/gokulkrishh/awesome-meta-and-manifest

Ответ 2

Согласно Разработчикам Google

значки должны содержать значки размером 192 пикселя и размером 512 пикселов sized icons

Здесь наш блог о том же.

Ответ 3

В соответствии с контентом World Wide Web Consortium (W3C) Спецификация манифеста приложения для прогрессивных веб-приложений (элемент 8.7 значков):

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

MDN Web Docs не перечисляет требуемые размеры и форматы, но добавляет:

  • Значение размеры - это "список размеров, разделенных пробелом" для значка

    • Пример: "72x72 96x96"

  • Значение типа не является обязательным, но помогает пользовательскому агенту выбрать наиболее подходящий значок для его использования.

Используя приведенные выше правила, приложение может предоставить условия использования определенных значков, например, принудительное использование PNG для определенного разрешения и возврат к SVG для любых неопределенных размеров и позволять пользовательскому агенту выбирать лучший выбор. Преимущество этой системы заключается в прямой совместимости с пользовательскими агентами, которые еще не были анонсированы.

Значки манифеста Пример: (на основе приведенной выше спецификации W3C)

{
  "icons": [
    {
      "src": "assets/brand_small.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icon/brand.ico",
      "sizes": "96x96 128x128 256x256"
    },
    {
      "src": "icon/brand_large.svg",
      "sizes": "257x257"
    }]
}