Download the library¶
Add libnode.so to the project¶ Copy the library files¶. In the Android Studio Project, there should be a libnode/ folder inside the project's app/ folder, created in a previous instruction.
The Android shared libraries are distributed in a zip file, which you can download from the core library release page.
- Hybrid web apps: Code (HTML, JS, CSS) is packaged in an APK and can be distributed via the Google Play Store. The viewing engine is isolated from the users' internet browser, no session or cache sharing. Progressive Web Apps (PWAs): Code (HTML, JS, CSS) lives on the web and doesn't need to be packaged as an APK. Resources are downloaded.
- Mar 18, 2021 It's very much possible to build NodeJS applications on docker scratch image. Commands on the Scratch needs to be thoroughly verified by pointing to right path for node executable, if not it will result in crash as there will be no command line interface on scratch base. Here is the dockerfile for sample NodeJS todo application and git reference.
The zip file contains Android binaries for the armabi-v7a
, x86
, arm64-v8a
and x86_64
architectures.
Creating your First Project¶
The following steps will guide you through creating an Android Studio project that uses the library and is built with Gradle. The complete project can also be downloaded from the samples repo.
This sample runs the Node.js engine in a background thread to start an HTTP server on port 3000 and return the process.versions
value. The app's Main Activity UI has a button to query the server and show the server's response. Alternatively, it's also possible to access the server from a browser running on a different device connected to the same local network.
Android SDK Requirements¶
When you build your project, Gradle will automatically try to detect any missing dependencies and prompt you to install them from within the Android Studio event log. Here's the list of pre-requisites in case you want to download them from the SDK Manager:
- API Level greater or equal to
Marshmallow
(API Level 23) - CMake
- Android SDK Platform-Tools greater or equal to
Marshmallow
(API Level 23) - Android SDK Build-Tools greater or equal to
Marshmallow
(API Level 23) - NDK version 15 or greater
Create an Android Studio Project¶
Using the Android Studio's New Project wizard, create a new Project with the following settings, by the order the options appear in screens:
Include C++ support
checked- Phone and Tablet with Minimum SDK to
API 21: Android 5.0 (Lollipop)
- Empty activity selected
- Left the defaults, which were:
- Activity Name: MainActivity
Generate Layout File
checked- Layout Name: activity_main
Backwards Compatibility (AppCompat)
checked
- Left the defaults, which were:
- C++ Standard: Toolchain Default
Exceptions Support (-fexceptions)
checked offRuntime TYpe Information Support (-frtti)
checked off
- Finish
Copy libnode's header files¶
Apk Add Nodejs 14
To access libnode's Start()
entrypoint, the libnode's header files are required.
Create the libnode/
folder inside the project's app/
folder.
In the downloaded zip file, you can find the header files inside the include/
path. Copy this folder to app/libnode/include
. If it's been done correctly you'll end with the following path for the node.h
header file: app/libnode/include/node/node.h
In app/CMakeLists.txt
add the following line to add libnode's header files to the CMake include paths:
Add native JNI function to start node.js¶
Edit app/src/main/cpp/native-lib.cpp
to add the required include files:
Convert the existing stringFromJNI
function into the startNodeWithArguments
function, which takes a Java String array, converts it into a libuv
friendly format and calls node::Start
. The function's signature has to be adapted to the chosen organization/application name. Use the already existing stringFromJNI
function as a guide. In this sample's case, it meant changing from:
to:
The final native-lib.cpp
looks like this:
Call startNodeWithArguments
from Java¶
A few changes are required in the application's main file MainActivity.java
.
Load libnode.so:¶
Instruct Java to load the libnode.so
library by adding System.loadLibrary('node');
to MainActivity.java
after System.loadLibrary('native-lib');
.
Download macos big sur beta iso. The prefix lib
and the suffix .so
in libnode.so
are omitted.
Remove references to stringFromJNI
¶
Remove the references to the stringFromJNI
function (which we have replaced in native-lib.cpp
), by deleting the following snippets:
Start a background thread to run startNodeWithArguments
¶
The app uses a background thread to run the Node.js engine.
Note
Currently, only a single instance of the Node.js runtime can be started within an application. Restarting the engine after it has finished running is also not supported.
The node code is a simple HTTP server on port 3000 that returns process.versions
. For semplicity, the node code is embedded in the MainActivity.java
file:
Add a reference to the startNodeWithArguments
function, the Java signature is public native Integer startNodeWithArguments(String[] arguments);
.
The MainActivity
class looks like this at this point:
Specify required permissions in the manifest¶
Since the app runs an HTTP server, it requires the right permissions in app/src/main/AndroidManifest.xml
. Add the following line under the <manifest>
tag:
Add libnode.so
to the project¶
Copy the library files¶
In the Android Studio Project, there should be a libnode/
folder inside the project's app/
folder, created in a previous instruction. Copy the bin/
folder from inside the downloaded zip file to app/libnode/bin
. If it's been done correctly you'll end with the following paths for the binaries:
app/libnode/bin/arm64-v8a/libnode.so
app/libnode/bin/armeabi-v7a/libnode.so
app/libnode/bin/x86/libnode.so
app/libnode/bin/x86_64/libnode.so
Apk Add Nodejs Command
Configure CMake¶
In app/CMakeLists.txt
specify the native shared library to import and its location:
Add libnode
to the already existing target_link_libraries
:
Configure the app's gradle settings¶
In app/build.gradle
, some changes have to be made to correctly build and package the application.
We have to instruct gradle to only package native code for the supported architectures, by adding an ndk
clause inside defaultConfig
:
The shared library was built using the libC++
STL, therefore the ANDROID_STL=c++_shared
definition has to be passed inside the cmake clause in defaultConfig
with arguments '-DANDROID_STL=c++_shared'
:
Configure gradle to override its default sourceSets
to include the libnode.so folder path, in the android
section:
Add simple UI for testing¶
At this point, it's already possible to run the app on an Android device and access the HTTP server from any device connected to the same local network. If the Android device's IP is 192.168.1.100
point the browser at http://192.168.1.100:3000/
.
However, the sample also comes with the UI to query the local HTTP server and show the response.
Create a Button and TextView¶
Edit the activity_main.xml
( app/src/main/res/layout/activity_main.xml
) in Android Studio, delete the existing TextView
and add a Button
with id btVersions
and a TextView
with id tvVersions
Add Button event to access the HTTP server¶
In MainActivity.java
, create an event to connect to the HTTP server when tapping the Button
and place the resulting response in the TextView
. Start by adding the required import statements
:
Next, create the Button
event in MainActivity
's onCreate
function, after the Node.js thread's initialization.
Tapping the button in the app sends an asynchronous request to the local Node.js HTTP server and shows the response in the TextView
.
This guide will help you to get started creating a hybrid web app or Progressive Web App (PWA) on Windows using a single HTML/CSS/JavaScript codebase that can be used on the web and across device platforms (Android, iOS, Windows).
By using the right frameworks and components, web-based applications can work on an Android device in a way that looks to users very similar to a native app.
Features of a PWA or Hybrid web app
There are two main types of web apps that can be installed on Android devices. The main difference being whether your application code is embedded in an app package (hybrid) or hosted on a web server (pwa).
Hybrid web apps: Code (HTML, JS, CSS) is packaged in an APK and can be distributed via the Google Play Store. The viewing engine is isolated from the users' internet browser, no session or cache sharing.
Progressive Web Apps (PWAs): Code (HTML, JS, CSS) lives on the web and doesn't need to be packaged as an APK. Resources are downloaded and updated as needed using a Service Worker. The Chrome browser will render and display your app, but will look native and not include the normal browser address bar, etc. You can share storage, cache, and sessions with the browser. This is basically like installing a shortcut to the Chrome browser in a special mode. PWAs can also be listed in the Google Play Store using Trusted Web Activity.
PWAs and hybrid web apps are very similar to a native Android app in that they:
- Can be installed via the App Store (Google Play Store and/or Microsoft Store)
- Have access to native device features like camera, GPS, Bluetooth, notifications, and list of contacts
- Work Offline (no internet connection)
PWAs also have a few unique features:
- Can be installed on the Android home screen directly from the web (without an App Store)
- Can additionally be installed via the Google Play Store using a Trusted Web Activity
- Can be discovered via web search or shared via a URL link
- Rely on a Service Worker to avoid the need to package native code
You don't need a framework to create a Hybrid app or PWA, but there are a few popular frameworks that will be covered in this guide, including PhoneGap (with Cordova) and Ionic (with Cordova or Capacitor using Angular or React).
Apache Cordova
Apache Cordova is an open-source framework that can simplify the communication between your JavaScript code living in a native WebView and the native Android platform by using plugins. These plugins expose JavaScript endpoints that can be called from your code and used to call native Android device APIs. Some example Cordova plugins include access to device services like battery status, file access, vibration / ring tones, etc. These features are not typically available to web apps or browsers.
Mac catalina dmg download. There are two popular distributions of Cordova:
PhoneGap: Support has been discontinued by Adobe.
Adobe PhoneGap
Support was recently discontinued. For more, see this blog post from Adobe.
Install PhoneGap
To get started building a PWA or hybrid web app with PhoneGap, you should first install the following tools:
- Node.js for interacting with the Ionic ecosystem. Download NodeJS for Windows or follow the NodeJS installation guide using Windows Subsystem for Linux (WSL). You may want to consider using Node Version Manager (nvm) if you will be working with multiple projects and version of NodeJS.
Install PhoneGap by entering the following in your command line:
To create a new PhoneGap project, follow their steps to Get started. Visit the PWA Features section of the PhoneGap docs to learn how to move your app from being a hybrid to a PWA.
Ionic
Ionic is a framework that adjusts the user interface (UI) of your app to match the design language of each platform (Android, iOS, Windows). Ionic enables you to use either Angular or React.
Note
There is a new version of Ionic that uses an alternative to Cordova, called Capacitor. This alternative uses containers to make your app more web-friendly.
Get started with Ionic by installing required tools
To get started building a PWA or hybrid web app with Ionic, you should first install the following tools:
Node.js for interacting with the Ionic ecosystem. Download NodeJS for Windows or follow the NodeJS installation guide using Windows Subsystem for Linux (WSL). You may want to consider using Node Version Manager (nvm) if you will be working with multiple projects and version of NodeJS.
VS Code for writing your code. Download VS Code for Windows. You may also want to install the WSL Remote Extension if you prefer to build your app with a Linux command line.
Windows Terminal for working with your preferred command-line interface (CLI). Install Windows Terminal from Microsoft Store.
Git for version control. Download Git. Netflix app for macbook free download.
Create a new project with Ionic Cordova and Angular
Install Ionic and Cordova by entering the following in your command line:
Create an Ionic Angular app using the 'Tabs' app template by entering the command:
Change into the app folder:
Run the app in your web browser:
For more information, see the Ionic Cordova Angular docs. Visit the Making your Angular app a PWA section of the Ionic docs to learn how to move your app from being a hybrid to a PWA.
Create a new project with Ionic Capacitor and Angular
Install Ionic and Cordova-Res by entering the following in your command line:
Create an Ionic Angular app using the 'Tabs' app template and adding Capacitor by entering the command:
Change into the app folder:
Add components to make the app a PWA:
Import @ionic/pwa-elements by add the following to your src/main.ts
file:
Run the app in your web browser:
For more information, see the Ionic Capacitor Angular docs. Visit the Making your Angular app a PWA section of the Ionic docs to learn how to move your app from being a hybrid to a PWA.
Create a new project with Ionic and React
Install the Ionic CLI by entering the following in your command line:
Create a new project with React by entering the command:
Change into the app folder:
Run the app in your web browser:
For more information, see the Ionic React docs. Visit the Making your React app a PWA section of the Ionic docs to learn how to move your app from being a hybrid to a PWA.
Test your Ionic app on a device or emulator
To test your Ionic app on an Android device, plug-in your device (make sure it is first enabled for development), then in your command line enter:
To test your Ionic app on an Android device emulator, you must:
Install the required components -- Java Development Kit (JDK), Gradle, and the Android SDK.
Create an Android Virtual Device (AVD).
Enter the command for Ionic to build and deploy your app to the emulator:
ionic cordova emulate [<platform>] [options]
. In this case, the command should be:
See the Cordova Emulator in the Ionic docs for more info.