Run Mobile Applications as PWAs

With enhanced capabilities for PWAs and the responsive template for web applications, mobile applications have been deprecated in favor of PWAs. You can no longer create a new mobile application in Visual Builder, but you can continue to use an existing mobile app by deploying it as a PWA.

To deploy your existing mobile app as a PWA, first import it, then enable the PWA option in the application's Settings page before you stage or publish the mobile app. Once you do that, you can build your PWA-enabled mobile application to generate a QR code, which users can scan to install the app on their devices. This way, you can have a single application that is installable and can scale from desktop to tablet to mobile. It can also work offline if configured for offline support.

Note:

You can continue to use your existing mobile apps until July 2024 when mobile apps, including PWA-enabled ones, reach End of Life (EOL). To use your mobile PWAs beyond July 2024, we strongly urge you to transition your mobile app as a web app and deploy it as a PWA.

Configure Mobile Application Settings

Review the settings for an imported mobile application to verify that it has the appropriate values.

Click the Mobile Applications tab.
Click the app_name node and click Settings.
The General tab is displayed.

Description of the illustration mob_conf_app_setng_redwood.png
In the Application Settings page, select the main or starting page for your mobile app from the Default Page list. This page is displayed when you open the app.
Select a value to specify the theme, if any, to use for the mobile app.

Note:
Your mobile application's theme defaults to the latest JET theme at the time of creation. If your app was created with Visual Builder 20.07 or earlier, the theme is likely to be Alta (which was the default at that time). If your application was created with Visual Builder 20.10 or later, the Redwood theme is likely the default for your application. You can change the theme in the mobile app's Settings editor, but you can't assume that changing the theme from Alta to Redwood will automatically work, as components' dimensions and styling are different between the two themes. See Customize the Redwood Theme for a Web Application.
In the App Name field, enter the app name that is to be displayed when the app is installed on a mobile device.
Enter the name of the vendor who originated the application in the Vendor Name field.
Enter text that describes the application in the Description field.

Build a Mobile Application as a PWA

Build your PWA-enabled mobile application to generate a QR code for the application. Users can scan the QR code to install the mobile application as a PWA for testing as well as for production.

Staging and publishing a mobile application is similar to what you'd do to stage and publish a web application, except that you first build your mobile app with the information that lets users install the app on supported platforms.

Follow these steps to stage a PWA-enabled mobile application:
1. Open the PWA-enabled mobile application that you want to build.
2. Click the Preview icon () to run the app on a new tab in the browser.
3. When the mobile app opens in the browser, click the Build my App button.
  
  Description of the illustration mob_run_app.png
4. In the Stage Application dialog box, select the appropriate option to determine what to do with your business objects, then click Stage.
  
  Description of the illustration mob_stage_app.png
  
  When the build is complete, the generated QR code is displayed.
5. Scan the QR code to install the mobile application on a supported device. Alternatively, click the Launch in Browser link to view the app in your laptop or device browser.
  
  Description of the illustration mob_run_app_pwa_built_side.png
  
  When you open the link, you can use the Install icon in the address bar (as highlighted here) to install your app on your laptop or device:
  
  Description of the illustration mobilepwa-install.png
Follow these steps to publish your staged PWA-enabled mobile application and make it live:
1. Open the PWA-enabled mobile application you want to publish.
2. Select Publish from the application’s Menu option in the upper right corner.
3. In the Publish Application dialog box, specify what to do with your business object data, then click Publish:
  
  Description of the illustration mob-publish.png
  
  The schema and data from the staging database are copied to the live database.
4. To view the published app, go to the Visual Applications home page and locate your application. Click Live in the Status column, then select your mobile application.
  
  The application opens in a new browser tab on the application's start page. On the right is the QR code that users can use to install the mobile application on a supported device. The option to launch the app in a browser is also available. You can now share this application URL with your users.

Convert a Mobile PWA to a Web PWA

To be able to use your mobile apps beyond 2024 (when they reach End of Life), we strongly urge you to convert your existing mobile app to a web app and deploy it as a PWA.

To convert your PWA-enabled mobile app to a web app:

Open an existing mobile application, then export the application to download it as a ZIP archive to your local file system.

Description of the illustration export.png

Note:
Create a backup of the application's ZIP archive, so you have a copy you can use in case you run into issues.
Extract the contents of the archive. You should see something similar to this directory structure:
```
businessObjects/
mobileApps/
settings/
Gruntfile.js
package.json
visual-application.json
```
Create a new webApps directory (take note of the capitalization) in the extracted folder.
Copy the contents of your mobileApps directory into the webApps directory. For example, if your mobileApps directory contains a hrmobileapp folder, copy the hrmobileapp folder to the webApps directory.
Go to the mobile app directory you copied into the webApps directory (hrmobileapp for example) and remove these files:
- manifest.json
- settings/appShellCache.json
- settings/build-configurations.json
- settings/mobile-build.json
- mobile-build-templates/* (if it exists)
Compress the webApps directory into a new archive (for example, webApps.zip).
Tip:
If you're working on a Mac, use these steps to create an archive:
```
% cd <Visual Application Directory>
% find . -name '.DS_Store' -type f -delete
% zip -r webApps.zip webApps
```
With your mobile application openin Visual Builder, import the webApps archive you created. Don't select the Delete existing files and resources option:

Description of the illustration importresources.png

Your new web app should now show up in the Web Apps pane.
Enable PWA support for your new web app:
1. Select the app's <app name> node in the Web Apps pane, then click Settings and PWA.
2. Click the Enable Progressive Web App (PWA) toggle to disable and re-enable PWA support.
3. Review PWA settings for your web app. You might want to change the Manifest Settings and create an Offline Fallback Page.
Description of the illustration pwa-convert.png
Now stage your application to test and make sure everything works as expected.

Your new web PWA should work the same way as your original mobile PWA. When your PWA-enabled web app opens in a browser:
1. Use the device toolbar in the browser's Developer tools to debug your app in a simulated mobile environment:
  
  Description of the illustration pwa-convert-debug.png
2. Use the install icon in the app's address bar to install your web app:
  
  Description of the illustration pwa-convert-install.png
3. Use the share icon in the app's address bar to generate a QR code that will allow users to quickly open the web app on a mobile device via its camera:
  
  Description of the illustration pwa-convert-qrcode.png
After you've confirmed that your app works as expected, you can choose to delete the mobile app from your visual application.

Note:
If your mobile app leveraged the Oracle JET Offline Persistence Toolkit to provide offline capabilities, you need to publish your application using Grunt commands, or better yet, use the package and deploy pipeline in VB Studio.