Adicionar sincronização de dados offline ao seu aplicativo Apache Cordova

Artigo
12/13/2023

Este tutorial aborda o recurso de sincronização offline dos Aplicativos Móveis do Azure para o aplicativo de início rápido Apache Cordova. A sincronização offline permite que os usuários finais interajam com um aplicativo móvel, visualizando, adicionando ou modificando dados, mesmo quando não há conexão de rede. As alterações são armazenadas em um banco de dados local. Quando o dispositivo estiver online novamente, essas alterações serão sincronizadas com o back-end remoto.

Antes de iniciar este tutorial, você deve ter concluído o Tutorial de início rápido do Apache Cordova, que inclui a criação de um serviço de back-end adequado.

Para saber mais sobre o recurso de sincronização offline, consulte o tópico Sincronização de Dados Offline em Aplicativos Móveis do Azure.

Atualizar a aplicação para suportar a sincronização offline

Na operação on-line, você usa getTable() para obter uma referência à tabela on-line. Ao implementar recursos offline, você usa getSyncTable() para obter uma referência ao repositório SQlite offline. A loja SQlite é fornecida pelo plugin Apache Cordova.cordova-sqlite-storage

Nota

A sincronização offline só está disponível para Android e iOS. Ele não funcionará dentro da especificação da plataforma do navegador.

No ficheiro www/js/index.js:

Atualize o método para inicializar o initializeStore() banco de dados SQlite local:

function initializeStore() {
    store = new WindowsAzure.MobileServiceSqliteStore();

    var tableDefinition = {
        name: 'todoitem',
        columnDefinitions: {
            id: 'string',
            deleted: 'boolean',
            version: 'string',
            Text: 'string',
            Complete: 'boolean'
        }
    };

    return store
        .defineTable(tableDefinition)
        .then(initializeSyncContext);
}

function initializeSyncContext() {
    syncContext = client.getSyncContext();
    syncContext.pushHandler = {
        onConflict: function (pushError) {
            return pushError.cancelAndDiscard();
        },
        onError: function (pushError) {
            return pushError.cancelAndDiscard();
        }
    };
    return syncContext.initialize(store);
}

Atualize o setup() método para usar a versão offline da tabela:

function setup() {
    todoTable = client.getSyncTable('todoitem');
    refreshDisplay();
    addItemEl.addEventListener('submit', addItemHandler);
    refreshButtonEl.addEventListener('click', refreshDisplay);
}

Substitua o syncLocalTable() método que sincronizará os dados na loja offline com a loja online:

function syncLocalTable() {
    return syncContext.push().then(function () {
        return syncContext.pull(new WindowsAzure.Query('todoitem'));
    });
}

Criar a aplicação

Execute os seguintes comandos para criar o aplicativo Android:

cordova clean android
cordova build android

Você pode executar o aplicativo:

cordova run android

Teste no Visual Studio Code

Você pode usar o depurador no Visual Studio Code se tiver a extensão Cordova Tools instalada. Clique no depurador e, em seguida, crie um launch.json ficheiro. Quando solicitado, selecione Cordova e, em seguida, selecione as configurações (como Executar Android no emulador). Depois de criar uma configuração de inicialização, você pode executar o aplicativo no depurador. Ele será lançado em seu emulador de escolha. No entanto, agora você poderá ver a saída de depuração em seu console de depuração.

Testar a aplicação

Nesta seção, teste o comportamento com o WiFi ativado e desative o WiFi para criar um cenário offline.

Os itens na lista todo são armazenados em um banco de dados SQLite no dispositivo. Quando você atualiza os dados, as alterações são enviadas para o serviço (push). Em seguida, o aplicativo solicita novos itens (pull). No tutorial, a atualização é selecionada pressionando um ícone ou usando "pull to refresh".

Coloque o dispositivo ou simulador no Modo Avião.
Adicione alguns itens Todo ou marque alguns itens como concluídos.
Feche o dispositivo ou simulador (ou feche o aplicativo à força) e reinicie o aplicativo.
Verifique se as alterações foram persistentes no dispositivo.
Exiba o conteúdo da tabela Azure TodoItem . Use uma ferramenta SQL, como o SQL Server Management Studio, ou um cliente REST, como Fiddler ou Postman. Verifique se os novos itens não foram sincronizados com o servidor
Ligue o Wi-Fi no dispositivo ou simulador.
Atualize os dados, seja "puxando para atualizar" ou pressionando o ícone de atualização.
Revise os dados da tabela TodoItem novamente. Os itens novos e alterados devem aparecer agora.

Próximos passos

Continue a implementar a autenticação.

Partilhar via