Ative a sincronização offline para a sua aplicação móvel Cordova

  • Artigo

Descrição Geral

Este tutorial introduz a funcionalidade de sincronização offline de Azure Mobile Apps para Cordova. A sincronização offline permite que os utilizadores finais interajam com uma aplicação móvel — visualização, adição ou modificação de dados — mesmo quando não há ligação à rede. As alterações são armazenadas numa base de dados local. Uma vez que o dispositivo está novamente on-line, estas alterações são sincronizadas com o serviço remoto.

Este tutorial baseia-se na solução de arranque rápido da Cordova para Aplicações Móveis que cria quando completa o início rápido do tutorial Apache Cordova. Neste tutorial, atualiza a solução quickstart para adicionar funcionalidades offline das Aplicações Móveis Azure. Destacamos também o código específico offline na aplicação.

Para saber mais sobre a funcionalidade de sincronização offline, consulte o tópico Offline Data Sync em Azure Mobile Apps. Para mais informações sobre a utilização da API, consulte a documentação da API.

Adicione sincronização offline à solução de arranque rápido

O código de sincronização offline deve ser adicionado à aplicação. A sincronização offline requer o plugin de armazenamento de cordova-sqlite, que é automaticamente adicionado à sua aplicação quando o plugin Azure Mobile Apps está incluído no projeto. O projeto Quickstart inclui ambos estes plugins.

  1. Na Explorador de Soluções do Visual Studio, abra index.js e substitua o seguinte código

     var client,            // Connection to the Azure Mobile App backend
    todoItemTable;      // Reference to a table endpoint on backend

    por este código:

     var client,            // Connection to the Azure Mobile App backend
    todoItemTable,      // Reference to a table endpoint on backend
    syncContext;        // Reference to offline data sync context

  2. Em seguida, substitua o seguinte código:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');

    por este código:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');
 var store = new WindowsAzure.MobileServiceSqliteStore('store.db');

 store.defineTable({
   name: 'todoitem',
   columnDefinitions: {
       id: 'string',
       text: 'string',
       complete: 'boolean',
       version: 'string'
   }
 });

 // Get the sync context from the client
 syncContext = client.getSyncContext();

    As adições de código anteriores inicializam a loja local e definem uma tabela local que corresponda aos valores da coluna utilizada na parte traseira do Azure. (Não é necessário incluir todos os valores da coluna neste código.) O version campo é mantido pelo backend móvel e é usado para a resolução de conflitos.

    Obtém-se uma referência ao contexto de sincronização chamando getSyncContext. O contexto de sincronização ajuda a preservar as relações de mesa, rastreando e empurrando mudanças em todas as tabelas que uma aplicação do cliente modificou quando .push() é chamada.

  3. Atualize o URL da aplicação para o URL da aplicação da Aplicação Móvel.

  4. Em seguida, substitua este código:

     todoItemTable = client.getTable('todoitem'); // todoitem is the table name

    por este código:

     // Initialize the sync context with the store
 syncContext.initialize(store).then(function () {

 // Get the local table reference.
 todoItemTable = client.getSyncTable('todoitem');

 syncContext.pushHandler = {
     onConflict: function (pushError) {
         // Handle the conflict.
         console.log("Sync conflict! " + pushError.getError().message);
         // Update failed, revert to server's copy.
         pushError.cancelAndDiscard();
       },
       onError: function (pushError) {
           // Handle the error
           // In the simulated offline state, you get "Sync error! Unexpected connection failure."
           console.log("Sync error! " + pushError.getError().message);
       }
 };

 // Call a function to perform the actual sync
 syncBackend();

 // Refresh the todoItems
 refreshDisplay();

 // Wire up the UI Event Handler for the Add Item
 $('#add-item').submit(addItemHandler);
 $('#refresh').on('click', refreshDisplay);

    O código anterior inicializa o contexto de sincronização e, em seguida, chama getSyncTable (em vez de getTable) para obter uma referência à tabela local.

    Este código utiliza a base de dados local para todas as operações de tabela de criação, leitura, atualização e exclusão (CRUD).

    Esta amostra executa um simples manuseamento de erros em conflitos de sincronização. Uma aplicação real lidaria com os vários erros, como condições de rede, conflitos de servidores e outros. Para exemplos de código, consulte a amostra de sincronização offline.

  5. Em seguida, adicione esta função para executar a sincronização real.

     function syncBackend() {

   // Sync local store to Azure table when app loads, or when login complete.
   syncContext.push().then(function () {
       // Push completed

   });

   // Pull items from the Azure table after syncing to Azure.
   syncContext.pull(new WindowsAzure.Query('todoitem'));
 }

    Você decide quando empurrar as alterações para o backend da Aplicação Móvel chamando syncContext.push(). Por exemplo, pode chamar syncBackend num manipulador de eventos de botão ligado a um botão de sincronização.

Considerações de sincronização offline

Na amostra , o método push do syncContext é apenas chamado para o arranque de aplicações na função de retorno para login. Numa aplicação no mundo real, também pode fazer esta funcionalidade de sincronização ativada manualmente ou quando o estado da rede muda.

Quando uma pressão é executada contra uma tabela que tem atualizações locais pendentes rastreadas pelo contexto, essa operação de puxar automaticamente dispara um empurrão. Ao refrescar, adicionar e completar itens nesta amostra, pode omitir a chamada de impulso explícita, uma vez que pode ser redundante.

No código fornecido, todos os registos na tabela todoItem remota são consultados, mas também é possível filtrar registos passando um id de consulta e consulta para empurrar. Para obter mais informações, consulte a secção Incremental Sync em Offline Data Sync em Azure Mobile Apps.

(Opcional) Desativar a autenticação

Se não pretender configurar a autenticação antes de testar a sincronização offline, comente a função de retorno para o início, mas deixe o código dentro da função de retorno não codificado. Depois de comentar as linhas de login, o código segue:

  // Login to the service.
  // client.login('twitter')
  //    .then(function () {
    syncContext.initialize(store).then(function () {
      // Leave the rest of the code in this callback function  uncommented.
            ...
    });
  // }, handleError);

Agora, a aplicação sincroniza-se com o backend do Azure quando executar a aplicação.

Executar a aplicação do cliente

Com a sincronização offline agora ativada, pode executar a aplicação do cliente pelo menos uma vez em cada plataforma para preencher a base de dados da loja local. Mais tarde, simular um cenário offline e modificar os dados na loja local enquanto a aplicação estiver offline.

(Opcional) Teste o comportamento de sincronização

Nesta secção, modifica o projeto do cliente para simular um cenário offline utilizando um URL de aplicação inválido para o seu backend. Quando adiciona ou altera os itens de dados, estas alterações são mantidas na loja local, mas não são sincronizadas na loja de dados de backend até que a ligação seja restabelecida.

  1. No Explorador de Soluções, abra o ficheiro de projeto index.js e altere o URL da aplicação para apontar para um URL inválido, como o seguinte código:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net-fail');

  2. Em index.html, atualize o elemento CSP <meta> com o mesmo URL inválido.

     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: http://yourmobileapp.azurewebsites.net-fail; style-src 'self'; media-src *">

  3. Construa e execute a aplicação do cliente e note que uma exceção é registada na consola quando a aplicação tenta sincronizar com o backend após o início. Quaisquer novos itens que adicione só existem na loja local até que sejam empurrados para o backend móvel. A aplicação do cliente comporta-se como se estivesse ligada ao backend.

  4. Feche a aplicação e reinicie-a para verificar se os novos itens que criou são persistidos na loja local.

  5. (Opcional) Utilize o Visual Studio para ver a sua tabela de bases de dados SQL do Azure para ver se os dados na base de dados de backend não foram alterados.

    No Estúdio Visual, abra o Server Explorer. Navegue na sua base de dados em Bases de DadosAzure-SQL>. Clique com o botão direito na sua base de dados e selecione Abrir em SQL Server Object Explorer. Agora pode navegar para a sua tabela de base de dados SQL e o seu conteúdo.

(Opcional) Teste a reconexão ao seu backend móvel

Nesta secção, volta a ligar a app ao backend móvel, que simula o regresso da app a um estado online. Quando inicia sessão, os dados são sincronizados com o seu backend móvel.

  1. Reabra index.js e restaure o URL de aplicação.

  2. Reabre index.html e corrija o URL de aplicação no elemento CSP <meta> .

  3. Reconstruir e executar a aplicação do cliente. A aplicação tenta sincronizar-se com o backend da aplicação móvel após o login. Verifique se não há exceções registadas na consola de depuração.

  4. (Opcional) Consulte os dados atualizados utilizando SQL Server Object Explorer ou uma ferramenta REST como o Fiddler. Note que os dados foram sincronizados entre a base de dados de backend e a loja local.

    Note que os dados foram sincronizados entre a base de dados e a loja local e contém os itens que adicionou enquanto a sua aplicação foi desligada.

Recursos adicionais

Passos seguintes