Каждое приложение заслуживает значка
Это очень распространенный шаблон пользовательского интерфейса, который вы видите каждый день для собственных приложений на своем устройстве: значок уведомления. Это отличная концепция, которая информирует пользователей о некоторой упущенной информации с помощью простого и небольшого индикатора. Чаще всего это счетчик, а для некоторых специальных приложений используется специальный значок или визуальная корректировка значка, например, в приложении связки ключей macOS, где оранжевая монета указывает, что связка ключей разблокирована и доступна.
Но вернемся к значку по умолчанию. Благодаря тому, что Google неуклонно продвигает Интернет, ваше установленное прогрессивное веб-приложение может также отображать счетчик в качестве значка.
Предпосылки
Чтобы ваше веб-приложение могло отображать значок, оно должно соответствовать «критериям возможности установки» Google, ссылка на которые приведена ниже в дополнении. И в этом есть смысл: ваш PWA должен быть установлен на устройстве, чтобы иметь фиксированное место в вашей системе. В Windows ваши приложения находятся на панели задач, а в macOS - в Dock.
Если вы еще не знаете, ваше веб-приложение можно постепенно улучшать, чтобы оно превратилось в новый класс приложений, называемый «прогрессивными веб-приложениями», или сокращенно PWA. PWA поддерживают широкий спектр новых функций, которые ранее были доступны только для нативных приложений. Вы можете ознакомиться со многими статьями о PWA в этом веб-приложении, которое само по себе является PWA, которое можно установить.
Обратите внимание, что поддержка API значков приложений в настоящее время ограничена браузерами Chromium и поддерживается только на настольных устройствах, а также на Android. Общее состояние API стабильно для Chromium, но никак не поддерживается другими браузерами. Поэтому использование не должно быть обязательным требованием для использования приложения, а, скорее, постепенно улучшать существующий UX.
Как это работает
Фактическая реализация очень проста и требует всего нескольких строк кода, чтобы охватить все варианты использования.
// These code examples asume you're using
// Typescript, as they use optional chaining.
//
// Also note that the API-calls for badging
// return a promise that can directly be
// catched.
async function setSimpleBadge(){
// Just a simple indicator without any value.
// This is the simplest variant of a badge.
await navigator?.setClientBadge();
}
async function incrementBadgeCount(){
// Get our dummy count and update it,
// just to give more context for this demo.
const countNow = getUnreadMessagesCount();
await setUnreadMessagesCount(countNow + 1);
// Update the UI.
await navigator.setAppBadge(countNow + 1)
.catch((error) => { /* ... */ });
}
async function resetBadge(){
// As simple as it gets: reset the badge UI.
await navigator.clearClientBadge();
}
Очень приятным аспектом этого нового API является то, что его можно использовать и внутри вашего Service Worker, что означает, что, если он реализован, ваш установленный PWA может извлекать данные в фоновом режиме и получать push-уведомления, которые, в свою очередь, могут обновлять значок вашего приложения. !
Заключение
Как видите, использовать API значков приложений действительно просто. Все, что вам нужно для тестирования, - это браузер на основе Chromium, а также простой PWA, который можно установить. Не следует ожидать, что этот API будет доступен в Safari или Firefox в ближайшее время, поскольку это также подразумевает большую приверженность этих команд PWA в целом. Но для улучшенного UX вашего веб-приложения там, где это возможно, это большая победа, и ее обязательно нужно использовать!
