Compiling Apps for Distribution
A typical VisualNEO Web app may contain text, images, animation, sound, video and other elements. These elements may be separate files stored in various locations on your computer. Before you can begin distributing your finished app, you will need to collect all of this content into a single folder or a special packaged file. This final step in the process is called compiling.
VisualNEO Web’s Compiler is capable of producing finished applications in four different formats. These include:
- Web Application / Website (HTML)
This type of app, also known as WebApp, can be run locally or uploaded to a web server and accessed through a web browser like a website.
In Platform Options you can select PWA (Progressive Web App) and/or NW.js as deployment targets.
PWAs can are installable and can be published on mobile App Stores and Windows Store under some requirements, using pwabuilder online services.
NW.js applications can be packaged as Stand Alone applications for Windows, Linux and Mac OS X.
- Mobile Application (Phone / Tablet)
Mobile apps are designed to run on a mobile phone or tablet using the Android, Apple iOS operating system.
VisualNEO Web packs your app for VoltBuilder online service.
Alterntively you can unzip the generated file and use Apache Cordova locally.
To compile a web app into an Android App Bundle (aab) using Cordova, you will need to use the Cordova CLI and set up an Android development environment on your development machine.
You will also need to have access to the source code of the web app you want to compile.
Once you have set up the development environment, you can use the following steps to compile a web app into an aab file using Cordova:
- Create a new Cordova project using the Cordova CLI.
- Add the Android platform to the project using the Cordova CLI.
- Copy the source code of the web app into the project's "www" directory.
- Use the Cordova CLI to build the app for the Android platform, specifying the "-- --bundle" flag to generate an aab file instead of an .apk file. For example:
cordova build android -- --bundle
The aab file will be generated in the project's "platforms/android/app/build/outputs/bundle" directory.
You can then use the aab file to publish your app on the Google Play Store or distribute it to users using other methods.
Each of these formats has advantages and disadvantages. VisualNEO Web's compiler can create Web and Windows Desktop Applications on its own. Mobile Applications for Android, Apple iOS and Windows Phone devices will also need to be processed by an easy-to-use online service called PhoneGap Build. The compiler generates a special ZIP file that is uploaded to PhoneGap Build where it is converted into a native Android, Apple iOS or Windows Phone app that you can post to App Stores or download directly onto your device*.
*Apple devices do not permit compiled apps to be downloaded directly. Instead they must be passed through an Apple Store account.
Installing your PWA Apps on any Device
In order to install your PWA you will need to upload it to a hosting service (like CloudNEO) with a SSL certificate to allow security https:// protocol.
Then access your PWA through a compatible Web Browser (Chrome, Edge) and press the "Install" button.
Be sure to include icon, title, description, version, etc. before publishing your app as a PWA, so it meets the criteria to be considered a PWA.
To publish and install a Progressive Web App (PWA) on a mobile device, you will need to host the app on a web server and make it accessible via a public URL. Once the app is hosted and accessible online, you can use the following steps to install it on a mobile device:
- Open the app's URL in a web browser on the device where you want to install the app.
- If the app meets the criteria for a PWA, the browser will display a prompt asking if you want to add the app to your home screen.
- Tap the "Add to home screen" button to install the app.
- The app will be added to your home screen and can be launched like any other installed app.
Note that the ability to add a PWA to the home screen may vary depending on the browser and device you are using. Some browsers may not support the feature, or may require additional steps to install the app.
Installing your Apps as a NW.js Stand Alone Application in Windows, Linux and Mac OS X
On Windows and Linux, you can put the files of your app in the same folder of NW.js binaries and then ship them to your users. Make sure nw (or nw.exe) is in the same folder as de generated package.json. Or you can put the files of your app in a folder named package.nw in the same folder as nw (or nw.exe).
On Mac, put the files of your app into a folder named app.nw in nwjs.app/Contents/Resources/ and done.
Installing Mobile Apps on Android Devices
In order to install your Android app you will need to configure your phone/tablet to allow non-app-store applications to be installed. To do this press the "Menu" button from the device's main screen and tap the "Settings" icon. Then tap "Security" and check the box next to "Unknown sources." A message warning you about the risks of installing non-market applications will appear. Touch "OK" to accept.
To install a local .aab file on an Android device, you will need to transfer the file to the device and use a file manager app to install it.
Here is a general outline of the steps you can follow to install a local .aab file on an Android device:
- Transfer the .aab file to the Android device using a USB cable or another method such as email or cloud storage.
- Open the file manager app on the Android device and navigate to the location where the .aab file is stored.
- Tap the .aab file to open it.
- If the device is configured to allow installation of apps from unknown sources, a prompt will appear asking if you want to install the app.
- Tap the "Install" button to begin the installation process.
- The app will be installed on the device and can be launched from the home screen or app drawer.
Note that the steps and exact user interface may vary depending on the device and file manager app you are using.
After installing your app you may want to go back to settings and turn off the "unknown sources" option for security.