Abilitare la sincronizzazione offline per l'app per dispositivi mobili CordovaEnable offline sync for your Cordova mobile app

Questa esercitazione descrive la funzionalità di sincronizzazione offline delle app per dispositivi mobili di Azure per Cordova.This tutorial introduces the offline sync feature of Azure Mobile Apps for Cordova. La sincronizzazione offline consente agli utenti finali di interagire con un'app—visualizzando, aggiungendo e modificando i dati—anche se non è disponibile una connessione di rete.Offline sync allows end users to interact with a mobile app—viewing, adding, or modifying data—even when there is no network connection. Le modifiche vengono archiviate in un database locale.Changes are stored in a local database. Quando il dispositivo torna online, vengono sincronizzate con il servizio remoto.Once the device is back online, these changes are synced with the remote service.

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.This tutorial is based on the Cordova quickstart solution for Mobile Apps that you create when you complete the tutorial [Apache Cordova quick start]. In questa esercitazione viene aggiornata la soluzione di avvio rapido per aggiungere le funzionalità offline delle app per dispositivi mobili di Azure.In this tutorial, you update the quickstart solution to add offline features of Azure Mobile Apps. Viene anche evidenziato il codice specifico per le funzionalità offline nell'app.We also highlight the offline-specific code in the app.

Per altre informazioni sulla funzionalità di sincronizzazione offline, vedere l'argomento Sincronizzazione di dati offline nelle app per dispositivi mobili di Azure.To learn more about the offline sync feature, see the topic [Offline Data Sync in Azure Mobile Apps]. Per informazioni dettagliate sull'utilizzo delle API, vedere la documentazione per le API.For details of API usage, see the API documentation.

Aggiungere la sincronizzazione offline alla soluzione di avvio rapidoAdd offline sync to the quickstart solution

È necessario aggiungere dall'app il codice di sincronizzazione offline.The offline sync code must be added to the app. 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.Offline sync requires the cordova-sqlite-storage plugin, which automatically gets added to your app when the Azure Mobile Apps plugin is included in the project. Il progetto di avvio rapido include entrambi questi plug-in.The Quickstart project includes both of these plugins.

  1. In Esplora soluzioni di Visual Studio,aprire index.js e sostituire il codice seguenteIn Visual Studio's Solution Explorer, open index.js and replace the following code

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

    con questo codice:with this code:

     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:Next, replace the following code:

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

    con questo codice:with this code:

     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.The preceding code additions initialize the local store and define a local table that matches the column values used in your Azure back end. Non è necessario includere tutti i valori delle colonne in questo codice. Il campo version viene gestito dal back-end per dispositivi mobili e viene usato per la risoluzione dei conflitti.(You don't need to include all column values in this code.) The version field is maintained by the mobile backend and is used for conflict resolution.

    Per ottenere un riferimento al contesto di sincronizzazione, chiamare getSyncContext.You get a reference to the sync context by calling 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() .The sync context helps preserve table relationships by tracking and pushing changes in all tables a client app has modified when .push() is called.

  3. Aggiornare l'URL dell'applicazione con l'URL dell'applicazione App per dispositivi mobili.Update the application URL to your Mobile App application URL.

  4. Quindi, sostituire il codice:Next, replace this code:

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

    con questo codice:with this code:

     // 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.The preceding code initializes the sync context and then calls getSyncTable (instead of getTable) to get a reference to the local table.

    Questo codice usa il database locale per tutte le operazioni di creazione, lettura, aggiornamento ed eliminazione (CRUD, Create, Read, Update, Delete) sulle tabelle.This code uses the local database for all create, read, update, and delete (CRUD) table operations.

    In questo esempio si esegue una semplice gestione degli errori nei conflitti di sincronizzazione.This sample performs simple error handling on sync conflicts. Una vera applicazione gestirà i diversi errori come condizioni di rete, conflitti di server e altro.A real application would handle the various errors like network conditions, server conflicts, and others. Per esempi di codice, vedere l' esempio di sincronizzazione offline.For code examples, see the [offline sync sample].

  5. Successivamente, aggiungere questa funzione per eseguire la sincronizzazione effettiva.Next, add this function to perform the actual sync.

     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().You decide when to push changes to the Mobile App backend by calling syncContext.push(). Ad esempio, è possibile chiamare syncBackend in un gestore eventi associato a un pulsante di sincronizzazione.For example, you could call syncBackend in a button event handler tied to a sync button.

Considerazioni sulla sincronizzazione offlineOffline sync considerations

Nell'esempio, il metodo push di syncContext viene chiamato solo all'avvio dell'app nella funzione di callback per l'accesso.In the sample, the push method of syncContext is only called on app startup in the callback function for login. In un'applicazione vera e propria è anche possibile attivare questa funzionalità di sincronizzazione manualmente o quando lo stato della rete cambia.In a real-world application, you could also make this sync functionality triggered manually or when the network state changes.

Quando viene effettuato il pull in una tabella con aggiornamenti locali in sospeso rilevati dal contesto, tale operazione attiva automaticamente un'operazione push.When a pull is executed against a table that has pending local updates tracked by the context, that pull operation automatically triggers a push. Quando si aggiornano, aggiungono e completano elementi in questo esempio, è possibile omettere la chiamata push esplicita, perché potrebbe essere ridondante.When refreshing, adding, and completing items in this sample, you can omit the explicit push call, since it may be redundant.

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.In the provided code, all records in the remote todoItem table are queried, but it is also possible to filter records by passing a query id and query to push. Per altre informazioni, vedere la sezione Sincronizzazione incrementale in Sincronizzazione di dati offline nelle app per dispositivi mobili di Azure.For more information, see the section Incremental Sync in [Offline Data Sync in Azure Mobile Apps].

(Facoltativo) Disabilitare l'autenticazione(Optional) Disable authentication

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.If you don't want to set up authentication before testing offline sync, comment out the callback function for login, but leave the code inside the callback function uncommented. Dopo l'impostazione come commento delle righe di accesso, il codice sarà come segue:After commenting out the login lines, the code follows:

  // 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.Now, the app syncs with the Azure backend when you run the app.

Eseguire l'app clientRun the client app

Con la sincronizzazione offline abilitata, è possibile eseguire l'applicazione client almeno una volta in ogni piattaforma per popolare il database di archiviazione locale.With offline sync now enabled, you can run the client application at least once on each platform to populate the local store database. Più avanti viene simulato uno scenario offline e vengono modificati i dati nell'archivio locale mentre l'app è offline.Later, simulate an offline scenario and modify the data in the local store while the app is offline.

(Facoltativo) Testare il comportamento di sincronizzazione(Optional) Test the sync behavior

In questa sezione viene modificato il progetto client per simulare uno scenario offline usando un URL di applicazione non valido per il back-end.In this section, you modify the client project to simulate an offline scenario by using an invalid application URL for your backend. 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.When you add or change data items, these changes are held in the local store, but are not synced to the backend data store until the connection is re-established.

  1. In 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:In the Solution Explorer, open the index.js project file and change the application URL to point to an invalid URL, like the following code:

     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.In index.html, update the CSP <meta> element with the same invalid URL.

     <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.Build and run the client app and notice that an exception is logged in the console when the app attempts to sync with the backend after login. 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.Any new items you add exist only in the local store until they are pushed to the mobile backend. L'app client si comporta come se fosse connessa al back-end.The client app behaves as if it is connected to the backend.

  4. Chiudere l'app e riavviarla per verificare che i nuovi elementi creati siano salvati in modo permanente nell'archivio locale.Close the app and restart it to verify that the new items you created are persisted to the local store.

  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.(Optional) Use Visual Studio to view your Azure SQL Database table to see that the data in the backend database has not changed.

    In Visual Studio aprire Esplora server.In Visual Studio, open Server Explorer. Passare al database in Azure->Database SQL.Navigate to your database in Azure->SQL Databases. Fare clic con il pulsante destro del mouse sul database e scegliere Apri in Esplora oggetti di SQL Server.Right-click your database and select Open in SQL Server Object Explorer. È ora possibile passare alla tabella di database SQL e al relativo contenuto.Now you can browse to your SQL database table and its contents.

(Facoltativo) Testare la riconnessione al back-end mobile(Optional) Test the reconnection to your mobile backend

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.In this section, you reconnect the app to the mobile backend, which simulates the app coming back to an online state. Quando si esegue l'accesso, i dati verranno sincronizzati con il back-end dell'app per dispositivi mobili.When you log in, data is synced to your mobile backend.

  1. Riaprire index. js e ripristinare l'URL dell'applicazione.Reopen index.js and restore the application URL.
  2. Riaprire index.htnl e correggere l'URL dell'applicazione nell'elemento <meta> CSP.Reopen index.html and correct the application URL in the CSP <meta> element.
  3. Ricompilare ed eseguire l'app client.Rebuild and run the client app. L'app prova a eseguire la sincronizzazione con il back-end dell'app per dispositivi mobili dopo l'accesso.The app attempts to sync with the mobile app backend after login. Verificare che non vengano registrate eccezioni nella console di debug.Verify that no exceptions are logged in the debug console.
  4. (Facoltativo) Visualizzare i dati aggiornati usando Esplora oggetti di SQL Server o uno strumento REST come Fiddler.(Optional) View the updated data using either SQL Server Object Explorer or a REST tool like Fiddler. Si noti che i dati sono stati sincronizzati tra il database di back-end e l'archivio locale.Notice the data has been synchronized between the backend database and the local store.

    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.Notice the data has been synchronized between the database and the local store and contains the items you added while your app was disconnected.

Risorse aggiuntiveAdditional resources

Passaggi successiviNext steps

  • Nell'esempio di sincronizzazione offline sono disponibili informazioni sulle funzionalità di sincronizzazione offline più avanzate, ad esempio la risoluzione dei conflitti.Review more advanced offline sync features such as conflict resolution in the [offline sync sample]
  • Vedere le informazioni di riferimento sull'API di sincronizzazione offline nella documentazione per l'API.Review the offline sync API reference in the API documentation.