Povolení offline synchronizace pro mobilní aplikaci Cordova

Článek
06/25/2019

Přehled

Tento kurz představuje funkci offline synchronizace Azure Mobile Apps pro Cordovu. Offline synchronizace umožňuje koncovým uživatelům pracovat s mobilní aplikací – prohlížením, přidáváním nebo úpravou dat – i v případě, že připojení k síti neexistuje. Změny se ukládají v místní databázi. Jakmile je zařízení zase online, tyto změny se synchronizují se vzdálenou službou.

Tento kurz je založený na řešení Rychlý start cordovy pro Mobile Apps, které vytvoříte při dokončení kurzu Rychlý start apache Cordova. V tomto kurzu aktualizujete řešení pro rychlý start a přidáte offline funkce Azure Mobile Apps. Zvýrazníme také kód specifický pro offline režim v aplikaci.

Další informace o funkci offline synchronizace najdete v tématu Offline synchronizace dat v Azure Mobile Apps. Podrobnosti o využití rozhraní API najdete v dokumentaci k rozhraní API.

Přidání offline synchronizace do řešení pro rychlý start

Do aplikace se musí přidat offline synchronizační kód. Offline synchronizace vyžaduje modul plug-in cordova-sqlite-storage, který se automaticky přidá do vaší aplikace, když je modul plug-in Azure Mobile Apps součástí projektu. Projekt Rychlý start zahrnuje oba tyto moduly plug-in.

V Průzkumník řešení sady Visual Studio otevřete index.js a nahraďte následující kód.

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

tímto kódem:

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

Dále nahraďte následující kód:
```
 client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');
```
tímto kódem:
```
 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();
```
Předchozí přidání kódu inicializuje místní úložiště a definuje místní tabulku, která odpovídá hodnotám sloupců použitým v back-endu Azure. (V tomto kódu nemusíte zahrnout všechny hodnoty sloupců.) Toto version pole udržuje mobilní back-end a používá se k řešení konfliktů.

Odkaz na kontext synchronizace získáte voláním metody getSyncContext. Kontext synchronizace pomáhá zachovat relace mezi tabulkami sledováním a nasdílením změn ve všech tabulkách, které klientská aplikace změnila při .push() zavolání.
Aktualizujte adresu URL aplikace na adresu URL aplikace mobilní aplikace.

Dále nahraďte tento kód:

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

tímto kódem:

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

Předchozí kód inicializuje kontext synchronizace a potom volá getSyncTable (místo getTable), aby získal odkaz na místní tabulku.

Tento kód používá místní databázi pro všechny operace vytvoření, čtení, aktualizace a odstranění tabulky (CRUD).

Tato ukázka provádí jednoduché zpracování chyb při konfliktech synchronizace. Skutečná aplikace by zpracovávala různé chyby, jako jsou síťové podmínky, konflikty serveru a další. Příklady kódu najdete v ukázce offline synchronizace.

Dále přidejte tuto funkci, abyste provedli skutečnou synchronizaci.

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

Rozhodnete se, kdy nasdílíte změny do back-endu mobilní aplikace voláním syncContext.push(). Můžete například volat syncBackend v obslužné rutině události tlačítka svázané s tlačítkem synchronizace.

Aspekty offline synchronizace

V ukázce se metoda pushsyncContext volá pouze při spuštění aplikace ve funkci zpětného volání pro přihlášení. V reálné aplikaci můžete také tuto funkci synchronizace aktivovat ručně nebo při změně stavu sítě.

Při spuštění přijetí změn v tabulce, která obsahuje čekající místní aktualizace sledované kontextem, tato operace přijetí změn automaticky aktivuje nabízení. Při aktualizaci, přidávání a dokončování položek v této ukázce můžete explicitní nabízené volání vynechat, protože může být redundantní.

V zadaném kódu se dotazují všechny záznamy ve vzdálené tabulce todoItem, ale je také možné filtrovat záznamy předáním ID dotazu a dotazu, který se má odeslat. Další informace najdete v části Přírůstková synchronizace v offline synchronizaci dat v Azure Mobile Apps.

(Volitelné) Zakázání ověřování

Pokud nechcete nastavit ověřování před testováním offline synchronizace, zakomentujte funkci zpětného volání pro přihlášení, ale nechte kód uvnitř funkce zpětného volání nekommentovaný. Po zakomentování přihlašovacích řádků kód:

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

Aplikace se teď při spuštění aplikace synchronizuje s back-endem Azure.

Spuštění klientské aplikace

Když je teď povolená offline synchronizace, můžete klientskou aplikaci spustit alespoň jednou na každé platformě a naplnit tak místní databázi úložiště. Později simulovat offline scénář a upravit data v místním úložišti, když je aplikace offline.

(Volitelné) Testování chování synchronizace

V této části upravíte projekt klienta tak, aby simuloval offline scénář pomocí neplatné adresy URL aplikace pro váš back-end. Když přidáte nebo změníte datové položky, budou tyto změny uloženy v místním úložišti, ale nebudou se synchronizovat s back-endovým úložištěm dat, dokud se připojení znovu nenaváže.

V Průzkumník řešení otevřete soubor projektu index.js a změňte adresu URL aplikace tak, aby odkazovat na neplatnou adresu URL, například na následující kód:
```
 client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net-fail');
```

V index.html aktualizujte element CSP <meta> stejnou neplatnou adresou URL.

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

Sestavte a spusťte klientskou aplikaci a všimněte si, že se v konzole zaprotokoluje výjimka, když se aplikace po přihlášení pokusí synchronizovat s back-endem. Všechny nové položky, které přidáte, existují pouze v místním úložišti, dokud se nenasdílí do mobilního back-endu. Klientská aplikace se chová, jako by byla připojena k back-endu.
Zavřete aplikaci a restartujte ji, abyste ověřili, že nové položky, které jste vytvořili, jsou trvalé v místním úložišti.
(Volitelné) Pomocí sady Visual Studio zobrazte tabulku databáze Azure SQL, abyste viděli, že se data v back-endové databázi nezměnila.

V sadě Visual Studio otevřete Průzkumníka serveru. Přejděte do databáze ve služběAzure-SQL> Database. Klikněte pravým tlačítkem myši na databázi a vyberte Otevřít v SQL Server Průzkumník objektů. Teď můžete procházet tabulku databáze SQL a její obsah.

(Volitelné) Otestování opětovného připojení k mobilnímu back-endu

V této části znovu připojíte aplikaci k mobilnímu back-endu, který simuluje, že se aplikace vrátí do online stavu. Když se přihlásíte, data se synchronizují s mobilním back-endem.

Znovu otevřete index.js a obnovte adresu URL aplikace.
Znovu otevřete index.html a opravte adresu URL aplikace v elementu CSP <meta> .
Znovu sestavte a spusťte klientskou aplikaci. Aplikace se po přihlášení pokusí synchronizovat s back-endem mobilní aplikace. Ověřte, že v konzole ladění nejsou zaprotokolovány žádné výjimky.
(Volitelné) Zobrazte aktualizovaná data pomocí nástroje SQL Server Průzkumník objektů nebo REST, jako je Fiddler. Všimněte si, že data byla synchronizována mezi back-endovou databází a místním úložištěm.

Všimněte si, že data se mezi databází a místním úložištěm synchronizovala a obsahuje položky, které jste přidali při odpojení aplikace.

Další materiály

Další kroky

Projděte si pokročilejší funkce offline synchronizace, jako je řešení konfliktů v ukázce offline synchronizace.
Projděte si referenční informace k rozhraní API pro offline synchronizaci v dokumentaci k rozhraní API.

Sdílet prostřednictvím

Povolení offline synchronizace pro mobilní aplikaci Cordova

Přehled

Přidání offline synchronizace do řešení pro rychlý start

Aspekty offline synchronizace

(Volitelné) Zakázání ověřování

Spuštění klientské aplikace

(Volitelné) Testování chování synchronizace

(Volitelné) Otestování opětovného připojení k mobilnímu back-endu

Další materiály

Další kroky

Další materiály