DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Divyesh Parmar
Divyesh Parmar

Posted on

How to learn to create Progressive Web Apps?

Hello everyone, I have been practicing to create web apps with Node.js and Express.js and I am also practicing to create those with Python Django. Thus I have mostly focused on Backend frameworks and
working around routes mostly. I have not worked much on Front-end part mostly with

React.js

But I want to learn how to create Progressive web apps. Just like our dev.to site since this is really cheering community and dev.to itself is a PWA. So may be @ben would be able to explain in details.

Please explain the tech stack that one can use, and also suggest any articles/blogs/video series that is available to work with. Also please explain the difference between PWA and Hybrid Apps and how are they different from React Native apps

PS and yes that's a screenshot of my lovely MotoG3^osprey

Thanks.

Top comments (6)

Collapse
 
adnanrahic profile image
Adnan Rahić

I recently followed this tutorial by @pixeline . It's an incredibly simple explanation, and I added PWA capabilities to my site in a few minutes.

Collapse
 
pixeline profile image
Alexandre Plennevaux

I'm glad you found it useful and simple enough! Cheers, Alex :-)

Collapse
 
oathkeeper profile image
Divyesh Parmar

Thank you mate! I'm noting it down

Collapse
 
nektro profile image
Meghan (she/her)

As the name sort of hints at very very subtly, every web app is a progressive web app. The key part being "progressive". The term PWA was a trendy term coined to describe an "era" in web development where a large amount of web sites add in functionality that was previously only available to native applications.

So making a PWAβ„’ doesn't have any set in stone requirements, but are most notably distinct from typical web sites by having a web app manifest, various things you can do with a service worker which include working offline, background sync, push notifications, and more.


I could be wrong since I know most about the purely Web side of things, but as far as I know, Hydrid apps refers to "native" apps that run as an actual native binary but only implement a headless browser window, and react native converts your JSX into native code that uses the host OS's actual windowing system instead of browser's renderer.

Collapse
 
oathkeeper profile image
Divyesh Parmar

Wow this is the pure explanations that let me understand everything. Thank you so much.

Collapse
 
nektro profile image
Meghan (she/her)

You’re welcome! I’m so glad it helped :D

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.