Create PWA Using Angular and deploy it in google play store in 5 minutes; with demo
Hi there, today’s article is a guide to building a progressive web app from scratch and deploy it to google play store. Easy and quick
let’s roll 🎲🍕 while eating pizza.
1- Step 1:
Assuming you have Angular CLI installed in your machine (if not please download it via https://cli.angular.io/ ).
- create your project run this command‘ ng new myPwaProject ’ it will create to you a default ready to go angular project.
- navigate to your project directory, now we are going to turn the default project to a progressive web app
use ‘ ng add @angular/pwa ‘ ;to install everything needed to run the pwa.
But what does the last command do?
- It adds serviceWorker: true in the production configuration.
- It creates two files at the root of the project: manifest.webmanifest and ngsw-config.json. A manifest file contains all pwa config (name, background, icons,…)
- It adds two lines in the index.html: A <meta name=”theme-color”> tag (you’ll want to change its value) and a <link> tag pointing to the manifest file.
- It adds icons in your assets folder. You will of course need to change them if you don’t want your app to run Angular logos as icons.
==> you already created pwa app congrats 🎉
2- Step 2:
After adding features to your app, you need to see how your pwa behaviors
(please note for advanced web application I recommend you to focus in the features supportable by pwa; PWA supports many features like local-storage, localisation, offline-mode, notifications ,… and many others.
Here a short video by Google Expert Jeff Delaney on pwa, check it out to understand pwa awesomeness.
to test your pwa with lighthouse from google, you need to run it in production mode (because pwa runs only on https:// protocol)
after deploying your app in the server you can see the magic, here an example of my angular application turned to pwa. Its a remastered version of the famous 2048 puzzle game designed by Italian web developer Gabriele Cirulli.
check it out 🎮🎮
see the + button on top right, it means that our app is pwa ready to install
on mobile phone.
3- Step 3, Deploy your PWA in play store:
navigate to https://appmaker.xyz/pwa-to-apk/ enter the URL of your PWA and click “Get started”
this tool will Convert any PWA (Progressive web app) to Google Play Ready Apps. It will generate an *.apk bundle from your pwaURL ready to install in your android phone.
Install your generated apk in your phone and test your app.
Easy, quick and save you a lot of time (instead of doing the whole manoeuvre of converting by all your-self, you can do it in one click)🚀🚀
Last part publish your app via google play console you need an account for that (if you don’t have one create one and pay 25$ dollar only once and you
can publish as many apps as you like )
The Google play console platform will guide you over the whole process
of deploying your app in play store (needed configuration: name of the app, owner, description, images ,countries availability, …). Once your release is in production it will take some time for the google team to review your app. When it is competed you will be notified and see your app rock in the play store.
Congrats 🎉🎉 you have a mobile application in the play store developed with html, css and JS (web tech) NO Android Skills needed!! 😲😲
I hope this tutorial helped you a bit in building a progressive web app and deploying it in the google play store.
Happy coding and cheers, check out my 2048tn game (pwa turned to native app )
