DEV Community

loading...
Cover image for PWA - Why should you use it and not use it?

PWA - Why should you use it and not use it?

Tharun Shiv
Web Developer | DevOps Engineer | Programmer | Course Instructor
Updated on ・4 min read

In the current world of technologies, one of the technologies that is currently booming is the PWA. It was introduced by Google in 2015 and since then plenty of websites have adopted this technology. And the result obtained through this are also marvelous.

What am I talking about?

PWA stands for Progressive Web Apps. PWA is a web app, which can be displayed in the form of a regular App on a phone ( platform-independent) and also works like a regular responsive website on the internet. It is like building a usual website, using the same technologies that you would use, but giving that extra functionalities and advantages of Progressive Web Apps. It is light, fast and secure.

What extra stuff does it use?

You can build your website mostly the way you would always, considering you have set up a responsive layout and works on majority of the browsers. It consists of Javascript mainly and uses Service Workers, in which the server of the PWA is saved in the user’s web browser, and from time to time new feeds are loaded into it. This is the main reason of the speed of a PWA. So these service workers takes care of features which we will be talking about below.

The Advantages of building a PWA:

1. Responsive Layout
Yes, you have to build a Responsive Website. This would surely attract a lot of mobile users to your website. Today Most of the market is from the mobile users. So you got this checked.

2. Available in offline Mode
Oh Yeah. Once you use the PWA website on your browser, the cache of the website will automatically save in your web browser. Which means that you can later easily view the webpage in the Offline mode.

3. Add to the Home Screen
Once you open a PWA website, you will get a prompt to add it to your home screen. This makes it easy for the users, and even the website traffic will increase

4. Acts like a Mobile App
You heard it right, from then onwards when you open a PWA it will act like a mobile App. Opens without the URL bar and other Tab options. Gets installed on the phone ( without harmful access to the Phone’s hardware and software ).

5. Push Notifications
Sending notifications to the user phones even when the website is closed. You can do that??? Yup , totally possible.

6. Very less memory space
I used the very on purpose. Imagine a 10MB Play Store app working at 250kb on your phone. I’m serious.

7. Cross-Platform
Develop a PWA compatible web app and use it on any phone which supports Chrome Browser, on any desktop which has a browser. Yes! Yes! YESS!


Every coin has a flip side to it

The Disadvantages

1. There is a catch with the push notifications
To enjoy the push notifications and in prompt builds, the website needs to use the secured TL connection.

2. Not easy for a beginner to get started
If you are a developer and you want to develop PWAs then you have to have the knowledge of HTML, CSS, Javascript, ES6 and a minimal understanding of the related technologies which you may encounter on your way. Though there are easy shortcuts to get started, ( Now that is for another blog post )

3. No download store presence
You cannot have a direct pwa at the Play Store or the App store.

4. Cannot modify the splash screen that easily
The splash screen that appears when you open the PWA is not customizable out of the box.

Also note that your website must be served through https which means you need an SSL certified connection.


Conclusion

  • PWAs are always going to be great technology. It has just begun its journey and it has a huge way to go.
  • It is now being served as a cheaper option than a native app, where you need an app to have minimal animation and native app support.
  • New Inventions are going to be seen. Until then try to gain the PWA knowledge.

Example

My recent PWA: https://bit.ly/stick-it-notes
Will get back to y'all on another post as to how I built it without coding any PWA part

Wanna Learn JavaScript?

I have got the exact place where you can learn it from, ask doubts and also get a Certificate on Completion. Check out this course from Udemy (Click) JavaScript Modern ES6 - 2020 - The Complete Course - Udemy. The first few videos are free on my YouTube Channel. Try them out here: Developer Tharun - YouTube - JavaScript Playlist Thank you for reading!

Did you know the 4 ways to use Generator Functions?

Written by Tharun Shiv, originally at https://tharunshiv.com

[deleted user] image

[Deleted User]

Discussion (42)

Collapse
pawelmiczka profile image
Paweł Miczka

I wrote many of PWAs just for testing and here's my thoughts:

  1. I kinda don't like update mechanism. By default after updating app on server you have to wait day or two to get new version. I heard that you can configure it to don't cache your app but then it doesn't make sense from what website is.
  2. It drains battery much quicker since it just runs Chrome or any other browser under the hood.
  3. Performance is sometimes just bad

.. and since there is something like Flutter or SwiftUI for iOS devices i still prefer this way. Meybe something will change later - hope so because I am more JavaScript developer than Dart or Swift :D

Collapse
embiem profile image
Martin Beierling-Mutz

There's a way around the update issue you mention. You can basically load the new version in the background and then refresh to use the new version. Here's another good article about it: medium.com/progressive-web-apps/pw...

Collapse
developertharun profile image
Tharun Shiv Author

Excellent article! Thanks for sharing.. 🙂

Collapse
developertharun profile image
Tharun Shiv Author

Great points Pawel, thanks for letting us know about your experience 🙂

Collapse
danyw3b profile image
DanyW3b

Very interesting considerations, Pawel! Thanks for sharing them.

Collapse
onderceylan profile image
Önder Ceylan 🌚

Hey Tharun, thanks for the post! I just want to add here that it’s possible to customize splash screens on iOS. You might want to check out pwa-asset-generator - npmjs.com/package/pwa-asset-generator.

Collapse
developertharun profile image
Tharun Shiv Author

That's great! Thanks for Sharing it Onder, will try using it someday. 🙂 Also feel free to share if any such generators are available for Android and web. Thanks

Collapse
onderceylan profile image
Önder Ceylan 🌚

Sure! This is library you can use while developing PWAs to generate icons and splash screens for all platforms.

Thread Thread
developertharun profile image
Tharun Shiv Author

Oh that would be very helpful. Thanks once again. 🙂

Thread Thread
developertharun profile image
Tharun Shiv Author

By the way, have you worked on any PWAs that are publicly accessible? If yes, please share the website link, we could check it out. 🙂

Collapse
flyinliamryan profile image
flyinliamryan

No push notification on IOS.

Collapse
developertharun profile image
Tharun Shiv Author

Ah I see, that's another con then. Thanks for contributing 🙂

Collapse
chandrika56 profile image
Jaya chandrika reddy

Is there any way in which we can deploy PWA onto the Play Store?

Collapse
developertharun profile image
Tharun Shiv Author

Yes, there is. I will very soon be writing about TWA - Trusted Web Activities - which are not same as the usual Hybrid apps that we used to create, but is something above that. You can use your Progressive web app to create a TWA and you're good to go and can upload the APK to the play store.

I Will be writing about this soon, thank you 😊

Collapse
chandrika56 profile image
Jaya chandrika reddy

Okay thank you 🎉

Collapse
daviddalbusco profile image
David Dal Busco

PWABuilder ease the process. With its help, you can just provide your PWA URL and then get the package to upload and a README or what's to do.

I used it recently to bring DeckDeckGo to Google Play, was really handy and straightforward.

Collapse
developertharun profile image
Tharun Shiv Author

I've come across this, but haven't used it. Thanks for contributing David. 🙂

Collapse
assertnotnull profile image
Patrice Gauthier
  1. No download store presence

I find it weird that's one con for one of the reasons that PWA was created is to avoid the long flow of going to your favourite mobile OS store, clicking install, wait for it to download then be able to use it. People are annoyed by the growing consumption of disk usage relative to the benefit of using the app, the install flow and getting notifications to update an app. It also solves the problem of downloading a big amount of MBs on a bad network and could reduce your roaming charges (where if I'm not opening the app it's not updated). Also for users, installing an app could mean giving privilege access to the phone so they have to inspect the app privileges for anything odd (miners, unneeded GPS).

This impact of app install was significant.
In 2015 for Google, 69% users abandoned the page when they saw an interstitial to download the app:
twitter.com/jaffathecake/status/62...

Still in 2019:
forbes.com/sites/victoriacollins/2...

So I would add in Pros: higher user retention of the app/website.

Collapse
developertharun profile image
Tharun Shiv Author

That's a good perspective 🙂 thanks for contributing

Collapse
q2apro profile image
q2apro

I have tried to bring my forum to the PWA world. However, I realized that all the content got cached and new activities on questions were not reflected. Even so the server was available all time. So from my POV, the main disadvantage is the cache handling. And at that time (last year) I could not find helpful information about how to fix this.

Collapse
developertharun profile image
Tharun Shiv Author

Ah.. that's a great experience and a point to think about.. so it isn't feasible unless we know the appropriate functions to use. Good point 🙂🔥

Collapse
c0d3b0t profile image
Senik Hakobyan • Edited

Having SSL and secure connection is not a disadvantage. :)
I would even say that it is a big advantage for user that no one can implement insecure push notifications that may include a sensitive information.

Collapse
allison profile image
Allison Walker

Yes, this is true. And, actually Google started prioritizing https URLs over http a few years ago, so even non-PWA sites are better off switching.

Collapse
developertharun profile image
Tharun Shiv Author

That's a good perspective. And also, given the easy ways in which we can convert our hosted site from http to https, yeah what you tell makes sense.
Thank you for contributing 🙂

Collapse
bayuangora profile image
Bayu Angora

I like your sticky notes apps.

Collapse
developertharun profile image
Tharun Shiv Author

Thank you 😊

Collapse
yanivsuzana profile image
yanivsuzana • Edited

Hi good article on "Not easy for a beginner to get started"
I know of a good site that makes it easy for developers
And generates code for any type of website
Also Good for a third-party site like wix website
wappaa.com

Collapse
venkat121998 profile image
venkat anirudh

Great article! Where should I start learning PWA?

Collapse
developertharun profile image
Tharun Shiv Author

Check out theNetNinja playlist on YouTube 🙂

Collapse
fisherozzo profile image
Mimmo

+1, thats a great channel. Thanks for your tips Tharun

Thread Thread
developertharun profile image
Tharun Shiv Author • Edited

Thanks a lot Daniacco 🙂 Yes , he is one of my favourites🙂

Collapse
necrogami profile image
Anton C. Swartz IV

One complaint, can you at the start name what PWA means for those that don't know. No where in the article do you break down what PWA stands for

Collapse
developertharun profile image
Tharun Shiv Author

Thanks for the suggestion, will add it right away. 🙂

Collapse
kayavail profile image
Olukayode OJO

Check this out available.ng

It uses PWA. Not sure about service worker

Collapse
jsifontez profile image
Juan Sifontez

Thanks for this post Tharun, is amazing

Collapse
developertharun profile image
Tharun Shiv Author

Thank you.. glad you liked it 🙂

Collapse
rush profile image
Aarush Bhat

You can now post pwa on play store directly!

Collapse
developertharun profile image
Tharun Shiv Author

Oh is it, how is that?

Collapse
amilamen profile image
Ezéchiel Amen AGBLA

Have you tried IONIC + Capacitor for build PWA ?

Collapse
developertharun profile image
Tharun Shiv Author

No... Will check it out 🙂

Collapse
praveenreddy1798 profile image
praveenreddy1798

Great post, didn't know this much about PWA, now interested to Learn it.

Collapse
developertharun profile image
Tharun Shiv Author

Glad it helped