Photo by on Yiran Ding Unsplash 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 have been avoided. could How? With . progressive web app e-commerce Progressive Web Applications (PWAs) have been on the rise these last years. Solid are popping up everywhere, and for good reasons. PWA examples 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 and are increasingly used to craft PWAs. React Vue JS Today, I’ll show you how to use Gatsby to build a smooth PWA store. This post will cover: A definition of PWAs A case for PWA e-commerce An overview of Gatsby.js for PWAs A detailed PWA example with steps, code repo, and live demo Let’s dive in. What is a Progressive Web Application (PWA)? is an umbrella term coined by Google engineers. It is rather a set of development principles than a specific technology or stack. Three significant principles encompass the approach: Progressive Web Application 1. Reliability Through , a PWA is never unresponsive to a user’s request, no matter the device or network condition, including offline status. service workers 2. Performance With techniques like compression, pre-caching, code splitting, and progressive rendering, a PWA drastically reduces the number of “pogo-sticking” users — the ones abandoning your website when it’s slow to load! The goal here is to strive for minimum . time-to-interactive 3. Engagement Through the Web App Manifest, PWAs become easily installable on mobile home screens. As a developer, you get the best of both worlds here: no app store redirection/lousy installs AND the ability to . All of that inside a web app that feels and behaves almost identically to a native mobile app. engage mobile users with web push notifications For a more comprehensive PWA checklist, make sure to check . this Google entry Why use a PWA for e-commerce? Flipkart Lite, a prime example of mobile e-commerce with a PWA The technical advantages of progressive web apps translate into direct business benefits for e-commerce merchants: It widens the market and use cases. Browsing & buying is done on most devices, on any connexion — fast or slow — from anywhere. Offline capabilities can also stimulate engagement, as we’ll see in our PWA example below. It fosters a better conversion rate. Pre-caching with service workers makes for a fast, smooth shopping experience. Out of the box PWA audits in Chrome DevTools ( ) allow you to spot & fix performance issues quickly. Serving content adaptively diminishes bounce rates across the board, thus boosting , a prominent SEO ranking signal. Google Lighthouse user engagement metrics It reduces development budget. No need to develop separate web & mobile apps. Thanks to “ ” and push notification functionalities, your e-commerce PWA looks and feels just like a native mobile app. add to home screen Considering these benefits, it’s no surprise big industry players are turning to progressive web app e-commerce. Here are a few good examples of e-comm. PWAs in the wild: Flipkart AliExpress Konga Selio Go see for yourself; these mobile commerce experiences are A1. Why use Gatsby for this PWA example? The short answer? Because Gatsby makes it easy to put together a PWA example swiftly. Often presented as a static site generator for React, it is in fact much more than that. It’s a full, modern website framework that has become a developer favourite in the ecosystem. JAMstack Gatsby creator Kyle Matthews, in , explains how his brainchild has PWA baked in: an interview with The New Stack “Google does a lot of research about how to make fast websites, and PWA is sort of an umbrella term for these patterns. So with Gatsby, we just asked ourselves, why not bake these patterns, all these things that make a website fast, into a website framework?” In , he explains how Gatsby acts as a for your site, with built-in — not optional — performance optimizations. this post metacompiler So Gatsby has many “checked” PWA support boxes, such as: Its outputted files are static HTML, making your e-commerce content easy to crawl, index, and rank for search engines. Organic traffic is a rich source of traffic for online stores — for many shops, it is their life-blood. It supports service workers through and “add to home screen” functionality with . this plugin this one For a full list of Gatsby’s impressive features, read . this page PWA Example: building a Gatsby e-commerce progressive web app A bit of context for this demo: humanity is knee-deep in zombie apocalypse. Internet is sporadically available, but more often than not, network is down. Our PWA’s goal: 1) Offer useful survival guides available offline. 2) Offer buyable survival gear when network is up. Pre-requisites Basic understanding of Gatsby JS with Snipcart Free Test account For this demo, I’ll use the from Ruben Harutyunyan. It comes equipped with all plugins needed to make a Gatsby PWA with sane default configurations. Material Starter Namely: to allow app installation on mobile devices' homescreens gatsby-plugin-manifest to automatically generate images in various sizes gatsby-plugin-sharp to make your app available offline with a service worker gatsby-plugin-offline It uses markdown files as a content source and to provide a component based on the Material Design mobile style guide from Google. I’ll also show you a few tricks to make Snipcart gracefully handle changing network conditions. react-md Let’s start by installing Gatsby and the starter. Install the Gatsby cli if you don’t have it yet: npm install --global gatsby-cli Create the project: gatsby new gatsby-pwa-demo [https://github.com/Vagr9K/gatsby-material-starter](https://github.com/Vagr9K/gatsby-material-starter) Launch the development server in the project’s folder: cd gatsby-pwa-demo gatsby develop Responsiveness Responsive web design is far from new. Since its arrival, the web development community cumulated a lot of good practices. First, there’s the layout of your PWA site. By providing fully responsive pages, you’ll give shoppers a more consistent e-commerce experience across devices. For this, you can use a library of responsive components like react-md or use your CSS skills to create it from scratch. Where Gatsby helps you is for serving responsive and optimized images through the . It processes your images and generates different sizes that the browser chooses from in the attribute. So only the most appropriate file for the current screen size is downloaded. gatsby-plugin-sharp srcset Although, I would advise using images when possible. Web servers can easily compress that size format, and, since they're in a vector format, you only need one file that scales to any size. .svg Offline capabilities Offline functionality is often the central argument for PWAs. While not the only cool feature, I can’t write a post on PWAs without talking about it. And with Gatsby, it’s as simple as adding to your ! gatsby-plugin-offline gatsby-config.js Under the hood, this uses from Google, a library which generates a service worker that automatically caches your website files for offline use. sw-precache A service worker is like a background task running outside the context of the DOM without impacting the user interface. It’s useful for offline mode, as it can intercept requests and have custom caching logic. With Gatsby, all HTML and JavaScript is cached and retrieved from the cache when offline. App-like behaviour A nice feature of Progressive Web Apps is the ability to use a web application in place of a native mobile application and have it behave in the same way. There are many opinions on the subject — whether it’s a good or bad approach to imitate the look and feel of native apps. At least web technologies give you that flexibility, and the allows your app to be self-contained outside the UI of a mobile browser. Pretty neat! Web App Manifest generates that manifest automatically. You can customize it in : gatsby-plugin-manifest gatsby-config.js The parameters are mostly descriptive or visual details of the app. The most interesting one is . That's what will make the app open as its own window, without browser navigation options. display: "standalone" In some circumstances, a browser can automatically prompt the user to install the app to their homescreen. You can also . If you have native versions of your app, there’s a parameter to instead. trigger this manually instruct the browser to suggest these apps Making the cart handle changing network conditions For this PWA example’s e-commerce functionalities, I’ll integrate our own dev-first shopping cart platform, Snipcart, to the app. Snipcart works quite simply: you add the required scripts to your site, then define products directly in the HTML. One of the shortcomings of service workers is that they can only cache content from your domain. So you’ll have to use another strategy for Snipcart to handle a loss of connectivity. First, you need to load the required assets only once you have Internet access. I’ll cheat a bit here and use direct DOM manipulation to add the tags to the page’s head — you can adapt it whatever framework you’re using! Above, I check what file were loaded, and every time the browser comes back online, I go through those checks again. With a few more events, you can handle products added to the cart while Snipcart isn’t yet loaded or when you are offline: In those event handlers, we maintain a queue of products to be added. Live demo & GitHub repo See live demo See code repo Conclusion Gatsby is a darn smart piece of engineering. While it have a learning curve and tricky debugging, once you get it, it’s so powerful you’ll get to love it real quick. does Crafting this whole tutorial took me a few more days than . I encountered a few unidentified GraphQL errors, and the command once crashed midway without returning an error code. But overall, I had a fun experience working on this PWA example. our usual demos gatsby build Of course, I couldn’t cover all possible use cases in a single post — there are SO many awesome features under the PWA umbrella. With more time on my hands, I’d have explored the and APIs to boost mobile app user engagement. Notification Push Here’s hoping you learned a thing or two with this piece. I sure did! :) Got comments, questions? Hit the section below! I originally published this post on the Snipcart blog and shared it in our newsletter .

Google

Mozilla

Progressive

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Build an E-Commerce Progressive Web App with GatsbyJS

Too Long; Didn't Read

Companies Mentioned

Jean-Sébastien Tremblay

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Build an E-Commerce Progressive Web App with GatsbyJS

Too Long; Didn't Read

Companies Mentioned

Jean-Sébastien Tremblay

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES