DEV Community

Cover image for Progressive Web Apps tutorial from scratch
Jad Joubran
Jad Joubran

Posted on

Progressive Web Apps tutorial from scratch

The modern web is super exciting. There's a whole new range of possibilities for us web developers thanks to a set of new Web APIs, collectively popularized under the term Progressive Web Apps.

When somebody asks me what is a PWA, it's always hard to come up with a concise definition that doesn't include a lot of technical terms. However, I finally came up with a definition that holds true in most scenarios:

A Progressive Web App is a modern Website that consistently delivers a superior User Experience. ✨

The reason why I think this holds true in most scenarios is because it covers most of the technical features possible by PWAs. Here's an example:
Making your website work offline is about the User Experience. If your user gets interrupted with the Offline Dinosaur because they briefly lost connection, then this is a bad User Experience.

Everything revolves around User Experience.

How do you learn it?

Now the big question is, how do we learn Progressive Web Apps?

Here's why I have an extremely important 3-step recommendation:

  1. Set your front-end framework of choice aside
  2. Learn Progressive Web Apps from scratch
  3. Apply what you learned in PWAs to your front-end framework

Front-end frameworks are great, but the web platform has been moving so fast that we as web developers need to keep up with it by understanding how these new Web APIs work.

Having a wrapper on top of these APIs is great for productivity, but terrible for understanding how something works.

Github repo screencast

This is exactly why I recorded a free video series on YouTube that teaches Progressive Web Apps from scratch. We start from a repository with a simple index.html, app.js & app.css all the way to building a simple PWA.

PWA video series

Watch the πŸ“½ PWA Video series for free!

Top comments (3)

Collapse
 
aaronmeder profile image
aaronmeder

Thanks! I enjoyed watching them so far πŸ‘

Collapse
 
jadjoubran profile image
Jad Joubran

Awesome, I'm glad you like it! More videos coming soon

Collapse
 
worldtok4u profile image
Emmanuel David

Wow, this is actually what I'm looking for. Thanks for the clear explanation you have given.