Condividi tramite

Abilitare la sincronizzazione offline per l'app per dispositivi mobili Cordova

  • Articolo

Panoramica

Questa esercitazione descrive la funzionalità di sincronizzazione offline delle app per dispositivi mobili di Azure per Cordova. La sincronizzazione offline consente agli utenti finali di interagire con un'app per dispositivi mobili, visualizzando, aggiungendo o modificando i dati, anche quando non è presente alcuna connessione di rete. Le modifiche vengono archiviate in un database locale. Quando il dispositivo torna online, vengono sincronizzate con il servizio remoto.

Questa esercitazione si basa sulla soluzione di avvio rapido Cordova per le app per dispositivi mobili create quando si completa l'esercitazione sull' avvio rapido di Apache Cordova. In questa esercitazione viene aggiornata la soluzione di avvio rapido per aggiungere le funzionalità offline delle app per dispositivi mobili di Azure. Viene anche evidenziato il codice specifico per le funzionalità offline nell'app.

Per altre informazioni sulla funzionalità di sincronizzazione offline, vedere l'argomento Sincronizzazione di dati offline nelle app per dispositivi mobili di Azure. Per informazioni dettagliate sull'utilizzo delle API, vedere la documentazione per le API.

Aggiungere la sincronizzazione offline alla soluzione di avvio rapido

È necessario aggiungere dall'app il codice di sincronizzazione offline. La sincronizzazione offline richiede il plug-in cordova-sqlite-storage, che viene aggiunto automaticamente all'app quando il plug-in App per dispositivi mobili di Azure è incluso nel progetto. Il progetto di avvio rapido include entrambi questi plug-in.

  1. In Esplora soluzioni di Visual Studio,aprire index.js e sostituire il codice seguente

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

    Con questo:

     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. Sostituire quindi il codice seguente:

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

    Con questo:

     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();

    Le aggiunte di codice precedenti inizializzano l'archivio locale e definiscono una tabella locale che corrisponde ai valori di colonna usati nel back-end di Azure. Non è necessario includere tutti i valori di colonna in questo codice. Il version campo viene gestito dal back-end mobile e viene usato per la risoluzione dei conflitti.

    Per ottenere un riferimento al contesto di sincronizzazione, chiamare getSyncContext. Il contesto di sincronizzazione aiuta a mantenere le relazioni tra tabelle rilevando le modifiche apportate da un'app client in tutte le tabelle ed eseguendone il push quando viene chiamato .push() .

  3. Aggiornare l'URL dell'applicazione con l'URL dell'applicazione App per dispositivi mobili.

  4. Quindi, sostituire il codice:

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

    Con questo:

     // 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);

    Il codice precedente inizializza il contesto di sincronizzazione e quindi chiama getSyncTable (invece di getTable) per ottenere un riferimento alla tabella locale.

    Questo codice usa il database locale per tutte le operazioni di creazione, lettura, aggiornamento ed eliminazione (CRUD, Create, Read, Update, Delete) sulle tabelle.

    In questo esempio si esegue una semplice gestione degli errori nei conflitti di sincronizzazione. Una vera applicazione gestirà i diversi errori come condizioni di rete, conflitti di server e altro. Per esempi di codice, vedere l' esempio di sincronizzazione offline.

  5. Successivamente, aggiungere questa funzione per eseguire la sincronizzazione effettiva.

     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'));
 }

    Decidere quando effettuare il push delle modifiche nel back-end dell'app per dispositivi mobili chiamando syncContext.push(). Ad esempio, è possibile chiamare syncBackend in un gestore eventi associato a un pulsante di sincronizzazione.

Considerazioni sulla sincronizzazione offline

Nell'esempio, il metodo push di syncContext viene chiamato solo all'avvio dell'app nella funzione di callback per l'accesso. In un'applicazione vera e propria è anche possibile attivare questa funzionalità di sincronizzazione manualmente o quando lo stato della rete cambia.

Quando viene effettuato il pull in una tabella con aggiornamenti locali in sospeso rilevati dal contesto, tale operazione attiva automaticamente un'operazione push. Quando si aggiornano, aggiungono e completano elementi in questo esempio, è possibile omettere la chiamata push esplicita, perché potrebbe essere ridondante.

Nel codice fornito viene eseguita una query su tutti i record presenti nella tabella TodoItem remota, ma è anche possibile filtrare i record passando un ID query e una query a push. Per altre informazioni, vedere la sezione Sincronizzazione incrementale in Sincronizzazione dati offline in App per dispositivi mobili di Azure.

(Facoltativo) Disabilitare l'autenticazione

Se non si vuole configurare l'autenticazione prima di testare la sincronizzazione offline, impostare come commento la funzione di callback per l'accesso, ma lasciare il codice all'interno della funzione di callback in cui sono stati rimossi i commenti. Dopo l'impostazione come commento delle righe di accesso, il codice sarà come 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);

A questo punto, l'app viene sincronizzata con il back-end di Azure quando si esegue l'app.

Eseguire l'app client

Con la sincronizzazione offline abilitata, è possibile eseguire l'applicazione client almeno una volta in ogni piattaforma per popolare il database di archiviazione locale. Più avanti viene simulato uno scenario offline e vengono modificati i dati nell'archivio locale mentre l'app è offline.

(Facoltativo) Testare il comportamento di sincronizzazione

In questa sezione viene modificato il progetto client per simulare uno scenario offline usando un URL di applicazione non valido per il back-end. Quando si aggiungono o si modificano elementi di dati, queste modifiche vengono conservate nell'archivio locale, ma non vengono sincronizzate con l'archivio dati back-end fino a quando non viene ristabilita la connessione.

  1. Nel Esplora soluzioni aprire il file di progetto index.js e modificare l'URL dell'applicazione in modo che punti a un URL non valido, come nel codice seguente:

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

  2. Nel file Index. HTML aggiornare l'elemento <meta> CSP con lo stesso URL non valido.

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

  3. Compilare ed eseguire l'app client e notare che un'eccezione viene registrata nella console quando l'app prova a sincronizzarsi con il back-end dopo l'accesso. Gli eventuali nuovi elementi aggiunti esistono solo nell'archivio locale fino a quando non ne viene effettuato il push nel back-end dell'app per dispositivi mobili. L'app client si comporta come se fosse connessa al back-end.

  4. Chiudere l'app e riavviarla per verificare che i nuovi elementi creati siano salvati in modo permanente nell'archivio locale.

  5. (Facoltativo) Usare Visual Studio per visualizzare la tabella di database SQL di Azure per verificare che i dati nel database back-end non siano cambiati.

    In Visual Studio aprire Esplora server. Passare al database nei database AZURE-SQL>. Fare clic con il pulsante destro del mouse sul database e scegliere Apri in Esplora oggetti di SQL Server. È ora possibile passare alla tabella di database SQL e al relativo contenuto.

(Facoltativo) Testare la riconnessione al back-end mobile

In questa sezione, l'app viene riconnessa al back-end del'app per dispositivi mobili, azione che simula il ritorno dell'app allo stato online. Quando si esegue l'accesso, i dati verranno sincronizzati con il back-end dell'app per dispositivi mobili.

  1. Riaprire index. js e ripristinare l'URL dell'applicazione.

  2. Riaprire index.htnl e correggere l'URL dell'applicazione nell'elemento <meta> CSP.

  3. Ricompilare ed eseguire l'app client. L'app prova a eseguire la sincronizzazione con il back-end dell'app per dispositivi mobili dopo l'accesso. Verificare che non vengano registrate eccezioni nella console di debug.

  4. (Facoltativo) Visualizzare i dati aggiornati usando Esplora oggetti di SQL Server o uno strumento REST come Fiddler. Si noti che i dati sono stati sincronizzati tra il database di back-end e l'archivio locale.

    Si noti che i dati sono stati sincronizzati tra il database e l'archivio locale e includono gli elementi aggiunti mentre l'app era disconnessa.

Risorse aggiuntive

Passaggi successivi