Sincronizar e atualizar um PWA em segundo plano

Usando um trabalho de serviço, um PWA (Aplicativo Web Progressivo) pode trabalhar em segundo plano, mesmo quando o usuário não está usando o aplicativo, e fornecer uma melhor experiência offline.

Considere os seguintes casos de uso:

• Um aplicativo de email que permite aos usuários redigir mensagens e enviá-las a qualquer momento, mesmo quando estiver offline.
• Um aplicativo de notícias que busca novos artigos todos os dias, para o usuário ler mais tarde quando abrir o aplicativo.
• Um aplicativo de música que permite aos usuários baixar 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 em Segundo Plano Periódica
• API de Busca em Segundo Plano

Embora essas APIs tenham nomes semelhantes, elas são de natureza diferente.

Conteúdo detalhado:

• Usar a API de sincronização em segundo plano para sincronizar dados com o servidor
  • Verificar se há suporte
  • Solicitar uma sincronização
  • React ao evento de sincronização
  • Aplicativo de demonstração: Sincronização em Segundo Plano do PWA
  • Depurar sincronizações em segundo plano com o DevTools
• Use a API de Sincronização em Segundo Plano Periódica para obter regularmente novos conteúdos
  • Sincronização periódica quando em uma rede conhecida
  • Verificar se há suporte
  • Pedir permissão ao usuário
  • Registrar uma sincronização periódica
  • React a eventos de sincronização periódicos
  • Aplicativo de demonstração: Dicas do DevTools
  • Depurar sincronizações periódicas em segundo plano com o DevTools
• Use a API de busca em segundo plano para buscar arquivos grandes quando o trabalho de aplicativo ou serviço não estiver em execução
  • Verificar se há suporte
  • Iniciar uma busca em segundo plano
• Usar a API de Atribuição de Selo de Aplicativo e a API de Notificações para engajar novamente os usuários

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 realizem ações mesmo quando estiverem offline.

Por exemplo, um aplicativo de email pode permitir que seus usuários reduzam e enviem mensagens a qualquer momento. O front-end do aplicativo pode tentar enviar a mensagem imediatamente e, se o dispositivo estiver offline, o trabalho de serviço poderá capturar a solicitação com falha e usar a API de sincronização em segundo plano para adiar a tarefa até ser conectado.

Outro exemplo de uso da API de sincronização em segundo plano é carregar conteúdo em segundo plano para o usuário.

Verificar se há suporte

A API de sincronização em segundo plano está disponível no Microsoft Edge, mas você deve verificar se a API de sincronização em segundo plano tem suporte nos outros navegadores e dispositivos em que seu aplicativo é executado. Para garantir que a API de sincronização em segundo plano seja compatível, 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 trabalho de serviço.

• Solicitar a sincronização do frontend é bom quando você quer deixar o usuário encarregado de sincronizar depois 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 trabalho de 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 ServiceWorkerRegistration e um 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 o seguinte:

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 trabalho de serviço está em execução, um sync evento é enviado para o trabalho de serviço, que pode usá-lo para sincronizar os dados necessários. O sync evento pode ser escutado 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 ouvinte de sync eventos é adicionado no trabalho de serviço. Quando o ouvinte é chamado, o código verifica se a tag é 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á ao servidor as informações 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 forem executadas.

Para obter mais informações sobre o Sync evento, o ServiceWorkerRegistratione a SyncManager interface, consulte a especificação de rascunho da sincronização em segundo plano e a documentação da API de sincronização em segundo plano.

Aplicativo de demonstração: Sincronização em Segundo Plano do PWA

A Sincronização em Segundo Plano do PWA é um aplicativo de demonstração que usa a API de Sincronização em Segundo Plano para buscar informações mais tarde, se o usuário estiver offline:

• /pwa-background-sync/ - Leiame e código-fonte.
• Demonstração da API de Sincronização em Segundo Plano do PWA - demonstração ao vivo.

Para usar a demonstração:

1. Acesse a demonstração da API de Sincronização em Segundo Plano do PWA em uma nova janela ou guia.

   Instale o aplicativo:

2. Na barra de endereços, clique no aplicativo disponível. Instale o botão de demonstração da API de sincronização em segundo plano do PWA ().

   A caixa de diálogo de demonstração Instalar a API de Sincronização em Segundo Plano do PWA é aberta no Edge.

3. Clique no botão Instalar .

   A janela do aplicativo de demonstração de manipuladores de arquivos PWA é aberta. A caixa de diálogo Aplicativo instalado é aberta.

4. Clique no botão Permitir .

   O aplicativo de demonstração da API de Sincronização em Segundo Plano do PWA é aberto em uma janela dedicada. A caixa de diálogo Aplicativos do Windows indica se o aplicativo deve ser fixado na barra de tarefas.

5. Clique no botão Sim .

   Use o aplicativo, conectado à rede:

6. No aplicativo de demonstração da API de Sincronização em Segundo Plano do PWA instalado, na caixa de texto Comentário , insira um comentário, como Olá, e clique no botão Enviar .

   Uma mensagem é enviada. A mensagem que você inseriu aparece abaixo da caixa de texto Comentário, com o status inicial de Envio e, em seguida, o status: Enviado✅:

   

   Desconectar-se da rede:

7. Clique com o botão direito do mouse na janela do aplicativo e selecione Inspecionar.

   O DevTools é aberto em uma janela dedicada.

8. No DevTools, selecione a ferramenta Rede ().

9. Na lista suspensa de limitação de rede , em vez de Sem limitação, selecione Offline:

   

   Um ícone de aviso é adicionado à guia Rede para lembrá-lo de que há limitação de rede.

   Use o aplicativo, desconectado da rede:

10. No aplicativo de demonstração da API de Sincronização em Segundo Plano do PWA instalado, na caixa de texto Comentário , insira um comentário, como Olá novamente, e clique no botão Enviar .

    A mensagem que você inseriu aparece, momentaneamente com o status de Envio e, em seguida, com o status de Falha❌. O botão Tentar enviar novamente aparece dentro do retângulo da mensagem:

    

11. Clique no botão Tentar enviar novamente .

    Dentro do retângulo da mensagem, o status muda para Tentará mais tarde🛜, e o botão Tentar enviar novamente desaparece:

    

    Se o status permanecer com falha❌, você poderá redefinir o trabalho de serviço para que o status se torne Tentará mais tarde🛜, quando apropriado:

    1. No DevTools, selecione a ferramenta Aplicativo ().

    2. No painel de navegação à esquerda, selecione Trabalhadores de serviço e, no canto superior direito, clique em Cancelar registro.

    3. Na janela do aplicativo, clique com o botão direito do mouse na página da Web e selecione Atualizar.

    Conectar-se à rede:

12. Na janela dedicada do DevTools, na lista suspensa de limitação de rede , em vez de Offline, selecione Sem limitação.

    O ícone de aviso de limitação é removido da guia Rede .

    Use o aplicativo, conectado à rede novamente:

13. Alterne para o aplicativo de demonstração da API de Sincronização em Segundo Plano do PWA instalado.

    O status exibido é Enviado✅:

    

14. Como opção, clique com o botão direito do mouse na página da Web e selecione Atualizar.

    As mensagens são removidas.

Depurar sincronizações em segundo plano com o DevTools

Para testar seu código de sincronização em segundo plano, você não precisa ficar offline, ficar 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:

1. Abra o DevTools (F12).
2. SelecioneTrabalhadores do Serviço de Aplicativo>.
3. Digite o nome da marca que você usou ao registrar a sincronização no campo Entrada de sincronização .
4. Selecione o botão Sincronizar .

Você também pode registrar a atividade de sincronização em segundo plano gerada pelo seu aplicativo no DevTools, da seguinte maneira:

1. Abra o DevTools (F12).
2. SelecioneSincronização em Segundo Planodo Aplicativo>.
3. Selecione Iniciar gravação de eventos.

Os registros e expedições de sincronização aparecem na tabela do log de eventos:

Use a API de Sincronização em Segundo Plano Periódica para obter regularmente novos conteúdos

A API de Sincronização em Segundo Plano Periódica permite que os PWAs recuperem conteúdo novo periodicamente, em segundo plano, para que os usuários possam acessá-lo imediatamente quando abrirem o aplicativo novamente.

Usando a API de Sincronização em Segundo Plano Periódica, os PWAs não precisam baixar novo conteúdo (como novos artigos) enquanto o usuário está usando o aplicativo. Baixar conteúdo pode diminuir a experiência. Portanto, recupere o conteúdo em um momento mais conveniente.

Sincronização periódica quando em uma rede conhecida

A sincronização periódica ocorre apenas 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. A solicitação dessa permissão ocorre apenas uma vez, para um determinado aplicativo.

Para solicitar 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 exclusivo da marca permite o registro de 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 outros fatores em consideração antes de alertar o trabalho de serviço com um evento de sincronização periódico, como a conexão de rede e se o usuário se envolve regularmente com o aplicativo.

React a eventos de sincronização periódicos

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 o trabalho de serviço pode buscar novo conteúdo do servidor e armazená-lo no cache. Espera-se que essa função retorne uma Promise 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, consulte:

• Sincronização periódica em segundo plano da Web - rascunho de especificação.
• API de sincronização periódica em segundo plano da Web.

Aplicativo de demonstração: Dicas do DevTools

O DevTools Tips é um PWA que usa a API de Sincronização em Segundo Plano Periódica. 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, estejam online ou não.

Vá para o código-fonte no GitHub. Em particular, o aplicativo registra a sincronização periódica na função registerPeriodicSync . O código do service worker é onde o aplicativo escuta o periodicsync evento.

Depurar sincronizações periódicas em segundo plano com o DevTools

Você pode usar o DevTools para simular periodicsync eventos em vez de aguardar o intervalo mínimo.

Para simular o evento:

1. Abra o DevTools (F12).
2. SelecioneTrabalhadores do Serviço de Aplicativo>.
3. Digite o nome da tag que você usou ao registrar a sincronização periódica no campo de entrada Sincronização periódica .
4. Selecione o botão Sincronização Periódica .

Você também pode registrar a atividade periódica de sincronização em segundo plano gerada pelo seu aplicativo no DevTools:

1. Abra o DevTools (F12).
2. SelecioneSincronização em Segundo Plano Periódica doAplicativo>.
3. Selecione Iniciar gravação de eventos.

Os registros e despachos de sincronização periódicos aparecem na tabela do log de eventos.

Use a API de busca em segundo plano para buscar arquivos grandes quando o trabalho de aplicativo ou serviço não estiver em execução

A API de busca em segundo plano permite que os PWAs deleguem completamente o download de grandes quantidades de dados ao mecanismo do navegador. Dessa forma, o trabalho de aplicativo e serviço não precisa estar em execução enquanto o download está em andamento.

Essa API é útil para aplicativos que permitem que os usuários baixem arquivos grandes (como músicas, filmes ou podcasts) para casos de uso offline. Como o download é delegado ao mecanismo do navegador, que sabe como lidar com uma conexão instável 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 é compatível, 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 haver um identificador de cadeia de caracteres exclusivo para essa busca em segundo plano. fileUrls é a lista de arquivos a serem baixados, essa 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().

Usar a API de Atribuição de Selo de Aplicativo e a API de Notificações para engajar novamente os usuários

Use a API de Atribuição de Selo de Aplicativo e a API de Notificações para que os usuários saibam que tarefas em segundo plano, downloads ou conteúdo novo foram concluídos, sem interromper o 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 nos ícones de aplicativos na barra de tarefas e as notificações se integram ao centro de notificações do sistema.

Para saber como usar essas APIs, confira Reengajar os usuários com selos, notificações e mensagens por push.