Junto com dezenas de recursos lançados na versão 16.4 do iOS. Tivemos a inclusão ao suporte a Badging API ou API de emblema, para você que não está familiarizado com o recurso. É a exibição de um contador sobre o ícone da nossa aplicação. Esse recurso pode ser usado para diversas finalidades de notificação ao usuário.
Como funciona o recurso badging API no sistema operacional iOS?
Já abordamos a Badging API no blog, mas para a plataforma iOS e iPadOS 16.4, vamos ter algumas particularidades. Primeiramente a Badging API é uma API exclusivamente para aplicações web que o usuário adicionou na tela inicial e que rodam em HTTPS. Para mais instruções sobre essa etapa confira o post Utilizando web app manifest no iOS.
Já na parte do código, inicialmente precisamos verificar se o navegador possui suporte ao recurso.
if ('setAppBadge' in navigator) {
// API de Badging está disponível...
}Code language: JavaScript (javascript)Emblemas e notificações
No iOS e iPadOS, sempre trabalhou em conjunto com notificações uma das razões para ambas APIs ganharem suporte no iOS por que elas se complementam. Por isso que um segundo requisito é a permissão do usuário para exibição de notificações na sua aplicação.
Assim para o usuário ter a visualização da Badging API funcionando você precisa inicialmente requisitar ao seu usuário a permissão para exibir notificações.
<button onclick="requestNotificationPermission()">
Requisitar permissão para notificações
</button>
<script>
async function requestNotificationPermission() {
const permission = await Notification.requestPermission();
if (permission === 'granted') {
// Agora você pode utilizar notificações e badging api
}
}
</script>Code language: HTML, XML (xml)O sistema operacional do iOS irá mostrar a seguinte pop-up requisitando permissão para notificações:
Também podemos verificar se o usuário concedeu a permissão anteriormente para aquele domínio.
async function checkNotificationPermission() {
const permissionStatus = await navigator
.permissions
.query({ name: 'notifications' });
switch (permissionStatus.state) {
case 'granted':
// You can use the Badging API
break;
case 'denied':
// The user has denied the permission
break;
default:
// The user has not yet granted or denied the permission
await requestNotificationPermission();
break;
}
}
checkNotificationPermission();Code language: JavaScript (javascript)Devemos levar em conta que, usuários podem conceder permissão e depois revoga-las. Através do painel de configurações do iOS e iPadOS. Assim os usuários podem dar permissão as notificações e bloquear o recurso via sistema operacional.
Particularmente eu sou um desses usuários, bagdes e contadores podem me distrair durante o dia e para não atrapalhar minha produtividade eu desligo todas as badges das minhas aplicações.
Configurando e limpando a badge do aplicativo
A badge da sua aplicação pode representar um número de items, que necessitam atenção, por exemplo, uma quantidade de mensagens não lidas.
Para atualizar essa notificações precisamos chamar a função navigator.setAppBadge():
async function setBadge(count) {
if ('setAppBadge' in navigator) {
try {
await navigator.setAppBadge(count);
} catch (error) {
console.error('Failed to set app badge:', error);
}
}
}
// Set the badge count to 13
setBadge(13);Code language: JavaScript (javascript)
A função acima nos definimos o contador de nossa badge como 5, caso queiramos limpar essa contagem. Trabalhamos da seguinte forma:
async function clearBadge() {
if ('clearAppBadge' in navigator) {
try {
await navigator.clearAppBadge();
} catch (error) {
console.error('Failed to clear app badge:', error);
}
}
}
// Clear the badge
clearBadge();Code language: JavaScript (javascript)Como alternativa para, o navigator com navigator.clearAppBadge() podemos utilizar o navigator.setAppBadge(0).
Usando Badging API através de um Service Worker
Banding API pode ser acessada tanto do navegador via window como também via Service Worker também conhecido com contexto de web worker.
Para isso vamos utilizar uma exemplo comum entre Web Push e a API de Badging, quando o usuário recebe uma notificação ele irá atualizar sua contagem no ícone da aplicação.
// Função que determina a contagem da badge, baseado nos dados enviados na notificação
function determineBadgeCount(data) {
// Processa a contagem baseado nos dados recebidos pela notificação
}
self.addEventListener('push', (event) => {
let promises = [];
if ('setAppBadge' in self.navigator) {
const badgeCount = determineBadgeCount(event.data);
// Promise para definir a badge
const promise = self.navigator.setAppBadge(badgeCount);
promises.push(promise);
}
// Promise para exibir a notificação
promises.push(self.registration.showNotification("You've got mail!"));
// Finalmente...
event.waitUntil(Promise.all(promises));
});
Code language: PHP (php)Ao solicitar uma assinatura de push, devemos completar todas as promises de todos os pushes visíveis ao usuário, isso significa que cada push que é enviado para o usuário deve resultar na exibição de uma nova notificação visível do usuário com uma chamada para self.registration.showNotification().
Badging API é um recurso que pode ser utilizado para diferentes finalidades, mas em conjunto com outras libs podem ser bastante útil. Para mais conteúdo relacionado confira os posts:
Deixe um comentário