Neste codelab, você vai usar um service worker para gerenciar notificações. As instruções aqui pressupõem que você já esteja familiarizado com service workers e as noções básicas sobre como solicitar permissões e enviar notificações. Se você precisar se lembrar de notificações, consulte a Começar a usar a API Notifications o codelab. Para saber mais sobre service workers, consulte Introdução aos service workers de Matt Gaunt.
Remixar o app de exemplo e visualizá-lo em uma nova guia
As notificações são bloqueadas automaticamente no app Glitch incorporado, então não é possível visualizar o app nesta página. Em vez disso, faça o seguinte:
- Clique em Remixar para editar para tornar o projeto editável.
- Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia
O Glitch será aberto em uma nova guia do Chrome.
Durante este codelab, faça mudanças no código no Glitch incorporado nesta página. Atualize a nova guia com o app ativo para conferir as mudanças.
Conhecer o app de exemplo e o código inicial
Comece conferindo o aplicativo publicado na nova guia do Chrome:
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
Clique na guia Console.
Verifique se a opção Informações está selecionada no menu suspenso Níveis. ao lado da caixa Filtro.
No console do DevTools do app ativo, você vai receber uma mensagem do console:
TODO: Implement getRegistration()
.Essa é uma mensagem de um stub de função que você vai implementar neste codelab.
Agora, vamos conferir o código do app de exemplo no Glitch incorporado nesta página.
No Glitch incorporado, confira
public/index.js
:Há quatro stubs para as funções que você implementará:
registerServiceWorker
,getRegistration
,unRegisterServiceWorker
esendNotification
.A função
requestPermission
solicita a permissão do usuário para enviar notificações. Se você fez o codelab Introdução à API Notifications, a funçãorequestPermission
é usada aqui. A única diferença é que agora ele também atualiza a interface do usuário depois de resolver a solicitação de permissão.A função
updateUI
atualiza todos os botões e mensagens do app.A função
initializePage
realiza a detecção de recursos para a capacidade do service worker no navegador e atualiza a interface do usuário do app.O script aguarda até que a página seja carregada e a inicializa.
No Glitch incorporado, abra
public/service-worker.js
.Como o nome sugere, você vai adicionar código ao app para registrar esse arquivo como service worker.
Embora o arquivo ainda não esteja sendo usado pelo app, ele contém um código inicial que vai mostrar uma mensagem no console quando o service worker for ativado.
Você vai adicionar um código ao
public/service-worker.js
para processar as notificações quando elas forem recebidas pelo service worker.
Registrar o service worker
Nesta etapa, você vai escrever um código que executa
quando o usuário clicar em Registrar service worker na interface do app.
Esse código vai registrar public/service-worker.js
como um service worker.
No editor do Glitch incorporado, abra
public/index.js
. Substitua a funçãoregisterServiceWorker
por este código:// Use the Service Worker API to register a service worker. async function registerServiceWorker() { await navigator.serviceWorker.register('./service-worker.js') updateUI(); }
O
registerServiceWorker
usa a declaraçãoasync function
para tornar o processamento de promessas mais conveniente. Isso permiteawait
o valor resolvido de umaPromise
. Por exemplo, a função acima aguarda o resultado do registro de um service worker antes de atualizar a interface. Consulteawait
no MDN para mais informações.Agora que o usuário pode registrar um service worker, você pode receber uma referência para o objeto de registro do service worker. Em
public/index.js
, substitua a funçãogetRegistration
pelo seguinte código:// Get the current service worker registration. function getRegistration() { return navigator.serviceWorker.getRegistration(); }
A função acima usa API Service Worker para obter o registro atual do service worker, se houver. Isso torna a obtenção de uma referência ao registro do service worker um pouco mais conveniente.
Para concluir a funcionalidade de registro do service worker, adicione o código para cancelar o registro do service worker. Substitua a função
unRegisterServiceWorker
por este código:// Unregister a service worker, then update the UI. async function unRegisterServiceWorker() { // Get a reference to the service worker registration. let registration = await getRegistration(); // Await the outcome of the unregistration attempt // so that the UI update is not superceded by a // returning Promise. await registration.unregister(); updateUI(); }
Na guia em que você está visualizando o app publicado, atualize a página. Os botões Registrar service worker e Cancelar registro de service worker agora devem estar funcionando.
Enviar notificações para o service worker
Nesta etapa, você vai criar um código que será executado quando o usuário clicar em Enviar uma notificação na interface do app. Esse código vai criar uma notificação, verificar se um service worker está registrado e enviar a notificação para o service worker usando o método postMessage
.
No editor do Glitch incorporado, abra public/index.js
e
substitua a função sendNotification
pelo seguinte código:
// Create and send a test notification to the service worker.
async function sendNotification() {
// Use a random number as part of the notification data
// (so you can tell the notifications apart during testing!)
let randy = Math.floor(Math.random() * 100);
let notification = {
title: 'Test ' + randy,
options: { body: 'Test body ' + randy }
};
// Get a reference to the service worker registration.
let registration = await getRegistration();
// Check that the service worker registration exists.
if (registration) {
// Check that a service worker controller exists before
// trying to access the postMessage method.
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage(notification);
} else {
console.log('No service worker controller found. Try a soft reload.');
}
}
}
Confira o que esse código faz:
sendNotification
é uma função assíncrona, então você pode usarawait
para ter uma referência ao registro do service worker.O método
postMessage
do service worker envia dados do app para o service worker. Consulte a documentação do MDN sobre postMessage para saber mais.O código verifica a presença da propriedade
navigator.serviceWorker.controller
antes de tentar acessar a funçãopostMessage
.navigator.serviceWorker.controller
seránull
se não houver service workers ativos ou se a página tiver sido atualizada à força (Shift+
Atualizar). Consulte a documentação do controlador ServiceWorker no MDN para mais informações.
Processar notificações no service worker
Nesta etapa, você vai escrever um código no service worker que processará as mensagens postadas nele e exibirá notificações para o usuário.
No editor do Glitch incorporado, abra public/service-worker.js
. Adicione o seguinte código ao final do arquivo:
// Show notification when received
self.addEventListener('message', (event) => {
let notification = event.data;
self.registration.showNotification(
notification.title,
notification.options
).catch((error) => {
console.log(error);
});
});
Veja uma explicação rápida:
self
é uma referência ao próprio service worker.Embora o service worker agora gerencie a exibição de notificações, a interface principal do app ainda é responsável por receber a permissão de notificações do usuário. Se a permissão não for concedida, a promessa retornada por
showNotification
será rejeitada. O código acima usa um blococatch
para evitar um erro de rejeição dePromise
não detectado e lidar com esse erro de forma um pouco mais simples.
Se tiver dificuldades, consulte glitch.com/edit/#!/codelab-notifications-service-worker-completed para ver o código concluído.
Acesse o próximo codelab desta série: Criar um servidor de notificações push.