How To Develop A Progressive Web Application On An Android Device

In the past few weeks I’ve been wondering how the whole eco-system of a Progressive Web Application (PWA) works. As always, I need to get my hands dirty and code something to understand it.

My main goal is to provision a local development environment,…


This content originally appeared on DEV Community and was authored by Meir Gabay

In the past few weeks I've been wondering how the whole eco-system of a Progressive Web Application (PWA) works. As always, I need to get my hands dirty and code something to understand it.

My main goal is to provision a local development environment, which hot-reloads (code changed) the application on a physical Android device.

The main challenge was to figure out a way to access the PWA which is running on my local machine from my Android device (Samsung Galaxy S10). Why you ask? Because PWA requires HTTPS access so using IP addresses is not an option.

Ladies and gentleman, I present to you - unfor19/pwa-quasar-local

This project demonstrates how to develop a Progressive Web Application (PWA) locally on an Android device, using the Quasar Framework v2.

Final Results

IMPORTANT: Images may look weird on DEV.to, not sure why. Go to the GitHub repo unfor19/pwa-quasar-local if you experience weird widths and heights

I took screenshots with my Android device during the process to document the full user-experience of installing a PWA for the first time.

Accessed PWA From Android Device

The Add to Home Screen popup appears!

Image description

Clicked Add To Home Screen

Image description

Clicked Install

Image description

Installation Completed

Image description

PWA Appears On The Device's Apps List

Image description

PWA Has A Cool Splashscreen

That is thanks to Quasar which does it, as always, automatically.

Image description

First Run After Installation

The application is running on the device as if it were a "normal application".

Image description

Final Words

It was a true joy to work with Quasar since it made the whole process of generating a PWA out-of-the-box, without writing a single line of code. So head over to unfor19/pwa-quasar-local and do your PWA magic!


This content originally appeared on DEV Community and was authored by Meir Gabay


Print Share Comment Cite Upload Translate Updates
APA

Meir Gabay | Sciencx (2021-12-02T20:46:17+00:00) How To Develop A Progressive Web Application On An Android Device. Retrieved from https://www.scien.cx/2021/12/02/how-to-develop-a-progressive-web-application-on-an-android-device/

MLA
" » How To Develop A Progressive Web Application On An Android Device." Meir Gabay | Sciencx - Thursday December 2, 2021, https://www.scien.cx/2021/12/02/how-to-develop-a-progressive-web-application-on-an-android-device/
HARVARD
Meir Gabay | Sciencx Thursday December 2, 2021 » How To Develop A Progressive Web Application On An Android Device., viewed ,<https://www.scien.cx/2021/12/02/how-to-develop-a-progressive-web-application-on-an-android-device/>
VANCOUVER
Meir Gabay | Sciencx - » How To Develop A Progressive Web Application On An Android Device. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/02/how-to-develop-a-progressive-web-application-on-an-android-device/
CHICAGO
" » How To Develop A Progressive Web Application On An Android Device." Meir Gabay | Sciencx - Accessed . https://www.scien.cx/2021/12/02/how-to-develop-a-progressive-web-application-on-an-android-device/
IEEE
" » How To Develop A Progressive Web Application On An Android Device." Meir Gabay | Sciencx [Online]. Available: https://www.scien.cx/2021/12/02/how-to-develop-a-progressive-web-application-on-an-android-device/. [Accessed: ]
rf:citation
» How To Develop A Progressive Web Application On An Android Device | Meir Gabay | Sciencx | https://www.scien.cx/2021/12/02/how-to-develop-a-progressive-web-application-on-an-android-device/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.