By JT Thomas
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.
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
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.
Figure 2: Quickly creating web and mobile applications that integrate any REST service, server-side business objects, and business processes
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.
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.
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.
Figure 5: Visually binding specific fields from the response to the UI control
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.
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.
Figure 7: Running and testing the app with QR codes for device deployment
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:
LEARN more about progressive web apps.
Illustration by Wes Rowell