To download NI software, including the products shown below, visit ni.com/downloads.
You can use third party tools wrap a WebVI in a thin application shell so that users can install it on their mobile device home screen. This example includes instructions for doing this with the Capacitor project.
This approach is useful if you want the app to feel "native" (access to device capabilities and installed via an app store). Progressive Web Apps offer an alternative approach that's simpler to develop but slightly less native.
Capacitor works by emitting a project that you can build with the platform's native app development toolchain. This means you'll need to install that toolchain on your development computer and may need to refer to developer training materials from iOS or Android to understand the build workflow and to troubleshoot problems.
To help you understand the complexity, here are a few of the components needed for app development:
iOS: A Mac with the Xcode development environment or an account with a third party service that builds in the cloud. Publishing to the App Store requires a paid Apple Developer account. Apple also offers ways to distribute apps to a limited set of users.
Android: A computer with Android Studio and the Android SDK. Publishing to the Google Play Store requires a Google Developer Account.
These are steps you can follow to set up and build a Capacitor application that wraps a WebVI.
npmis not found ensure you installed Node and it added
npmto your search path.
npm initwill prompt you for basic configuration. This information is not used by Capacitor and it's ok to enter any values you like if you don't plan to publish the source to NPM. See
capacitor/package.jsonin this repo for sample values.
wwwwithin your project folder.
capacitordirectory in this repository.
Follow these steps to make changes to the WebVI after setting up the project.
You should consider what services your WebVI will communicate with to display data. Options include:
The app bundle that Capacitor creates includes all of the files generated when you build a WebVI. Capacitor hosts these files on a web server contained within the app. This means that the WebVI will only have access to network resources that are accessible from the mobile device where the app is running.
If your data is available on your LAN you may experience CORS errors when accessing it from the Capacitor application. See the CORS Errors documentation from Capacitor for suggestions to resolve these.
For more details on this topic, see Communicating Data with a Web Application.
Since the WebVI panel may be presented on screens of different sizes, you should strongly consider setting the WebVI panel to use Flexible Layout. This will automatically adjust the size and position of objects on the panel in response to the size of the screen on which it's displayed.
These are some additional capabilities that should be possible with this approach but aren't covered in this example. If you try these out and find success please contribute what you learned to this document or to the source repo!
The Capacitor community offers plugins for building desktop applications using Electron. You can find more information in their documentation.
If you don't have access to a Mac but want to build an iOS application, you may try a third-party cloud service like Ionic App Flow. These services should allow you to upload your built WebVI to their site and they'll build and publish it to the app store for you.
Example code from the Example Code Exchange in the NI Community is licensed with the MIT license.