Sincronizar e atualizar um PWA em segundo plano
Usando um trabalho de serviço, um PWA (Aplicativo Web Progressivo) pode funcionar em segundo plano, mesmo quando o usuário não estiver usando o aplicativo. Os trabalhadores de serviço costumavam ser reservados para aplicativos nativos, mas agora eles também estão disponíveis para PWAs, fornecendo uma melhor experiência offline.
Considere os seguintes casos de uso:
- Um aplicativo de email que permite aos usuários compor mensagens e enviá-las a qualquer momento, mesmo quando offline.
- Um aplicativo de notícias que busca novos artigos todos os dias, para que o usuário leia mais tarde quando abrir o aplicativo.
- Um aplicativo de música que permite que os usuários baixem músicas para ouvir offline.
Todos esses três casos de uso são possíveis com PWAs usando as seguintes APIs:
- API de Sincronização em Segundo Plano
- API de sincronização de plano de fundo periódico
- API de busca em segundo plano
Embora essas APIs tenham nomes semelhantes, elas são de natureza diferente.
Usar a API de Sincronização em Segundo Plano para sincronizar dados com o servidor
Use a API de Sincronização em Segundo Plano para permitir que os usuários continuem usando o aplicativo e executem ações mesmo quando estiverem offline.
Por exemplo, um aplicativo de email pode permitir que seus usuários componham e enviem mensagens a qualquer momento. O front-end do aplicativo pode tentar enviar a mensagem imediatamente e, se o dispositivo estiver offline, o trabalhador do serviço poderá capturar a solicitação com falha e usar a API de Sincronização em Segundo Plano para adiar a tarefa até estar conectado.
Outro exemplo para usar a API de Sincronização em Segundo Plano é carregar conteúdo em segundo plano para o usuário.
Observação
A API de Sincronização em Segundo Plano deve ser usada para pequenas quantidades de dados. A API de Sincronização em Segundo Plano exige que o trabalhador do serviço esteja vivo durante toda a duração da transferência de dados. A API de Sincronização em Segundo Plano não deve ser usada para buscar arquivos grandes, pois os dispositivos podem decidir encerrar os trabalhos de serviço para preservar a duração da bateria. Em vez disso, use a API de Busca em Segundo Plano.
Verificar se há suporte
A API de Sincronização em Segundo Plano está disponível no Microsoft Edge, mas você deve garantir que a API de Sincronização em Segundo Plano tenha suporte nos outros navegadores e dispositivos em que seu aplicativo é executado. Para garantir que a API de Sincronização em Segundo Plano tenha suporte, teste se o ServiceWorkerRegistration objeto tem uma sync propriedade:
navigator.serviceWorker.ready.then(registration => {
if (registration.sync) {
// Background Sync is supported.
} else {
// Background Sync isn't supported.
}
});
Para saber mais sobre a ServiceWorkerRegistration interface, consulte ServiceWorkerRegistration no MDN.
Solicitar uma sincronização
A primeira coisa a fazer é solicitar uma sincronização. Isso pode ser feito pelo front-end do aplicativo ou pelo seu funcionário de serviço.
- Solicitar a sincronização do front-end é bom quando você deseja deixar o usuário encarregado de sincronizar posteriormente ou não.
- Solicitar a sincronização do trabalho de serviço é bom quando você deseja que isso seja transparente para o usuário. Nesse caso, o trabalhador do serviço pode detectar a solicitação de busca com falha e solicitar a sincronização imediatamente.
Para solicitar uma sincronização, você precisa de um e um ServiceWorkerRegistration nome de marca. No código de front-end do aplicativo, faça o seguinte:
async function requestBackgroundSync() {
const registration = await navigator.serviceWorker.ready;
await registration.sync.register('my-tag-name');
}
Ou, no trabalho de serviço, faça isso em vez disso:
async function requestBackgroundSync() {
await self.registration.sync.register('my-tag-name');
}
A my-tag-name cadeia de caracteres acima deve ser uma marca exclusiva que identifica essa solicitação de sincronização para que várias solicitações possam ser feitas.
React ao evento de sincronização
Assim que uma conexão pode ser usada e o trabalhador do serviço está em execução, um sync evento é enviado ao trabalhador do serviço, que pode usá-la para sincronizar os dados necessários. O sync evento pode ser ouvido com o seguinte código:
self.addEventListener('sync', event => {
if (event.tag === 'my-tag-name') {
event.waitUntil(doTheWork());
}
});
No código de exemplo acima, um sync ouvinte de eventos é adicionado no trabalho de serviço. Quando o ouvinte é chamado, o código verifica se a marca é a registrada no front-end e, em seguida, chama doTheWork. Espera-se que essa função retorne uma Promessa.
Normalmente, a doTheWork função enviará as informações para o servidor que não puderam ser enviadas quando o usuário estava offline. Pode ser útil armazenar essas informações no armazenamento IndexedDB do front-end para que elas possam ser recuperadas posteriormente do trabalho de serviço quando doTheWork executadas.
Para obter mais informações sobre o Sync evento, o e a SyncManagerServiceWorkerRegistrationinterface, consulte a especificação de rascunho de sincronização em segundo plano e a documentação da API de Sincronização em Segundo Plano.
Aplicativo de demonstração
My Movie List PWA é um aplicativo de demonstração que usa a API de Sincronização em Segundo Plano para buscar informações de filme mais tarde, se o usuário estiver offline.
Para testar a sincronização em segundo plano:
Instale o aplicativo.
Pesquise filmes usando o campo de entrada de pesquisa.
Fique offline. Para fazer isso, abra DevTools (F12) e selecione a caixa de seleçãoOfflinedos Trabalhadores> do Serviço de Aplicativo>.
Em um dos resultados do filme, selecione Mais informações.
Uma mensagem aparece no aplicativo informando que você está offline e que os detalhes do filme serão recuperados automaticamente mais tarde.
Vá para a internet. Para fazer isso, em DevTools, desmarque a caixa de seleçãoOffline dos Trabalhadores> do Serviço de Aplicativo.>
Recarregue o aplicativo. Os detalhes do filme agora aparecem.
Para ver o código de exemplo, marcar o repositório movies-db-pwa.
Depurar sincronizações em segundo plano com DevTools
Para testar seu código de sincronização em segundo plano, você não precisa ficar offline, depois entrar online e aguardar o Microsoft Edge disparar um sync evento. Em vez disso, o DevTools permite simular o evento de sincronização em segundo plano.
Para simular um sync evento:
- Abra DevTools (F12).
- SelecioneTrabalhos do Serviço deAplicativo>.
- Digite o nome da marca usada ao registrar a sincronização no campo de entrada Sincronizar .
- Selecione o botão Sincronizar .
Você também pode registrar a atividade de sincronização em segundo plano gerada pelo aplicativo em DevTools, da seguinte maneira:
- Abra DevTools (F12).
- SelecioneSincronização em Segundo Planodo Aplicativo>.
- Selecione Iniciar eventos de gravação.
Registros e expedições de sincronização aparecem na tabela de log de eventos:
Usar a API de Sincronização de Plano de Fundo Periódico para obter regularmente conteúdo novo
A API de Sincronização de Antecedentes Periódicos permite que PWAs recuperem conteúdo novo periodicamente, em segundo plano, para que os usuários possam acessá-lo imediatamente quando mais tarde abrirem o aplicativo novamente.
Usando a API de Sincronização de Antecedentes Periódicos, as PWAs não precisam baixar novos conteúdos (como novos artigos) enquanto o usuário estiver usando o aplicativo. Baixar conteúdo pode retardar a experiência e, em vez disso, recuperar o conteúdo em um momento mais conveniente.
Observação
A sincronização periódica ocorre somente quando o dispositivo está em uma rede conhecida (ou seja, uma rede à qual o dispositivo já foi conectado antes). O Microsoft Edge limita a frequência das sincronizações para corresponder à frequência com que a pessoa usa o aplicativo.
Verificar se há suporte
Para marcar se essa API tem suporte nos navegadores e dispositivos em que seu aplicativo é executado, teste se o ServiceWorkerRegistration objeto tem uma periodicSync propriedade:
navigator.serviceWorker.ready.then(registration => {
if (registration.periodicSync) {
// Periodic Background Sync is supported.
} else {
// Periodic Background Sync isn't supported.
}
});
Pedir permissão ao usuário
A sincronização periódica em segundo plano requer a permissão do usuário. Solicitar essa permissão ocorre apenas uma vez, para um determinado aplicativo.
Para pedir permissão ao usuário para fazer a sincronização periódica em segundo plano, use a API de Permissões da seguinte maneira:
const status = await navigator.permissions.query({name: 'periodic-background-sync'});
if (status.state === 'granted') {
// Periodic background sync can be used.
} else {
// Periodic background sync cannot be used.
}
Para saber mais sobre a API de Permissões, consulte API de Permissões no MDN.
Registrar uma sincronização periódica
Para registrar uma sincronização periódica, você precisa definir um intervalo mínimo e um nome de marca exclusivo. O nome da marca exclusiva permite registrar várias sincronizações periódicas em segundo plano.
async function registerPeriodicSync() {
await registration.periodicSync.register('get-daily-news', {
minInterval: 24 * 60 * 60 * 1000
});
}
O minInterval usado no código acima corresponde a 1 dia em milissegundos. Esse é apenas um intervalo mínimo, e o Microsoft Edge leva em conta outros fatores antes de alertar o funcionário do serviço com um evento de sincronização periódica, como a conexão de rede e se o usuário se envolve regularmente com o aplicativo.
React a eventos de sincronização periódica
Quando o Microsoft Edge decide que é um bom momento para executar a sincronização periódica, o Microsoft Edge envia um periodicsync evento ao seu trabalho de serviço. Você pode lidar com esse periodicsync evento usando o mesmo nome de marca especificado ao registrar a sincronização.
self.addEventListener('periodicsync', event => {
if (event.tag === 'get-daily-news') {
event.waitUntil(getDailyNewsInCache());
}
});
A getDailyNewsInCache função é onde seu funcionário de serviço pode buscar um novo conteúdo do servidor e armazená-lo no cache. Espera-se que essa função retorne uma Promessa que sinaliza se a sincronização foi bem-sucedida ou falhou.
Para obter mais informações sobre o PeriodicSync evento, o ServiceWorkerRegistratione a PeriodicSyncManager interface, confira:
- Sincronização de plano de fundo periódico da Web – especificação de rascunho.
- API de sincronização de plano de fundo periódico da Web.
Aplicativo de demonstração
Dicas de DevTools é um PWA que usa a API de Sincronização de Plano de Fundo Periódico. O PWA [Dicas do DevTools] busca novas dicas de ferramentas de desenvolvedor diariamente e as armazena em cache, para que os usuários possam acessá-las na próxima vez que abrirem o aplicativo, sejam elas online ou não.
Acesse o código-fonte no GitHub. Em particular, o aplicativo registra a sincronização periódica na função registerPeriodicSync . O código do trabalho de serviço é onde o aplicativo escuta o periodicsync evento.
Depurar sincronizações periódicas em segundo plano com DevTools
Você pode usar DevTools para simular periodicsync eventos em vez de aguardar o intervalo mínimo.
Para simular o evento:
- Abra DevTools (F12).
- SelecioneTrabalhos do Serviço deAplicativo>.
- Digite o nome da marca usada ao registrar a sincronização periódica no campo de entrada Sincronização Periódica .
- Selecione o botão Sincronização Periódica .
Você também pode registrar a atividade de sincronização periódica em segundo plano gerada pelo aplicativo em DevTools:
- Abra DevTools (F12).
- SelecioneSincronização periódica de plano de fundo do aplicativo>.
- Selecione Iniciar eventos de gravação.
Registros e expedições de sincronização periódicas aparecem na tabela de log de eventos.
Use a API de Busca em Segundo Plano para buscar arquivos grandes quando o aplicativo ou o trabalho de serviço não estiver em execução
A API de Busca em Segundo Plano permite que PWAs delegam completamente o download de grandes quantidades de dados para o mecanismo do navegador. Dessa forma, o trabalho de aplicativo e serviço não precisa estar em execução enquanto o download estiver em andamento.
Essa API é útil para aplicativos que permitem que os usuários baixem arquivos grandes (como música, filmes ou podcasts) para casos de uso offline. Como o download é delegado ao mecanismo do navegador, que sabe como lidar com uma conexão irregular ou até mesmo uma perda completa de conectividade, ele pode pausar e retomar o download quando necessário.
Verificar se há suporte
Para marcar se essa API tem suporte, teste se o BackgroundFetchManager construtor existe no objeto global:
if (self.BackgroundFetchManager) {
// Background Fetch is supported.
} else {
// Background Fetch isn't supported.
}
Iniciar uma busca em segundo plano
Para iniciar uma busca em segundo plano:
navigator.serviceWorker.ready.then(async registration => {
const fetch = await registration.backgroundFetch.fetch('my-download-id',
fileUrls, options);
});
Acima, my-download-id deve ser um identificador de cadeia de caracteres exclusivo para essa busca em segundo plano. fileUrls é a lista de arquivos a serem baixados, esta será uma matriz de URLs de cadeia de caracteres. E options é um objeto que pode ser usado para personalizar a aparência da atividade de download no navegador.
Para obter mais informações sobre a fetch função, consulte BackgroundFetchManager.fetch() e Introdução ao Busca de Plano de Fundo.
Usar a API de Falha de Aplicativo e a API de Notificações para reengajar usuários
Use a API de Falsificação de Aplicativos e a API de Notificações para informar aos usuários que tarefas em segundo plano, downloads ou conteúdo novo foram concluídos, sem interromper seu fluxo de trabalho. O uso de selos e notificações pode aumentar o envolvimento do usuário com seu aplicativo.
Com o Microsoft Edge, os selos aparecem em ícones de aplicativo na barra de tarefas e as notificações se integram ao centro de notificação do sistema.
Para saber como usar essas APIs, consulte Reengaja os usuários com selos, notificações e mensagens por push.