Convert a Mobile App to a Web PWA

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

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 importresources1.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-install1.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
  
  If the icon doesn’t show in the address bar, select Cast, save, and share from the browser’s customization menu, then Create QR code.

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.