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 VB Studio, 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 build 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 VB Studio 20.07 or earlier, the theme is likely to be Alta (which was the default at that time). If your application was created with VB Studio 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.

Sharing and deploying a mobile application is similar to what you'd do to share and deploy a web application, except that you need to first build your mobile app with the information that lets users install the app on supported platforms.

Follow these steps to share a PWA-enabled mobile application for others to test your app:
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.
4. In the Share Visual Application dialog, click Share.
  VB Studio builds the app in the background. Once it completes, it closes the Share Visual Application dialog.
5. Return to the Designer and, in the visual application workspace toolbar, click the Menu option and select Open Shared Application.
  
  VB Studio opens a new browser tab, with a QR code and a link to open the app in your laptop or device browser. Scan the QR code to install the mobile app on a supported device. Alternatively, click the Launch in Browser link to view the app in your laptop or device browser.
  
  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 deploy your PWA-enabled mobile application and make your changes public:
1. Open the PWA-enabled mobile application you want to deploy.
2. Click Publish to push your changes to the Git repo and trigger a deployment job.
  
  Deploying a live version of your app requires the Include version in URL field in the deployment job to not be selected. See Deploy a Live Version of an Application. For information on settings for production deployment build jobs, see Create a Production Deployment Build Job.

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 the visual application containing your existing mobile application, then export the application to download it as a ZIP archive to your local file system.

Description of the illustration export-vbs.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/
.gitignore
Gruntfile.js
package.json
Readme.md
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 open in the Designer, 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 share 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 deploy your application using Grunt commands.