Progressive web Apps for the eCommerce Developer

Engaging with mobile users isn’t easy. Between small screens and spotty cellular connections, it’s difficult for eCommerce developers to provide an interface that doesn’t feel like a shrunken-down, less functional version of a desktop site.

Embracing a mobile-first site design is a great first step, and today’s web platform gives us the tools to make apps feel more fluid and polished. But simply throwing new tools at a problem is seldom the right answer. How can we know that those tools are being applied effectively?

Enter the progressive web app (PWA). The PWA model couples innovative browser features to a suite of best practices that guide modern developers to deliver crisp experiences on all devices.

In this blog post, we’ll explore the features of PWAs and what they mean for developers and online shoppers, compare PWAs to other web app models and discuss practical strategies for adding this functionality to your eCommerce store.

The Need for PWAs

The rise of native mobile apps marked the first real solution to the mismatch between our mobile devices’ small touchscreens and desktop-driven web designs. If you were a smartphone user in the early 2010s, you might remember the sense of relief that came with learning that one of your favorite brands released a mobile app. The fluid feel of these native apps make it clear that they were designed with your phone in mind.

Contrast the native mobile app to a poorly-crafted mobile web experience: after typing a url into the browser, you’re met with a blank web page while the site loads. Images and text start popping into place as the homepage comes into focus. After some zoom adjustments, the navigation bar can be used to find the correct link you’re looking for. But when you click back to the homepage, it loads the entire page over again from scratch.

Occasionally, the determined shopper can tolerate this suboptimal shopping experience all the way to checkout. But, the rest of us give up and abandon our carts with hollow intentions of returning later.

Is the answer just to create more mobile apps? Ten years ago, sure - provided you could afford the cost of developing and maintaining iOS and Android apps, alongside the resources already committed to keeping your website current. But in the past five years or so, mobile users have grown tired of installing apps. Combined with the uphill battle of driving installs in competitive app marketplaces, the cost and complexity of native app development is often more than eCommerce brands want to take on.

Thankfully, progressive web apps are able to fill the void between standard websites and native apps, bringing relief to customers and merchants alike. Let’s take a look at what progressive web apps are, what they have to offer, and how to develop one for your eCommerce brand.

PWA Features & Capabilities

While the capabilities of PWAs evolve with the web, one permanent guiding principle is that progressive enhancement is used to deliver the best possible user experience at any given time, across all devices. The native mobile app-like features that PWAs are capable of can be delivered to devices that support them, while still delivering a fully-functional website to devices with little-to-no support for those features.

Just what are those special, native mobile app-like capabilities? Let’s round them up:

• Can be installed to the device

  • Users don’t need to install the PWA, and if they choose not to install, they will still receive a fully-functional web app experience

• When installed on a device of any size, the app can:

  • Make pages available offline and show previously-visited content

  • Tolerate intermittent connectivity

  • Display a splash screen while loading

  • Send push notifications

  • Update itself when fresh content is available

• When installed on a mobile device, the app’s application icon is available to the home screen and app drawer

• When installed on a laptop or desktop, the app’s application icon can be added as a desktop shortcut

In order to dig into how PWAs accomplish these feats, let’s do a quick review of various web app models to better understand how PWAs fit into our concept of a web application.

PWAs and other acronyms of the modern web

Let’s get some definitions out of the way.

Web apps combine the portability of traditional websites with a level of interactivity and functionality that used to be associated only with desktop and mobile apps. The term “web app” is inherently vague, and doesn’t suggest a particular set of technologies beyond HTML, CSS, & JavaScript. Nor does it suggest a set of guiding principles surrounding its design. A web app could have its pages generated by a server, by client-side JavaScript, or a mix of both.

A single-page application (SPA) is a type of web app that relies on client-side JavaScript to update its page contents in response to user interaction. Many frontend frameworks (such as Next.js, Nuxt.js, Gatsby.js, Gridsome, and Sapper) are capable of server-side generation (SSG), or generating static HTML pages which, when opened in a JavaScript-enabled browser, use client-side JavaScript to add the application state and interactivity typical of a SPA.

A progressive web app (PWA) can also be a SPA or SSG-powered hybrid static site. But it doesn’t have to be. It could just use HTML, CSS, and a sprinkling of JavaScript, so long as it meets the following core criteria:

• It is served securely over the https protocol

• It uses one or more service workers to provide offline access

• It has an application manifest

• It provides application icons which are referenced in the manifest

The progressive web app model is a living standard without a single source of truth, and as such, there are a variety of optional criteria that are considered to hold true for exemplary PWAs. Some of the most commonly referred-to optional criteria are:

• All page loads are fast, especially the first-page load

• For all devices sizes, content is sized correctly for the viewport

• Works for any input type (touch, mouse, keyboard, stylus)

• User interactions fulfill WCAG 2.0 accessibility requirements

• Provides a custom offline page in place of the browser’s default offline page

• Pages respond with HTTP status 200 when offline

• Pages contain content when JavaScript is not available

• Custom splash screen is configured

• The site is recognizable by search engines as a PWA, as per the application manifest

• Pages are easily shared with others via URL

Now that we’ve established that SSG-powered apps and SPAs can be PWAs, but a PWA doesn’t have to be an SSG-powered app nor a SPA, let’s dig into how PWAs operate under-the-hood.

How PWAs work

Most of the native mobile app-like PWA magic is accomplished with the help of service workers, which as of iOS version 11.3, enjoy wide support in desktop and mobile browsers. A service worker is a piece of JavaScript that sits between the browser and the network, which allows it to intercept network requests from the app and execute helpful logic. For instance, a Service Worker can listen for fetch events that occur in the client runtime. Upon being notified of a fetch request from the browser, the service worker can decide whether to let that request pass through to the network, or send back a cached response from a previous network request.

PWAs take advantage of powerful APIs that ship with all modern browsers. For example, the CacheStorage API, which is available to service workers, allows for storage of arbitrary data. The combination of service workers and the CacheStorage API is what enables PWAs to deliver content from previously-visited pages when the device is offline, and to instantly serve up the crucial resources (such as the application’s splash screen icon) when the PWA is opened. A service worker running in the background can push messages to a PWA, even when it’s not running, thanks to the Push API. PWAs also have access to the Notifications API, which enables push notifications to be sent to the user’s device.

PWAs + Advanced APIs

Many advanced browser APIs require that the site they are being used on is served from a secure origin. Because PWAs must be served over https, PWAs automatically have access to some intriguing browser APIs. Examples include experimental APIs for tracking the user’s head movements, heart rate, or step count, and connecting to bluetooth devices. Through an eCommerce lens, the Payment Request API is particularly exciting, as it offers a browser-native way for customers to add their payment and shipping information to be reused in future transactions. This in turn will create new opportunities to create low-friction checkouts that give shoppers fewer reasons to abandon their carts.

Experimental browser APIs aside, the PWA has practical, marketable advantages over traditional web apps. For the commuter who shops online while riding the subway, with network signal strength dropping out along their route, the PWA will present them with the product galleries, product detail pages, and blog articles stored by the service worker. For the brand loyalist, the marketplace is easily loaded by tapping on an icon from their home screen without the hassle of installing it. For all shoppers, having content that fits their device and loads quickly produces a more pleasant and immersive commerce experience.

Developing PWAs

Most eCommerce web developers won’t be writing their own service workers. While that’s always an option, many developers will prefer to use a community-sourced package or plugin to turn an eCommerce site into an eCommerce PWA. Nacelle’s Nuxt Starter comes with PWA support baked in. In Nuxt and Gatsby, installing and configuring a module or plugin to add PWA support can be done in the time it takes to finish a cup of coffee. Even when developing a site without a framework, JavaScript libraries like Workbox provide straightforward APIs for adding PWA functionality. Whichever approach is taken, the developer has the power and flexibility to implement a variety of display options and caching strategies.

Once you’ve taken the steps to add PWA support, it’s easy to tell if your site is following the guidelines for being an exemplary PWA. With the help of the Lighthouse tab in Chrome Developer Tools, you can run a progressive web app audit that reveals which PWA standards are satisfied by your site’s configuration. The audit also provides guidance on which actions to take if your PWA isn’t meeting all of the requirements.

Is a PWA right for your eCommerce brand?

PWAs are a clever and accessible way to provide online shoppers with a more fluid and flexible experience, especially on mobile devices. Developing new PWAs or upgrading existing storefronts offers tremendous value for relatively little technical investment. Implementing the core and exemplary criteria for PWAs means maximizing the ability to deliver performant, secure, and accessible customer experiences.

If you’re looking for a structured approach to crafting an eCommerce PWA, consider choosing the Nacelle Nuxt Starter. When the data is sourced from Nacelle’s hyper-scalable backend, you get access to a consistent schema that allows you to focus your time and creative energy on making your frontend top-notch.

To talk to our team of experts around building a PWA for your eCommerce store, request a demo today.