How to embed a PWA inside an Android application
Welcome to my first Medium story for 2021! In this story I’ll covering how to wrap a Progressive Web Application inside an Android application. In order to proceed with this tutorial you need to have Android Studio (or IntelliJ IDEA with support for Android development) and Android SDK installed.
Please note that I won’t be covering how to publish the application on Google Play as a part of this tutorial, so its’ only the coding part. Let’s get started once you have the development environment up and running.
Open your IDE and choose Create New Project option. In the new project window choose Android and select Add No Activity. Once you press next you’ll be presented with a screen to configure your project. Refer the image below and provide values as per your project’s requirement. Once you’re done click on Finish button.
Once your application is ready open build.gradle file inside the root directory and add maven { url ‘https://jitpack.io' } as shown below.
allprojects {
repositories {
google()
jcenter()
maven { url 'https://jitpack.io' }
}
}Then open the build.gradle file inside the app directory and make the changes as highlighted in green below. Make sure to replace www.website.com and https://www.website.com with the hostname and URL of your PWA.
Finally AndroidManifest.xml file inside app/src/main directory needs to be edited. Make changes referring to the text highlighted in below image.
We’re all set now. Please note that you might have to follow some additional steps like setting up a key-store, using an upload-key to sign the application, generate a statement file on your site to enable App Linking etc. in order to make the application fully functional. I have created starter kit which can be accessed via following GitHub repository.
Below is a DEV Community video I have recently published and if you’re interested check out my previous Medium story on Adding a launch screen to an iOS app. Happy Coding!
