Visual Builder

Get Involved. Join the Conversation.

Topic

    Mayank Srivastava
    Use of Oracle Offline Persistence Toolkit in visual builder...
    Topic posted October 23, 2019 by Mayank SrivastavaGreen Ribbon: 100+ Points, last edited October 23, 2019, tagged Custom Code, JET 
    27 Views, 6 Comments
    Title:
    Use of Oracle Offline Persistence Toolkit in visual builder for Caching
    Summary:
    Use of Oracle Offline Persistence Toolkit for Caching
    Content:

    I have a auto suggest textbox on multiple pages of my application. Content to be displayed for autosuggest is preloaded with the application load and gets displayed. I have added the action chain at the application level since user can load any page directly so adding the action chain to home page will not work.

    Now the problem is that on each page change that action chain gets called which results in some latency. Is there a way we can use oracle offline persistence toolkit in such case that once the content is loaded then service is not called each time on page change.

    Please let me know if any more details are required.

    Comment

     

    • Preetesh Dongre

      Hi Mayank,

      I am not sure if I get your scenario completely, if you are preloading the content at application load why will it get load again on page change? However simplest solution I could think of is put a check if the contents are preloaded then don't load it again, just putting a condition won't result in a latency.

      Regards,

      Preetesh

      • Mayank Srivastava

        It gets loaded again as I have added the action chain on vb enter event at application level.

        We can put a check if content are pre loaded then we can return but my application supports multiple language and if user changes the language and loads the application then it should again fetch the data according to the locale selected.

        can we use oracle offline persistence toolkit in this scenario to avoid loading it each time on page change.

        Thanks,

        Mayank

        • Shay Shmeltzer

          You can use the offline persistence toolkit in VB.

          Basic info here: https://blogs.oracle.com/shay/adding-offline-capabilities-to-an-oracle-visual-builder-app

          That being said, your app's vbEnter event should only be fired when the user invokes the app, not when they do navigation between pages inside the app.

          • Mayank Srivastava

            I am trying to use getCacheFirstStrategy so that my endpoint is not called everytime but I observe that control is not coming to the url match statement which i found during debugging.

            Please find my app-flow.js code below. Please let me know if I have missed any configuration or if you need any other details.

             

            define([
              'ojs/ojcore', 'knockout', 'jquery',
              'resources/jquery-cookie-master/src/jquery.cookie',
              'resources/js/lib/s_code', 'resources/js/csp', 'vbsw/helpers/serviceWorkerHelpers',    
                'persist/persistenceManager',
                'persist/defaultResponseProxy',
                'persist/fetchStrategies',    
                'persist/impl/logger'
            ], function(oj, ko, $, jquery, sCode, csp,ServiceWorkerHelpers, PersistenceManager, DefaultResponseProxy, FetchStrategies, Logger) {
              'use strict';

              var AppModule = function AppModule(context) {
              };
              function OfflineHandler() {
                        /**
                         * Enable console logging of the toolkit for development testing
                         */
                        Logger.option('level', Logger.LEVEL_LOG);
                        Logger.option('writer', console);

                        var options = {
                            /**
                             * The following code snippets implements the toolkit's CacheFirstStrategy. This strategy 
                             * checks the application's cache for the requested data before it makes a request to cache 
                             * data. The code snippet also disables the background fetch of data.
                             */

                            fetchStrategy: FetchStrategies.getCacheFirstStrategy({
                                backgroundFetch: 'disabled'
                            }),
                        };
                        this._responseProxy = DefaultResponseProxy.getResponseProxy(options);
                    }

                    OfflineHandler.prototype.handleRequest = function (request, scope) {
                        /**
                         * (Optional). Write output from the OfflineHandler to your browser's console. Useful to help 
                         * you understand  the code that follows.
                         */
                        console.log('OfflineHandler.handleRequest() url = ' + request.url + ' cache = ' + request.cache +
                            ' mode = ' + request.mode);

                        /**
                         * Cache requests where the URL matches the scope for which you want data cached.
                         */
                        if (request.url.match(
                            'https://srvc-qa.abc.com/test/search/autosuggest')) {
                              alert("hello");

                            return this._responseProxy.processRequest(request);
                        }
                        alert("hello1111");

                        return PersistenceManager.browserFetch(request);
                    };

                    OfflineHandler.prototype.beforeSyncRequestListener = function (event) {
                        return Promise.resolve();
                    };
                    OfflineHandler.prototype.afterSyncRequestListener = function (event) {
                        return Promise.resolve();
                    };
                    AppModule.prototype.createOfflineHandler = function () {
                    /** Create the OfflineHandler that makes the toolkit cache data URLs */            
                        return Promise.resolve(new OfflineHandler());
                    };
                    AppModule.prototype.isOnline = function () {
                        return ServiceWorkerHelpers.isOnline();
                    };
                    AppModule.prototype.forceOffline = function (flag) {
                        return ServiceWorkerHelpers.forceOffline(flag).then(function () {
                            /** if online, perform a data sync */
                            if (!flag) {
                                return ServiceWorkerHelpers.syncOfflineData();
                            }
                            return Promise.resolve();

                        }).catch(function (error) {
                            console.error(error);
                        });
                    };
              
              /* To make Language links non draggable in Region drop down Starts*/  
                $(document).on("focus", ".localeLink" , function(e) {
                       $('.drop li a.localeLink').on('dragstart', function () {
                        return false;
                        });
                        }); 
              /* To make Language links non draggable in Region drop down Ends*/

              
              /*Hide search results on Screen resizing Starts*/   
              $(window).resize(function(){    
                $('.homeSearchOption').attr('style','display: none');
              }); 
              /*Hide search results on Screen resizing Ends*/
              
              
                /*Setting visibility of Arrow up icon in footer after certain height BEGIN*/    
                $(window).scroll(function() {
                var scrollPercent = Math.round(100 * $(window).scrollTop() / ($(document).height() - $(window).height()));
                if (scrollPercent > 50) {
                    $('.back-to-top').fadeIn();
                } else {
                    $('.back-to-top').fadeOut();
                }
            });
                /*Setting visibility of Arrow up icon in footer after certain height END*/

             
              
              /*Bind focus out for validation*/
              AppModule.prototype.validateFormFields = function(translations, isOnload) {  

              /**
               *
               * @param {String} arg1
               * @return {String}
               */
              AppModule.prototype.test = function (arg1) {
                alert(arg1);
              };

             
              return AppModule;
            });

            • Shay Shmeltzer

              It's going to be hard for us to debug this.

              But some things to check - https://srvc-qa.abc.com/test/search/autosuggest - doesn't seem to be a valid URL when I try to access it.

              Does it have a valid SSL certification?

              When you check your browser's console for the results of this line:

                    console.log('OfflineHandler.handleRequest() url = ' + request.url + ' cache = ' + request.cache +
                              ' mode = ' + request.mode);

              Does it match the URL you are trying to match?

              In the network tab - does the server name match what you are expecting when the REST service is called?

              • Mayank Srivastava

                Yes this service is secured with a bearer token so we cannot access this directly. For accessing this service we have to first generate a token using different endpoint and then call this "autosugest" service.

                I was trying to debug this but my issue is not control itself is not coming to "OfflineHandler.prototype.handleRequest:" function. I was not able to view the logs mentioned in your above reply as control didn't came there. 

                Is there any default offline caching implemented in VBCS. Without adding any code also I can see in network tab that service is called twice and if we check details , it shows one response from service worker and other from the backend server and both shows the same timestamp.