Dodawanie synchronizacji danych w trybie offline do aplikacji Apache Cordova

Artykuł
05/05/2021

Nuta

Ten produkt jest wycofany. Aby zastąpić projekty przy użyciu platformy .NET 8 lub nowszej, zobacz bibliotekę datasync zestawu narzędzi Community Toolkit.

W tym samouczku omówiono funkcję synchronizacji w trybie offline aplikacji Szybki start usługi Azure Mobile Apps dla platformy Apache 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 ze zdalnym zapleczem.

Przed rozpoczęciem tego samouczka należy ukończyć samouczek Szybki start platformy Apache Cordova, który obejmuje tworzenie odpowiedniej usługi zaplecza.

Aby dowiedzieć się więcej na temat funkcji synchronizacji offline, zobacz temat Offline Data Sync w usłudze Azure Mobile Apps.

Aktualizowanie aplikacji w celu obsługi synchronizacji w trybie offline

W przypadku operacji online użyjesz getTable(), aby uzyskać odwołanie do tabeli online. Podczas implementowania możliwości trybu offline należy użyć getSyncTable(), aby uzyskać odwołanie do magazynu SQlite w trybie offline. Magazyn SQlite jest dostarczany przez wtyczkę apache Cordova cordova-sqlite-storage.

Nuta

Synchronizacja w trybie offline jest dostępna tylko dla systemów Android i iOS. Nie będzie działać w ramach specyfikacji platformy przeglądarki.

W pliku www/js/index.js:

Zaktualizuj metodę initializeStore(), aby zainicjować lokalną bazę danych SQlite:

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

Zaktualizuj metodę setup(), aby użyć wersji offline tabeli:

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

Zastąp metodę syncLocalTable(), która synchronizuje dane w magazynie offline ze sklepem online:

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

Kompilowanie aplikacji

Uruchom następujące polecenia, aby skompilować aplikację systemu Android:

cordova clean android
cordova build android

Aplikację można uruchomić:

cordova run android

Testowanie w programie Visual Studio Code

Debuger można użyć w programie Visual Studio Code, jeśli masz zainstalowane rozszerzenie Cordova Tools. Kliknij debuger, a następnie utwórz plik launch.json. Po wyświetleniu monitu wybierz pozycję cordova, a następnie wybierz konfiguracje (takie jak Uruchom system Android w emulatorze). Po utworzeniu konfiguracji uruchamiania możesz uruchomić aplikację w debugerze. Zostanie on uruchomiony w wybranym emulatorze. Teraz jednak dane wyjściowe debugowania będą widoczne w konsoli debugowania.

Testowanie aplikacji

W tej sekcji przetestuj zachowanie za pomocą sieci Wi-Fi, a następnie wyłącz sieć Wi-Fi, aby utworzyć scenariusz w trybie offline.

Elementy na liście zadań do wykonania są przechowywane w bazie danych SQLite na urządzeniu. Podczas odświeżania danych zmiany są wysyłane do usługi (wypychanie). Następnie aplikacja żąda nowych elementów (ściąganie). W samouczku odświeżanie jest zaznaczone przez naciśnięcie ikony lub użycie polecenia "pull to refresh".

Umieść urządzenie lub symulator w trybie samolotowym .
Dodaj niektóre elementy zadań do wykonania lub oznacz niektóre elementy jako ukończone.
Zamknij urządzenie lub symulator (lub wymuszone zamknięcie aplikacji) i uruchom ponownie aplikację.
Sprawdź, czy zmiany zostały utrwalone na urządzeniu.
Wyświetl zawartość tabeli TodoItem platformy Azure . Użyj narzędzia SQL, takiego jak program SQL Server Management Studiolub klienta REST, takiego curl. Sprawdź, czy nowe elementy nie zostały zsynchronizowane z serwerem
Włącz sieć Wi-Fi na urządzeniu lub symulatorze.
Odśwież dane za pomocą polecenia "przeciągnij, aby odświeżyć" lub naciskając ikonę odświeżania.
Ponownie przejrzyj dane tabeli TodoItem. Powinny zostać wyświetlone nowe i zmienione elementy.

Następne kroki

Kontynuuj wdrażanie uwierzytelniania.

Udostępnij za pośrednictwem