How To : Turn your website/webapp into Android APK with TWA technology and publish on Google Play

Now you can easily turn your website/web-app into APK file and publish on Google Play, promoting your website and earn money with services you provide !!!

It is not new to wrap your website with long existing technology such as Cordova. However the problem is Cordova uses webview which brings performance issue. I have very bad experiences becaue Cordova enlarge the text and distort UI element, totally destroy the look of the app. The good news is Google announce a new technoloy TWA == “Trusted Web Application” last year , it equals PWA + trusted activity. I won’t go deeper what it really means. I will step into the steps to turn a TWA website into APK file and push it to Google Play.

Steps:

• First make your website progressive : placemanifest.jsonand serviceWorker.js into the root directory of your project.
• upload your project to web hosting service, there are tons of options, for example github, netlify, firebase, etc. I use Github and Netlify to accomplish the task which I have to.
• Once you uploaded your project to cloud, open chrome console, check manifest, service Workers and Cache Storage options to see if everything is properly setup.
• 1st check Manifest, if you configure it right, you should be able to see things like below :

• 2nd Check Service Workers, you should see something like below

• 3rd Check Cache Storage, if the above 2 steps done correctly, all of your project files would be save into cache storage for offline use.

• However TWA has a rule which we have to create a .well-know folder under root directory with assetlinks.json .

• But Github has project name under root path so we can’t create TWA with Github. A workaround way is to import Github project to Netlify.

I am gonna skip Netlify tutorial because it it pretty easy and straightforward to upload github project into Netlify account. There is one thing to pay attention is that you gotta change the name of your website with your project name. Once it is done you are ready to move on to next stage which generates assetlinks.json and upload to Netlify account.

• Go to appmaker , copy your website address and paste into input box.

Press Get Statred . It checks if your website is PWA enabled. if it passed, then enter your email address and it generates apk file for you and send it to your email account

Press Create Now and download assetlinks.json

Go back to VS Code where you build your project, add .well-known folder under root directory and add assetlinks.json you received from appmaker under .well-known folder.

Use git command to update local repository and push to Github, Netlify automatically updates the website

git add .
git commit -m "add .well-know/assetlinks.json"
git push

Now we are ready to publish apk to Google Play. If the appmaker service is not working or stop free service, you have to do it manually with Android Studio. Please check out the video references below

References

PWA to Google Play Store with Trusted Web Activities (TWA)

Upload PWA to Play store using PWA2APK — Convert PWA to APK — PWA2APK

How to turn your Progressive Web App into a Native Android

How to upload an Android app to Google Play Store