Subscribe

Share

Application Development

The New Agnostic Applications

The future is progressive web apps.

By JT Thomas

March/April 2019

Progressive web apps (PWAs) deliver feature-rich web applications that can take full advantage of native browser and mobile device features. Whereas responsive web apps can change their layout, depending on the device resolution and orientation, PWAs enable and disable features, based on the browser and device running the apps. PWAs give a development team the option of managing a single, common, standards-based codebase not just across device platforms but also across desktop and mobile while still delivering a top-notch experience for each target platform.

This article focuses on the linkable and installable capabilities that enable seamless distribution and installation of a PWA onto a mobile device, using Oracle Visual Builder. You can find a large catalog of web apps at https://pwa.rocks that deliver their content to mobile devices as PWAs. View the apps on your mobile device, where you will also be presented with the option to add the apps to the device home screen. Although a PWA is initially delivered to a device through a browser, you can add it to your mobile home screen, which will install the app onto the device. See Figure 1 for an example of this experience.

As you can see in Figure 1, the app is initially loaded through a browser via a URL and users are given the option to add the PWA to their home screen. When added to the home screen, the PWA delivers a set of icons, resources, and cached files for the app and the appropriate home screen icon for your device. From this point on, users can launch the PWA from the home screen and it will look and act just like a native full-screen app—for example, there is no browser chrome, as shown in the address bar in Figure 1. Furthermore, most, if not all HTML, JavaScript, and CSS files will be local, so no HTTP fetch is needed at startup, which improves performance as well.

pwa figure 1a

Figure 1: A PWA accessed through the browser with the Add to Home Screen option, followed by the PWA loading full-screen from the home screen

Creating a PWA with Oracle Visual Builder

Oracle Visual Builder is a cloud development platform for delivering modern, connected, web and mobile applications, using standard web technologies such as HTML, JavaScript, and CSS. Oracle Visual Builder has been used to build SaaS extensions for Oracle Sales Cloud, Oracle Human Capital Management Cloud, and Oracle Enterprise Resource Planning Cloud; for building updated user interfaces for on-premises systems; and for delivering business- and customer-facing mobile applications to the Apple and Google app stores. Oracle Visual Builder is available as a standalone Oracle Cloud service, but it also ships with Oracle Integration Cloud as well as several SaaS services, including Oracle Engagement Cloud Digital Customer Service.

Within Oracle Visual Builder, you can build responsive web apps or mobile-specific apps. For mobile apps, you can deploy each app as a native package or as a PWA. You can connect those apps to REST services and define server-side business objects that are shared among all apps within a project.

For the purposes of this article, I will create a simple mobile app that connects to a REST service and is deployed as a PWA. To follow the hands-on instructions in this article, you need to have access to Oracle Visual Builder, which is available as a free trial.

Within Oracle Visual Builder, click the New button at the top right of the screen. Enter a name for Application Name (the application ID will be generated for you), and click Finish. Figure 2 shows the Welcome screen that greets you after you create your project, and it highlights the primary functions of Oracle Visual Builder.

pwa figure 2

Figure 2: Quickly creating web and mobile applications that integrate any REST service, server-side business objects, and business processes

Oracle Visual Builder web and mobile apps both use standard HTML, JavaScript, and CSS for the applications. The apps share the same runtime and access to service connections, business objects, and business process integrations within the same project. A web app is fully responsive from a large wide-screen desktop format down to a mobile portrait-mode-oriented device, whereas a mobile app is typically designed for a similar set of device resolutions and orientations. See the “What’s the Difference?” sidebar for details on the differences between Oracle Visual Builder web and mobile apps.

To continue building the PWA, select Mobile Apps from the Create Apps section and then click the + Mobile Application button in the left pane. This will take you to a mobile app wizard in which you can provide your mobile app name and select a layout. Enter a name for Application Name (mine is pwademo), and select None for Navigation, because this is a simple one-screen demonstration. Click the > button at the top right to move to the next screen of the wizard, and select No Content. Click Finish to create the app and load the designer. Figure 3 shows the designer screen with (from left to right) the project manager, component palette, page structure, and designer surface. Each of these windows can be collapsed. Farther to the right is a property inspector, which you can make visible by selecting the top right “drawer” button next to the Code button.

pwa figure 3

Figure 3: The Oracle Visual Builder design-time experience

For this project, I want to connect to a REST service for the data. I’ll use a public REST service that requires no authentication and returns a list of countries with some data on each of them. To add the REST service, create a service connection by selecting the button on the far left of the designer screen. Click the + button to the right of the Service text, and select Define by Endpoint from the Create Service Connection screen. In the next screen, enter https://restcountries.eu/rest/v2/ into the empty URL text box and change Action Hint, if needed, to Get Many. With this REST service added, with the default name Countries, you can test the service within Oracle Visual Builder. Click Test to test the connection. Figure 4 shows the service connection, the testing interface, and the test response. Click Copy to Response Body in the Response section.

pwa figure 4

Figure 4: Testing the REST endpoint

Now let’s add some UI elements. For this application, I want to show a list of countries, so in your Component Palette, select the List View component under Collection and drag it onto your design surface. You should see a rendering of a list view with three sections showing generic field names. With that List View component selected on the screen, open the Property Inspector (top right drawer button) and click Add Data. In the Add Data wizard, select the Countries (or whatever you called your service connection) GET endpoint, and select the default List Item Template with the image. In the Bind Data screen, first select flag for field 1, then name for field 2, and then whatever additional fields you would like. Figure 5 shows an example of selected fields.

pwa figure 5

Figure 5: Visually binding specific fields from the response to the UI control

Testing and Deployment

With the mobile app created, you can start testing it. You can run the app live in the Oracle Visual Builder designer window, you can run and test it in the browser in a device preview window, and you can deploy it to a device as a native package and/or a PWA for testing and final distribution. To test the app in the browser, select the button toward the top right. A new browser window will open in which you can interact with the application and connect Google or Safari developer tools.

To generate the QR codes for app deployment, you need to set up the build for either a native package or a PWA. For a native package, you must upload Apple developer certificates and a provisioning profile for iOS and/or the Google keystore for Android. Oracle Visual Builder will generate the native package for you each time you stage your application or explicitly rebuild your app. You can also download the package and deliver the IPA (iOS App Store Package) or APK (Android Package) files directly to your end user or through the public app stores or an enterprise app store. To deliver your app to a device as a PWA, select the PWA option in your mobile app settings and configure a few optional settings. Figure 6 shows PWA settings available within Oracle Visual Builder for PWA deployment.

pwa figure 6

Figure 6: Easily generating a PWA that can be deployed to the device with a QR code or from a URL

The PWA settings for deployment offer a few options, including Application Name, Short Name, and Description. The short name is what is displayed on the device home screen. You can also use the PWA settings to upload a set of images for icons and splash screens. The Oracle Visual Builder default resource package includes example sets of icons and splash screens in the different required sizes to support several device types. You can replace those images with your own in that same size and upload them for this article’s PWA.

You can also specify which files you want installed on the device when you add it to the home screen. This option helps a PWA feel like a native app. As opposed to a web app, which must fetch all of its files, including the initial HTML page, the PWA caches the initial page and other selected files onto the device. The benefit, of course, is that it loads immediately and that, coupled with the removal of the browser chrome (including the address bar), the app looks and feels like a natively installed app.

With the PWA settings complete—accepting the defaults is fine—you can deploy the application to a device by scanning the QR code or by downloading and distributing the native package APK or IPA files. Figure 7 demonstrates the mobile app running in the browser with a QR code displayed to access the PWA and the iOS and Google packages for installation.

pwa figure 7

Figure 7: Running and testing the app with QR codes for device deployment

Conclusion

Thanks to advances in web technologies and standards, PWAs homogenize the various target platforms with a common technology and a progressive feature set that offers the ability to deal with—or take advantage of—some of the differences between them. PWAs remove the stigma often associated with web apps running on mobile devices, and the momentum of PWAs is clear, with large companies and app innovators alike taking advantage of this new approach.

What’s the Difference?

Within Oracle Visual Builder, a mobile app differs from a web app in the following ways:

  • The mobile app creation wizard includes an optional tabbed navigation view (a typical mobile UX pattern) and can autogenerate flows and pages for each tab.
  • The mobile app is designed within a mobile device frame that can be selected for common popular formats (iPhone X/8 and Samsung Android) and can be rotated back and forth between portrait and landscape mode.
  • The mobile app can generate a native package for Android and iOS (requires uploading developer certificates and provisioning profiles as needed).
  • The mobile app runtime can display UI controls and actions (for example, slide to delete a row) to match the target device (Apple or Android) UX.
  • The mobile app can include Cordova plugins for specific device features (requires building a native package for Android and/or iOS).
  • A mobile app can be deployed as a progressive web app.

Next Steps

LEARN more about progressive web apps.

TRY Oracle Visual Builder.

Illustration by Wes Rowell