9/1/2019 Adding Offline Capabilities to an Oracle Visual Builder App | Oracle Visual Builder Cloud Service Blog

Oracle Visual Builder Cloud Service Blog

 MENU

Oracle Visual Builder Cloud Service Blog

The Visual Builder Cloud Service Blog

Try Oracle Cloud Platform

For Free

July 3, 2019

Adding Offline Capabilities to an Oracle

Visual Builder App
Shay Shmeltzer
DIRECTOR OF PRODUCT MANAGEMENT - ORACLE

This is a syndicated post, view the original post here

Visual Builder allows you to create applications that can continue to

function even when your device is disconnected from the network. To do
that Visual Builder leverages the Oracle JET offline persistence toolkit.
This toolkit enables your application to cache data on the client and
serves it back from the cache when you are issuing the same REST call
but your device doesn't have access to the server. It also allows you to
"execute" operations such as adding records while offline - storing those
requests on the client again - and then automate replaying them back
when you are connected.

In the demo video below I show how to add some of these capabilities to

https://blogs.oracle.com/vbcs/adding-offline-capabilities-to-an-oracle-visual-builder-app-v2 1/8
9/1/2019 Adding Offline Capabilities to an Oracle Visual Builder App | Oracle Visual Builder Cloud Service Blog

your application. It's important to note that adding offline capabilities

requires knowledge in JavaScript coding and an understanding of the
offline toolkit. This is not a simple drag and drop operation - so approach
carefully. Leverage the extensive logging that the offline persistence can
do and monitor it's messages in the browser's dev tools console to see
what is happening when. In the video you'll also see how to clear the
cache on the client which is sometimes needed to see the real
functionality.

The Visual Builder developer guide has a section that explains the
concepts of offline persistence, and provides a basic starting point code
sample. In the video below, I start from that code sample, then I modify it
to change the cache strategy and implement support for POST
operations and synch data changes on demand.

Here is a breakdown of things you'll see in the video (allowing you to skip
to the section you need):

0:00-1:30 - Exposing Oracle Database Table (Oracle ATP) with

REST Services using ORDS and SQLDeveloper

https://blogs.oracle.com/vbcs/adding-offline-capabilities-to-an-oracle-visual-builder-app-v2 2/8
9/1/2019 Adding Offline Capabilities to an Oracle Visual Builder App | Oracle Visual Builder Cloud Service Blog

1:30-4:45 - Building a simple Read/Create Visual Builder App

Accessing above ORDS services

4:45-8:00 - Adding caching based on the book's sample

8:00-10:30 - Switching to use cache data only when offline

10:30- End - Adding handling of POST(Create) operations

Adding O ine Capabilities to a Visual Builder Application

As you can see the interaction with the offline persistence layer is
managed in the application's JavaScript area. Below is the code used in
my app, with the parts that I change from the doc sample explained
below.

1 define([
2 'vbsw/helpers/serviceWorkerHelpers',
3 /**
4 * Add the following entries to include the toolkit classes that you
5 * classes can be found in the toolkit's API doc. See the link to th
6 * this sample file.
7 *
8
*/
9
'persist/persistenceManager',
10
'persist/defaultResponseProxy',
11
'persist/persistenceUtils',
12
'persist/fetchStrategies',
https://blogs.oracle.com/vbcs/adding-offline-capabilities-to-an-oracle-visual-builder-app-v2 3/8
9/1/2019 Adding Offline Capabilities to an Oracle Visual Builder App | Oracle Visual Builder Cloud Service Blog

13 /**
14 * Add the following entry to enable console logging while you develo
15 */
16 'persist/impl/logger'
17 ],
18 function(ServiceWorkerHelpers, PersistenceManager, DefaultResponseProxy
19 PersistenceUtils, FetchStrategies, Logger) {
20 'use strict';
21
22
function AppModule() {}
23
24
function OfflineHandler() {
25
/**
26
* Enable console logging of the toolkit for development testing
27
28 */
29 Logger.option('level', Logger.LEVEL_LOG);
30 Logger.option('writer', console);
31
32 var options = {
33 /**
34 * The following code snippets implements the toolkit's CacheFir
35 * checks the application's cache for the requested data before
36 * data. The code snippet also disables the background fetch of d
37 */
38 requestHandlerOverride: {
39 handlePost: handlePost
40 },
41 fetchStrategy: FetchStrategies.getCacheIfOfflineStrategy({
42
backgroundFetch: 'disabled'
43
})
44
};
45
this._responseProxy = DefaultResponseProxy.getResponseProxy(option
46
}
47
48
49 OfflineHandler.prototype.handleRequest = function(request, scope) {
50 /**
51 * (Optional). Write output from the OfflineHandler to your browse
52 * you understand the code that follows.
53 */
54 console.log('OfflineHandler.handleRequest() url = ' + request.url +
55 ' cache = ' + request.cache +
56 ' mode = ' + request.mode);
57
58 /**
59 * Cache requests where the URL matches the scope for which you wa
60 */
61 if (request.url.match(
62 'https://yourserver.oraclecloudapps.com/ords/shay'
63
)) {
64
65
return this._responseProxy.processRequest(request);
66
https://blogs.oracle.com/vbcs/adding-offline-capabilities-to-an-oracle-visual-builder-app-v2 4/8
9/1/2019 Adding Offline Capabilities to an Oracle Visual Builder App | Oracle Visual Builder Cloud Service Blog

67 }
68 return PersistenceManager.browserFetch(request);
69 };
70
71 OfflineHandler.prototype.beforeSyncRequestListener = function(event)
72 return Promise.resolve();
73 };
74 OfflineHandler.prototype.afterSyncRequestListener = function(event)
75
return Promise.resolve();
76
};
77
AppModule.prototype.createOfflineHandler = function() {
78
/** Create the OfflineHandler that makes the toolkit cache data UR
79
80 return Promise.resolve(new OfflineHandler());
81 };
82 AppModule.prototype.isOnline = function() {
83 return ServiceWorkerHelpers.isOnline();
84 };
85 AppModule.prototype.forceOffline = function(flag) {
86 return ServiceWorkerHelpers.forceOffline(flag).then(function() {
87 /** if online, perform a data sync */
88 if (!flag) {
89 return ServiceWorkerHelpers.syncOfflineData();
90 }
91 return Promise.resolve();
92
93 }).catch(function(error) {
94 console.error(error);
95
});
96
};
97
AppModule.prototype.dataSynch = function() {
98
return ServiceWorkerHelpers.syncOfflineData();
99
};
100
101
102 // custom implementation to handle the POST request
103 var handlePost = function(request) {
104 if (ServiceWorkerHelpers.isOnline()) {}
105
106 return PersistenceUtils.requestToJSON(request).then(function(
107 requestData) {
108 console.log('Inside PersistenceUtils');
109 console.log(requestData);
110 requestData.status = 202;
111 requestData.statusText = 'OK';
112 requestData.headers['content-type'] = 'application/json';
113 requestData.headers['x-oracle-jscpt-cache-expiration-date'] =
114 '';
115
116 // if the request contains an ETag then we have to generate a new
117 var ifMatch = requestData.headers['if-match'];
118
var ifNoneMatch = requestData.headers['if-none-match'];
119
120
https://blogs.oracle.com/vbcs/adding-offline-capabilities-to-an-oracle-visual-builder-app-v2 5/8
9/1/2019 Adding Offline Capabilities to an Oracle Visual Builder App | Oracle Visual Builder Cloud Service Blog

121 if (ifMatch || ifNoneMatch) {

122 var randomInt = Math.floor(Math.random() * 1000000);
123 requestData.headers['etag'] = (Date.now() + randomInt).toString
124 requestData.headers['x-oracle-jscpt-etag-generated'] =
125 requestData.headers['etag'];
126 delete requestData.headers['if-match'];
127 delete requestData.headers['if-none-match'];
128 }
129
return PersistenceUtils.responseFromJSON(requestData);
});
};

return AppModule;
});

To highlight the major changes in the code done in the video:

Line 40 - changed the fetch strategy to fetch data from the cache

only when offline - doc

Line 37-39 - define a new method that will be used to handle POST

operations

Lines 98-125 - the custom method that handles POST operations

(line 11,19 contain the extra needed library reference)

Lines 93-95 - AppModule function to force synchronization of offline

changes

Keep in mind that offline caching should be used with an understanding

of the risks involved. For example, your cached data can get stale and
not match the real situation in the server.So while caching can be a nice
performance boost, you should probably use it for data that is not
frequently changing. Also since data is cached on the client, other people
could access it if they get access to the client. Don't cache sensitive data
that you don't want falling into the wrong hands if you loose your device.

https://blogs.oracle.com/vbcs/adding-offline-capabilities-to-an-oracle-visual-builder-app-v2 6/8
9/1/2019 Adding Offline Capabilities to an Oracle Visual Builder App | Oracle Visual Builder Cloud Service Blog

Be the first to comment

Comments ( 0 )

Recent Content

Importing and Updating Apps Charts in Oracle Visual Builder - Data

Between Visual Builder Instances Structure and Performance Tips

https://blogs.oracle.com/vbcs/adding-offline-capabilities-to-an-oracle-visual-builder-app-v2 7/8
9/1/2019 Adding Offline Capabilities to an Oracle Visual Builder App | Oracle Visual Builder Cloud Service Blog

Site Map Legal Notices Terms of Use Privacy Cookie Preferences Ad Choices

Oracle Content Marketing Login

https://blogs.oracle.com/vbcs/adding-offline-capabilities-to-an-oracle-visual-builder-app-v2 8/8