Build an E-Commerce Progressive Web App with Gatsby

I tried buying a t-shirt on my phone the other day.

First, I get redirected to a http://m.thatsite.com URL.

Mobile site loads...

Content finally appears, along with a fullscreen pop-up:

Download our mobile app for a better shopping experience!

I tap the link. App store loads...

Bad reviews, blurred screenshots, 50 MB. Sigh

I close both app store and browser.

This familiar, sketchy shopping experience could have been avoided.

How? With progressive web app e-commerce.

Progressive Web Applications (PWAs) have been on the rise these last years. Solid PWA examples are popping up everywhere, and for good reasons.

They encourage an inclusive, global, adaptative approach to web development. They make sense both from a user AND a business POV, as we'll see in this piece. Frameworks like React and Vue JS are increasingly used to craft PWAs.

In this post, I'll cover:

1. A definition of PWAs
2. A case for PWA e-commerce
3. An overview of Gatsby.js for PWAs
4. A detailed PWA example with steps, code repo, and live demo

Let's dive in.

→ Read the full post here