Get started developing a PWA or Hybrid web app for Android
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.
There are two popular distributions of Cordova:
PhoneGap: Support has been discontinued by Adobe.
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.
Create a new project with Ionic Cordova and Angular
Install Ionic and Cordova by entering the following in your command line:
npm install -g @ionic/cli cordova
Create an Ionic Angular app using the "Tabs" app template by entering the command:
ionic start photo-gallery tabs
Change into the app folder:
cd photo-gallery
Run the app in your web browser:
ionic serve
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:
npm install -g @ionic/cli native-run cordova-res
Create an Ionic Angular app using the "Tabs" app template and adding Capacitor by entering the command:
ionic start photo-gallery tabs --type=angular --capacitor
Change into the app folder:
cd photo-gallery
Add components to make the app a PWA:
npm install @ionic/pwa-elements
Import @ionic/pwa-elements by add the following to your src/main.ts file:
import { defineCustomElements } from '@ionic/pwa-elements/loader';
// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);
Run the app in your web browser:
ionic serve
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:
npm install -g @ionic/cli
Create a new project with React by entering the command:
ionic start myApp blank --type=react
Change into the app folder:
cd myApp
Run the app in your web browser:
ionic serve
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:
ionic cordova run android
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): See the [Android developer guide]](https://developer.android.com/studio/run/managing-avds.html).
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:
ionic cordova emulate android --list
See the Cordova Emulator in the Ionic docs for more info.
Windows developer