Creating an offline app with the mobile service for SAP Fiori – Part 1

This blog focuses on creating an ‘offline’ mobile application with the mobile service for SAP Fiori, a service on SAP Cloud Platform.

I strongly recommend you to go thru the blog ‘How to mobilize your HTML5/SAPUI5 app with Fiori Mobile‘, which explains how to create a mobile app and run it on device.

I hope you really went thru the blog and created mobile app (or have a similar application running). We will take the app and make it offline enabled.

Now lets go thru:

1. What is offline
2. Things to consider
3. Architecture overview
4. Concepts in offline
5. Step by step guide

Offline:

The basic concept of offline enablement is to provide a copy of the necessary business data – all data that is required for the operation of the app – in a local database on the device and let the application manipulate this local database.

Initially, you need to replicate the business data from the online OData service to the offline local database once; and during normal operation, you need to synchronize between the online and offline data sources regularly to provide consistent business processes.

Both the initial data replication and the regular synchronization need network connection.

You can use the application when network connectivity is not available due to technical reasons (for example, there is no network coverage) or not allowed (for example, there are security limitation at customer site).

It also provides better performance when accessing and manipulating data that is stored locally on the device.

At the same time, these advantages have a price: data has to be downloaded to the device in advance while network connectivity is available and stored on the device locally.

Things to Consider:

Offline enablement requires thorough planning in advance and considering various aspects, such as

– offline working mode,

– the definition of the offline datasets,

– data synchronization strategies,

– handling of features not available in offline mode,

– and possible adaptation of existing OData services.

 Architecture Overview:

The offline OData technology is provided as a service on Fiori Mobile which leverages SAP HANA Cloud Platform mobile services.

The offline enabled Fiori app is implemented as a prepackaged Cordova application built for the specific mobile platforms

The Kapsel offline OData plugin contains the features required for the offline enablement with the necessary local database that will store all the data required for the operation of the app.

Lets get ourselves familiarised with some of the concepts in offline.

Offline Store:

The offline store is a local offline database that stores all data required for the operation of the app. It stores all data that is available offline for your application and the application will always use this database. Even when the device has network connectivity, your application will not access data that is part of the offline store directly from the back-end server but will use the local database.

One offline store can only be used with one OData service and you need to synchronise the store with the back-end database regularly when the device has network connection.

Offline Data Sets:

In order to provide sufficient data for the end user in offline mode, you need to determine which collections and which subset of these collections are required while working offline. During this process both data volume and functional consistency options should be considered, especially for performance reasons.

You can define the content and the structure of the offline store by a set of defining requests. A defining request is a static OData read request that targets the OData endpoint (back-end database) associated with the offline store and retrieves a subset of the back-end data.

The correct and proper configuration of the defining requests is crucial as this will significantly influence the operation and performance of the offline-enabled app. You can define multiple defining requests for each OData endpoint. Defining requests define the subset of data sent to the client by the OData Producer during the initialisation of the offline store. Defining requests become fixed for the offline store the first time it is opened.

Data Synchronisation:

Data synchronisation between the server and the local device has two directions: changes made on the device (for example, new, updated, and deleted records) are sent to the back end during flush operations, and data changes on the back-end server (for example, changes by other users or by the same user as a consequence of its previous flush) are downloaded to the device during refresh operations.

Switch off all your data networks (WiFi, mobile data,..) on your device and try opening the previous built mobile application on your device. It would throw the below error as its not able to connect and get the data.

Now lets make the application offline and get rid of this error.

Step-by-Step Guide:

1. Open the app (product listing) in WebIDE

2. Open the manifest.json file under webapp folder by double clicking and select ‘Code Editor’ tab at the bottom.

3. Add a new section sap.mobile in the manifest file. This section holds the offline store definition. Offline store has a name, (odata) service root and the defining requests (odata entities). If you want to limit the data to be stored offline, you can do so by appending odata filters at the end of defining requests.

    "sap.mobile": {

        "_version": "1.1.0",

        "definingRequests": {},

        "stores": [

            {

                "name": "PRODUCT_LISTING",

                "serviceRoot": "/northwind/V2/northwind/northwind.svc/",

                "definingRequests": {

                    "Products": "/Products"

                }

            }

        ]

    }

4. Deploy the application to ‘SAP Cloud Platform’

5. Choose the option to ‘Update an existing application’

6. After deployment, start the building of packaged app by right click on the project and select ‘Fiori Mobile’ >> ‘Build Packaged App’

7. You can leave the all the options(application icon, splash screen, signing profile,…) as is from the previous build (How to mobilize your HTML5/SAPUI5 app with Fiori Mobile) or change them and start ‘Build’.

8. Once the build is successful, scan the QR code, download and install (or update) the app.

9. After you logon to the app on device, you would notice a new screen which says ‘The local store is being provisioned’. At this stage, the app is creating a new offline store on device with the provided name (‘PRODUCT_LISTING’). After the store creation is successful, app syncs (refresh operation) the data from server to the device

10. Then the app is opened with the list of products. You need network for the initial synchronisation of the data.

11. Now you can kill the app, switch off all the data networks, and relaunch the app. The app will show the data from the device and it will be faster.

In this blog we covered only the refresh (download data from server) for the first time in offline.

There are other concepts in offline like Flush, Exception Handling, Conflict Handling. Let’s discuss in the next part …