Voltar a envolver os utilizadores com distintivos e notificações

As Aplicativos Web progressivas (PWAs) são capazes de funcionar quando a aplicação não está em execução, como atualizar dados na cache ou enviar mensagens quando o dispositivo recupera a conectividade. Para tal, utilize as seguintes APIs, descritas em Sincronizar e atualizar um PWA em segundo plano:

• API de Sincronização de Segundo Plano
• API de Sincronização de Fundo Periódica
• API de Obtenção em Segundo Plano

Para voltar a envolver o utilizador com a aplicação após a conclusão de uma tarefa em segundo plano, pode utilizar notificações e distintivos. Para tal, utilize as seguintes APIs:

• API de Badging de Aplicações
• API de Notificações

Os distintivos são fáceis de utilizar e podem ser utilizados com frequência. Os distintivos não interrompem o fluxo de trabalho do utilizador e são úteis para apresentar uma pequena quantidade de informações, como o número de mensagens recebidas.

As notificações são úteis para que as aplicações participem no centro de notificações do sistema e apresentem imagens e informações de texto. As notificações são úteis para alertar o utilizador sobre uma alteração importante do estado na sua aplicação. No entanto, as notificações devem ser utilizadas raramente, uma vez que tendem a ser disruptivas para o fluxo de trabalho do utilizador.

Apresentar um distintivo no ícone da aplicação

Os PWAs podem apresentar um distintivo no ícone da aplicação com a API de Badging da Aplicação. O distintivo pode estar vazio ou pode conter um número.

Procurar suporte

Antes de utilizar a API de Badging da Aplicação, comece por marcar se a API de Badging da Aplicação é suportada no motor do browser no qual a aplicação é executada, da seguinte forma:

if (navigator.setAppBadge) {
    console.log("The App Badging API is supported!");
}

A apresentar o distintivo

Para definir o distintivo, utilize o seguinte código do front-end da aplicação ou da função de trabalho de serviço.

// To display an empty badge
navigator.setAppBadge();

// To display a number in the badge
navigator.setAppBadge(42);

A setAppBadge função devolve uma Promessa, que pode ser utilizada para saber quando o distintivo foi adicionado e para detetar potenciais erros, da seguinte forma:

navigator.setAppBadge(42).then(() => {
    console.log("The badge was added");
}).catch(e => {
    console.error("Error displaying the badge", e);
});

Limpar o distintivo

Para remover o distintivo no ícone da aplicação, utilize o seguinte código da sua função de trabalho de front-end ou de serviço:

navigator.clearAppBadge();

O clearAppBadge também devolve uma Promessa que pode ser utilizada para lidar com potenciais erros.

Outra forma de limpar um distintivo é chamar setAppBadge novamente, mas passar 0 como o valor, desta vez:

navigator.setAppBadge(0);

Apresentar notificações no centro de ação

As PWAs podem apresentar notificações com a API de Notificações.

Procurar suporte

Antes de utilizar a API, marcar que é suportada, da seguinte forma:

if ("Notification" in window) {
    console.log("The Notifications API is supported");
}

Pedir permissão

A API de Notificações só pode ser utilizada depois de ter pedido a permissão do utilizador para apresentar mensagens. Para pedir permissão, utilize a requestPermission função, conforme mostrado abaixo.

Pedir permissão só deve ser feito em resposta a uma ação do utilizador. Esta é uma melhor prática, para evitar interromper o utilizador com pedidos de permissão quando o utilizador ainda não interagiu com uma funcionalidade que utiliza notificações.

button.addEventListener("click", () => {
    Notification.requestPermission().then(permission => {
        if (permission === "granted") {
            console.log("The user accepted");
        }
    });
});

Pode marcar a permissão status novamente mais tarde:

if (Notification.permission === "granted") {
    console.log("The user already accepted");
}

Apresentar a notificação

Assim que souber que a API é suportada e que o utilizador aceitou as notificações, pode apresentar uma notificação ao criar um Notification objeto:

const notification = new Notification("Hello World!");

O código acima apresenta uma mensagem de notificação apenas de texto, mas também pode personalizar a mensagem ao incluir propriedades e icon adicionaisbody:

const notification = new Notification("Hello World!", {
    body: "This is my first notification message",
    icon: "/assets/logo-192.png",
});

Também pode apresentar notificações da função de trabalho de serviço da sua aplicação. Isto é útil porque a função de trabalho de serviço pode estar a trabalhar enquanto a sua aplicação não está em execução. Para enviar uma notificação da sua função de trabalho de serviço, utilize a ServiceWorkerRegistration.showNotification função :

self.registration.showNotification("Hello from the service worker!");

A showNotification função suporta os mesmos argumentos que o Notification construtor utilizado no exemplo anterior. A showNotification função também suporta a actions propriedade, que é descrita na secção seguinte.

Adicionar ações a notificações

Numa notificação, é possível adicionar ações para o utilizador efetuar. Isto só é suportado em notificações persistentes que são mostradas através da ServiceWorkerRegistration.showNotification função .

self.registration.showNotification("Your content is ready", {
    body: "Your content is ready to be viewed. View it now?",
    icon: "/assets/logo-192.png",
    actions: [
        {
            action: "view-content",
            title: "Yes"
        },
        {
            action: "go-home",
            title: "No"
        }
    ]
});

Quando o utilizador clica num dos botões de ação, o seu PWA pode processar o clique ao escutar o notificationclick evento. Quando um notificationclick evento é recebido, feche a notificação e execute algum código:

self.addEventListener('notificationclick', event => {
    // Close the notification.
    event.notification.close();

    // React to the action.
    if (event.action === 'view-content') {
        console.log("view-content action was clicked");
    } else if (event.action === 'go-home') {
        console.log("go-home action was clicked");
    } else {
        console.log("main body of the notification was clicked");
    }
}, false);

Para saber mais sobre as ações de notificação, veja Notification.actions na MDN.