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

Каждое прогрессивное веб-приложение имеет манифест приложения, простой файл JSON, который содержит основную информацию о вашем приложении, т. е. имя, значок, описание и т. д.

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

Как это делается по традиции

При создании вашего первого PWA самый простой способ продолжить — добавить ссылку на манифест вашего приложения непосредственно в раздел <head> вашего HTML-шаблона.

Разместите manifest.json в любом месте вашего сайта. Полученный файл JSON должен выглядеть так:

{ 
  "short_name":"Coronavirus", 
  "name":"The Coronavirus App", 
  "background_color":"#ffffff", 
  "theme_color":"#ffffff", 
  "display":"standalone", 
  "orientation":"any", 
  "start_url":"https://coronavirus.app",       
  "scope":"https://coronavirus.app", 
  "icons":[    
    {"src":"/icon512.png","sizes":"512x512","type":"image/png"},
    {"src":"/icon192.png","sizes":"192x192","type":"image/png"},      
    {src":"/icon196.png","sizes":"196x196","type":"image/png"} 
  ] 
}

Почему вы можете захотеть сделать это по-другому

Хотя приведенный выше метод является вполне допустимым способом работы с манифестами веб-приложений, есть законные случаи, когда статический файл не подходит, и вместо этого вы захотите сгенерировать его динамически:

  • Вам нужны совершенно разные значки на десктопе и мобильном телефоне
  • Вы хотите разместить несколько разных PWA в одном домене.
  • PWA должен выглядеть по-разному для каждого вошедшего в систему пользователя.

И, вероятно, есть еще много достоверных примеров. Для динамического создания манифеста приложения у вас есть два варианта: создать его на своем сервере, когда его запросят пользователи. Или автоматически сгенерировать его прямо в браузере (наш предпочтительный метод).

Генерация динамического манифеста приложения на стороне сервера

Вместо того, чтобы размещать файл как статический файл на своем сайте, сделайте путь к /manifest.json API, который позволит вам программно генерировать содержимое файла JSON в зависимости от ваших потребностей. Вот пример использования Node.js/Express.js:

app.get('/manifest.json', async function(req, res){ 
  //for brevity, we're not including the isDesktop function here 
  let iconUrl = isDesktop() ? '/desktop.png' : '/mobile.png'; 
  let manifest = { 
    name: "App name", 
    icons: [{ 
     src: iconUrl, 
     sizes:  "512x512", 
     type:"image/png" 
    }] 
  } 
  res.header('content-type', 'application/json'); 
  return res.status(200).send(JSON.stringify(manifest)); 
});

Создание динамического манифеста приложения на стороне клиента

ОБНОВЛЕНИЕ ЗА ИЮНЬ 2022 Г.: Создание динамического манифеста приложения на стороне клиента больше не является приемлемым вариантом. Поэтому не делайте следующего. Смотрите комментарии для получения дополнительной информации.

Большинство людей не знают, что /manifest.json не обязательно должен быть настоящим файлом. Он отлично работает с Data URL (хотя есть недостаток — см. комментарии).

Отсутствие дополнительных файлов для загрузки с вашего сервера означает более быструю загрузку и снижение затрат на сервер. А поскольку URL-адрес данных будет отличаться каждый раз, когда вы изменяете содержимое манифеста веб-приложения, вам не нужно беспокоиться о том, что браузер не обновит свое содержимое соответствующим образом.

В коде на стороне клиента вы можете создать его следующим образом:

//for brevity, we're not including the isDesktop function here 
let iconUrl = isDesktop() ? '/desktop.png' : '/mobile.png'; 
let manifest = { 
  name: "App name", 
  icons: [{ src: iconUrl, sizes: "512x512", type:"image/png" }] 
}; 
let content = encodeURIComponent(JSON.stringify(manifest)); 
let url = "data:application/manifest+json,"+content; 
let element = document.createElement('link'); 
element.setAttribute('rel', 'manifest'); 
element.setAttribute('href', url); 
document.querySelector('head').appendChild(element);

В Progressier мы столкнулись с несколькими сложными вариантами использования, когда пользователям нужны совершенно разные логотипы на домашнем экране Android, на экране-заставке Android, на экране-заставке iPhone и на их Windows/Mac с установленным PWA, поэтому мы Мы разработали нашу информационную панель соответствующим образом.

За кулисами мы используем эти пользовательские настройки для динамического создания манифеста приложения с помощью описанных выше методов.

Вопросы или отзывы? Оставьте комментарий ниже!

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.