Włączanie synchronizacji w trybie offline dla aplikacji mobilnej Cordova

Artykuł
06/25/2019

Omówienie

W tym samouczku przedstawiono funkcję synchronizacji w trybie offline usługi Azure Mobile Apps for Cordova. Synchronizacja w trybie offline umożliwia użytkownikom końcowym interakcję z aplikacją mobilną — wyświetlanie, dodawanie lub modyfikowanie danych — nawet wtedy, gdy nie ma połączenia sieciowego. Zmiany są przechowywane w lokalnej bazie danych. Po powrocie urządzenia do trybu online te zmiany są synchronizowane z usługą zdalną.

Ten samouczek jest oparty na rozwiązaniu Szybkiego startu cordova dla aplikacji mobilnych tworzonych po ukończeniu samouczka Apache Cordova — Szybki start. W tym samouczku zaktualizujesz rozwiązanie Szybki start, aby dodać funkcje trybu offline usługi Azure Mobile Apps. Wyróżniamy również kod specyficzny dla trybu offline w aplikacji.

Aby dowiedzieć się więcej na temat funkcji synchronizacji w trybie offline, zobacz temat Offline Data Sync in Azure Mobile Apps (Synchronizacja danych w trybie offline w usłudze Azure Mobile Apps). Aby uzyskać szczegółowe informacje o użyciu interfejsu API, zobacz dokumentację interfejsu API.

Dodawanie synchronizacji w trybie offline do rozwiązania Szybki start

Do aplikacji należy dodać kod synchronizacji w trybie offline. Synchronizacja w trybie offline wymaga wtyczki cordova-sqlite-storage, która jest automatycznie dodawana do aplikacji, gdy wtyczka usługi Azure Mobile Apps jest uwzględniona w projekcie. Projekt Szybkiego startu zawiera obie te wtyczki.

W Eksplorator rozwiązań programu Visual Studio otwórz index.js i zastąp następujący kod

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

następującym:

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

Następnie zastąp następujący kod:
```
 client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');
```
następującym:
```
 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();
```
Powyższe dodatki kodu inicjują magazyn lokalny i definiują tabelę lokalną zgodną z wartościami kolumn używanymi w zapleczu platformy Azure. (Nie musisz uwzględniać wszystkich wartości kolumn w tym kodzie). Pole version jest obsługiwane przez zaplecze mobilne i służy do rozwiązywania konfliktów.

Aby uzyskać odwołanie do kontekstu synchronizacji, wywołaj polecenie getSyncContext. Kontekst synchronizacji pomaga zachować relacje tabeli przez śledzenie i wypychanie zmian we wszystkich tabelach, które aplikacja kliencka zmodyfikowała po .push() wywołaniu.
Zaktualizuj adres URL aplikacji do adresu URL aplikacji mobilnej.

Następnie zastąp ten kod:

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

następującym:

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

Powyższy kod inicjuje kontekst synchronizacji, a następnie wywołuje metodę getSyncTable (zamiast getTable), aby uzyskać odwołanie do tabeli lokalnej.

Ten kod używa lokalnej bazy danych dla wszystkich operacji tworzenia, odczytu, aktualizacji i usuwania (CRUD).

Ten przykład wykonuje prostą obsługę błędów w przypadku konfliktów synchronizacji. Prawdziwa aplikacja obsługuje różne błędy, takie jak warunki sieciowe, konflikty serwera i inne. Przykłady kodu można znaleźć w przykładzie synchronizacji w trybie offline.

Następnie dodaj tę funkcję, aby wykonać rzeczywistą synchronizację.
```
 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'));
 }
```
Decydujesz, kiedy wypchnąć zmiany do zaplecza aplikacji mobilnej, wywołując element syncContext.push(). Można na przykład wywołać funkcję syncBackend w procedurze obsługi zdarzeń przycisku powiązanej z przyciskiem synchronizacji.

Zagadnienia dotyczące synchronizacji w trybie offline

W przykładzie metoda wypychaniasyncContext jest wywoływana tylko podczas uruchamiania aplikacji w funkcji wywołania zwrotnego na potrzeby logowania. W rzeczywistej aplikacji można również ręcznie wyzwolić tę funkcję synchronizacji lub zmienić stan sieci.

Gdy ściąganie jest wykonywane względem tabeli, która ma oczekujące aktualizacje lokalne śledzone przez kontekst, operacja ściągania automatycznie wyzwala wypychanie. Podczas odświeżania, dodawania i kończenia elementów w tym przykładzie można pominąć jawne wywołanie wypychania , ponieważ może to być nadmiarowe.

W podanym kodzie wszystkie rekordy w zdalnej tabeli todoItem są odpytywane, ale istnieje również możliwość filtrowania rekordów przez przekazanie identyfikatora zapytania i zapytania do wypchnięcia. Aby uzyskać więcej informacji, zobacz sekcję Incremental Sync in Offline Data Sync in Azure Mobile Apps (Synchronizacja przyrostowa w usłudze Data Sync w trybie offline w usłudze Azure Mobile Apps).

(Opcjonalnie) Wyłączanie uwierzytelniania

Jeśli nie chcesz konfigurować uwierzytelniania przed rozpoczęciem testowania synchronizacji w trybie offline, oznacz jako komentarz funkcję wywołania zwrotnego na potrzeby logowania, ale pozostaw kod wewnątrz funkcji wywołania zwrotnego bez komentarza. Po oznaczeniu komentarza wierszy logowania kod jest następujący:

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

Teraz aplikacja jest synchronizowana z zapleczem platformy Azure podczas uruchamiania aplikacji.

Uruchamianie aplikacji klienckiej

Po włączeniu synchronizacji w trybie offline można uruchomić aplikację kliencą co najmniej raz na każdej platformie, aby wypełnić bazę danych magazynu lokalnego. Później symuluj scenariusz w trybie offline i zmodyfikuj dane w magazynie lokalnym, gdy aplikacja jest w trybie offline.

(Opcjonalnie) Testowanie zachowania synchronizacji

W tej sekcji zmodyfikujesz projekt klienta w celu symulowania scenariusza offline przy użyciu nieprawidłowego adresu URL aplikacji dla zaplecza. Podczas dodawania lub zmieniania elementów danych te zmiany są przechowywane w magazynie lokalnym, ale nie są synchronizowane z magazynem danych zaplecza do czasu ponownego nawiązania połączenia.

W Eksplorator rozwiązań otwórz plik projektu index.js i zmień adres URL aplikacji, aby wskazywał nieprawidłowy adres URL, tak jak w poniższym kodzie:
```
 client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net-fail');
```

W index.html zaktualizuj element CSP <meta> przy użyciu tego samego nieprawidłowego adresu URL.

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

Skompiluj i uruchom aplikację kliencka i zwróć uwagę, że w konsoli programu jest rejestrowany wyjątek podczas próby synchronizacji aplikacji z zapleczem po zalogowaniu. Wszystkie dodane nowe elementy istnieją tylko w magazynie lokalnym, dopóki nie zostaną wypchnięte do zaplecza mobilnego. Aplikacja kliencka zachowuje się tak, jakby była połączona z zapleczem.
Zamknij aplikację i uruchom ją ponownie, aby sprawdzić, czy nowo utworzone elementy są utrwalane w magazynie lokalnym.
(Opcjonalnie) Użyj programu Visual Studio, aby wyświetlić tabelę usługi Azure SQL Database, aby zobaczyć, że dane w bazie danych zaplecza nie uległy zmianie.

W programie Visual Studio otwórz Eksploratora serwera. Przejdź do bazy danych w bazach danychAzure-SQL> Database. Kliknij prawym przyciskiem myszy bazę danych i wybierz polecenie Otwórz w SQL Server Eksplorator obiektów. Teraz możesz przejść do tabeli bazy danych SQL i jej zawartości.

(Opcjonalnie) Testowanie ponownego nawiązywania połączenia z zapleczem dla urządzeń przenośnych

W tej sekcji ponownie połączysz aplikację z zapleczem aplikacji mobilnej, która symuluje powrót aplikacji do stanu online. Po zalogowaniu dane są synchronizowane z zapleczem dla urządzeń przenośnych.

Otwórz ponownie index.js i przywróć adres URL aplikacji.
Otwórz ponownie index.html i popraw adres URL aplikacji w elemecie CSP <meta> .
Skompiluj i uruchom aplikację kliencka. Aplikacja próbuje przeprowadzić synchronizację z zapleczem aplikacji mobilnej po zalogowaniu. Sprawdź, czy w konsoli debugowania nie są rejestrowane żadne wyjątki.
(Opcjonalnie) Wyświetl zaktualizowane dane przy użyciu SQL Server Eksplorator obiektów lub narzędzia REST, takiego jak Fiddler. Zwróć uwagę, że dane zostały zsynchronizowane między bazą danych zaplecza a magazynem lokalnym.

Zwróć uwagę, że dane zostały zsynchronizowane między bazą danych a magazynem lokalnym i zawierają elementy dodane podczas odłączania aplikacji.

Dodatkowe zasoby

Następne kroki

Przejrzyj bardziej zaawansowane funkcje synchronizacji offline, takie jak rozwiązywanie konfliktów w przykładzie synchronizacji w trybie offline
Zapoznaj się z dokumentacją interfejsu API synchronizacji w trybie offline w dokumentacji interfejsu API.

Share via

Włączanie synchronizacji w trybie offline dla aplikacji mobilnej Cordova

Omówienie

Dodawanie synchronizacji w trybie offline do rozwiązania Szybki start

Zagadnienia dotyczące synchronizacji w trybie offline

(Opcjonalnie) Wyłączanie uwierzytelniania

Uruchamianie aplikacji klienckiej

(Opcjonalnie) Testowanie zachowania synchronizacji

(Opcjonalnie) Testowanie ponownego nawiązywania połączenia z zapleczem dla urządzeń przenośnych

Dodatkowe zasoby

Następne kroki

Dodatkowe zasoby