Building Offline Mobile Apps with Oracle JET and MCS

Transcription

1 Building Offline Mobile Apps with Oracle JET and MCS JavaScript Persistence and Offline Sync Library for Cordova or Browser based applications MCS Sync Express Lyudmil Oracle A-Team Nov, 2016 Copyright Oracle and/or its affiliates. All rights reserved.

2 Safe Harbor Statement The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle s products remains at the sole discretion of Oracle. 2

3 MCS Sync Express Main Features Support for offline mode Offline read: storage of JSON Rest Payloads on device or in the browser Offline write: stores pending changes for later synchronization (Partly) implements MCS Sync Policies full implementation in MCS 16.3.x Increase perceived user performance Can be configured to show local data first Remote calls can be done in background or synchronously Refresh page once remote background call finished Ability to query offline storage

4 Design Goals Transparent usage Library should be non-intrusive as possible Minimal amount of coding to use persistence features Optimal Performance Prevent JSON serialization Work with object structure as returned from the REST calls Generic library for offline persistence Works with MCS Sync Enabled Collection and without Works in the Browser (IE9+) and in Cordova(4+) Not only for mobile apps!

5 Steps to add offline sync to your hybrid app Design, build and test your application Include the mcs.sync.js and the mcs.sync.config.js to the application For MCS JS SDK users, add syncexpress configuration to your oracle_mobile_cloud_config.js file Configure the REST Endpoints and Policies

6 Step 1 - Build the app 6

7 Step 2 include Sync Express MCS JS SDK additional configuration within the oracle_mobile_cloud_config.js Sync Express Straight "syncexpress": { "policies": [ ] } <!-- Persistence/Offline Sync--> <script src="js/libs/persistence/mcs.sync.js"></script> <! Offline Sync Config --> <script src= mcs.sync.config.js"></script> <script src="js/libs/require/require.js"></script> <script src="js/main.js"></script> 7

8 Step 3 Configure REST Endpoints and Policies "syncexpress": { "policies": [ { "path": '/mobile/custom/firstapi/tasks/:id(\\d+)?', "fetchpolicy": 'FETCH_FROM_SERVICE_IF_ONLINE' }, { "path": '/mobile/custom/secondapi/tasks/:id(\\d+)?', }, { "path": '/mobile/custom/paas4saasapp/myaccts/:partyid(\\d+)?/:_opportunities?/:optynumber(\\d+)?' } ] }

9 Understanding the Sync Config multiple REST end points for the same object Rest calls summary (GET, POST, PUT, DELETE): /departments /departments/1 /departments/1/employees /departments/1/addresses ONE Regex config for all HTTP operations(get, POST, PUT, DELETE): { path: "/departments/:id(\\d+)?/:_properties?" } :id - name of the unique identified (\\d+) - indicates if numeric value :_properties - generic name of the object sub property? - indicates that the property is not mandatory

10 Transparent Persistence Library Architecture REST Endpoint Independent* JQuery Oracle JET AngularJS Ionic Knockout(3 rd party) Amplify 3 rd Party based on XMLHTTPRequest GET POST DELETE PUT PATCH XMLHTTPRequest PersistentOptions PersistentHandler Interceptor PersistentRequestHandler REST/JSON REST API MCS Cloud AWS (Sync Log) Listener (fire event when load finish in the background) GET POST DELETE PersistentFilter (URL Query) PersistentStorage localstorage, IndexDB, SQLite, File Copyright Oracle and/or its affiliates. All rights reserved.

11 Supported MCS Sync Policies Fetch Policies MCS Non MCS FETCH_FROM_SERVICE_IF_ONLINE Yes Yes FETCH_FROM_CACHE_SCHEDULE_REFRESH Yes Yes Eviction Policies MCS Non MCS MANUAL_EVICTION Yes Yes EVICT_ON_SERVICE_MISS Yes Yes If resource fetch from server, but the new fetch no longer includes the resource, the resource is deleted If resource stored only in the offline DB and not sync, evict on fetch will not delete that object Cache resources are marked as fetched from service or created locally as work in progress!

12 Supported MCS Sync Policies Conflict Resolution Policies MCS Non MCS CLIENT_WINS Yes Yes PRESERVE_CONFLICT Yes Yes SERVER_WINS WIP WIP Regardless of client or server wins policy, If PUT or POST returns the same object, the cache is always updated with this object, to ensure that server updated attributes are stored in the cache.

13 Sync Considerations Currently no size limitation applied, however you should not use MCS Sync Express to store binary content Sync log does not necessary require periodic refresh Every REST call will do pending sync actions first to ensure read consistency You can also start auto-synchronization process in background at app start-up so sync automatically when device is online again

14 Understanding the Sync Log Sync log purpose: Store all AJAX requests, including also offline or failed HTTP actions which has to be synchronized when device online or at a later point, in preserved order! With every REST call the pending sync actions are automatically processed first! Merge HTTP actions if possible into a single AJAX call: If POST has been done, and later PUT against the same object, the PUT payload will be merged with the POST If POST and DELETE HTTP action, object will be deleted, no synchronization required If PUT and DELETE, the PUT will be ignored Multiple PUTs against the same payload will be merged into one

15 Sync Conflict Resolution Follows the MCS Sync conflict resolution policies For PUT and DELETE request your code has to honor the If-Match headers: If the header contains an ETag value, and that value doesn t match the ETag on the server, then the code must not update or delete the item and must return a 412 HTTP response status (precondition failed) to indicate that the ETag does not match the server-side object s ETag If the header contains a value of * (asterisk), then the server-side's object must be replaced by the request object (or deleted for a DELETE request). 15

16 Support Matrix Small library: currently minified and gzip around 20K!

17