X

@OracleIMC Partner Resources & Training: Discover your Modernization options + Reach new potential through Innovation

Oracle Visual Builder Mobile Applications with Progressive Web Apps support

Catalin Pohrib
Oracle EMEA A&C Cloud Adoption & Implementation Consultant

As we know, Oracle Visual Builder is a development tool for creating web and mobile applications that lets you create an application by dragging and dropping components onto a page. It also allows you to manipulate the application and your business objects through the underlying source code, to create types and variables, to access REST endpoints, and to create action chains.

../Screenshots/Screen%20Shot%202018-10-16%20at%206.16.37%20PM.png

The same case applies for mobile development as well.

Your visual application can contain multiple web and mobile applications. Each mobile application in your visual application is independent, but they can all use the data sources defined in the visual application. You can create a business object and a mobile application that you'll later use to display, edit, and delete data about departments or other use cases for targeting mobile phones with mobile-optimized templates and interactions as well as native look-and-feel for both Android and iOS devices.

 

Description of mob-appnav-createdialog.png follows

Oracle Visual Builder uses plugins developed with the Apache Cordova framework to access the capabilities of the devices on which your mobile application is installed.

A plugin is a package of code that allows the web view within which your application renders to communicate with the native platform on which it runs. The plugin does this by providing a JavaScript interface to native components that allows your application to use native device capabilities, such as camera, geo-location, and so on.

Oracle Visual Builder provides a range of plugins that are ready to use in the mobile applications that you create. One example is the camera plugin that is used when you configure your mobile application to use the Take Photo action.

https://cdn.app.compendium.com/uploads/user/e7c690e8-6ff9-102a-ac6d-e4aebca50425/63901ba8-c3fc-4887-8e55-caeb80b0235a/Image/92224607c362333e7dac54ae0beebe43/screen_shot_2019_04_09_at_10_07_49_pm.png

 

Take Photo is a very useful action, especially on Mobile, as it provides access to the device camera. Take Photo is used to capture images, like personal photographs, as well as other uses, like scanning QR or bar codes. Depending on your use, you may need to just access the image on device or you may need to send it to another service, like a storage service.

You can also write some custom code to convert the Blob stream to a URL which you can set to the src property of the image component. See the code sample below:

  PageModule.prototype.showPic = function(fileBlob) {

    const blobURL = URL.createObjectURL(fileBlob);

    // Release the BLOB after it loads.

    document.getElementById("mypic").onload = function() {

      URL.revokeObjectURL(blobURL);

    };

    return blobURL;

  }
 

The plugins that Oracle Visual Builder delivers provide coverage for a wide range of use cases. For those use cases where Oracle Visual Builder does not provide a plugin ready to use, you can import a plugin into your mobile application using the Custom Plugins page of your mobile application’s Settings screen.

Ready to test your App?

Description of mob_run_app.png follows

 

When a mobile app with PWA support enabled is deployed using Oracle Visual Builder, the application runs as a web app and not as a native mobile app.

PWA apps can work offline, leverage device features such as access to the camera, photo gallery, and location information. The app is downloaded to the device, represented as an icon on the device list of apps, and when it is invoked you don't see a browser wrapper (no address bar and browser navigation buttons). As such the user experience of working with such application is very close to applications that you get from the app store.

Description of mob_pwa_tab-png.png follows

A key difference between PWA and on-device mobile apps is the distribution mechanism. To first "install" the application the user will navigate to a URL using their browser, this will pop-up an option for them to "add the application to home screen". Once they do this the app is now part of their "apps list" on the device. When a new version of the app is published, the end user doesn't need to go to the app store to download it. The application will automatically update on the device the next time you'll open it, pulling the new UI from the server and caching it for future use.

One more point to mention is that PWA can also install on your laptop, for example as a chrome app. This means that unlike the on-device mobile apps in VB that are limited to just iOS or Android devices, PWA apps can also run on windows, macs and other OSs. For more information on PWAs, see the documentation.

As you'll see in the demo video below, developing a PWA app is no different than developing regular mobile apps in Visual Builder, there is a configuration tab that allows you to turn on the PWA packaging for any mobile app. Once you do this, when you stage the app, you'll get a URL (and a QR code) that customers can access to invoke/install the app.

Check out this demo:



A couple of notes about the app in the demo

  • While we enabled unauthenticated access to the app, you can of course limit application access to specific users
  • The data caching shown in the demo is the result of the REST service specifying a caching mechanism in the header. For more complete caching control and capabilities VB PWA apps can leverage the Oracle JET offline toolkit.
  • The take a picture action also works when running on your laptop, it will open the local file selection dialog.
     

Guidelines for Using PWA Support

Here are a few things to consider when using PWA support for your applications.

  • At present, you can only enable mobile applications that you created in Oracle Visual Builder as PWAs.
  • Currently, we support the Chrome browser for Android and the Safari browser on iOS. We recommend that you use the latest available browser versions. For information on supported browser versions, review this page.
  • Here are few limitations for PWA apps running on the iOS platform. These issues may be resolved in future iOS releases.
    • Install the PWA app by using the share icon (because the Add <PWAappName> to Home screen message is not displayed).
    • PWA app state is not saved between sessions. If a user exits a PWA, the app is restarted when the user returns.
    • Navigation between screens in an app is possible only by using the built-in navigation. This is because Apple devices do not have a Back button.
    • Inactive apps appear as a white screen (no splash screen support) in the task manager.
    • Service worker cache size is limited to 50 MB per partition.
    • Caches for unused apps are purged frequently.
    • Web manifest is not supported on Safari.
    • Orientation lock not supported.
  • Periodically delete service workers and clear cache when developing PWAs. When you repeatedly stage new versions of a PWA (in the iterative development cycle), you might run into issues with Chrome DevTools if multiple service workers are present. Here are high-level steps to do this:
    1. Click Cmd+Option+I (on Macintosh) or Ctrl+Shift+I (on Windows) to open the Chrome DevTools.
    2. Switch to the Application tab.
    3. Click Clear Storage in the left menu.
    4. Click Clear Site Data to clear the cache and unregistered service workers.


References:

Guidelines using PWA support
Building mobile applications with Oracle Visual Builder

 

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.