A complete guide to progressive web apps

A progressive web app (PWA) is a web app that uses next-generation application programming interfaces (APIs) to incorporate features typically associated with native apps. These features include the ability to work offline, support for directly accessing a device’s storage and other hardware resources, and an interface resembling a native app rather than a website.

The APIs used to build PWAs have become available only within the last few years. When combined with other components, including HTTPS, service workers, and a manifest file, these APIs allow PWAs to perform functions that historically were impossible for an application running inside a browser.

PWA characteristics

The capabilities of a PWA can vary, but they often include the following:

• Offline access
  PWAs work even if a device loses its internet connection, so your customers will no longer have their experience interrupted by spotty Wi-Fi.
• User experience
  By accessing hardware directly and using native interfaces, PWAs provide a more responsive user experience that improves user engagement with features like push notifications.
• Installability
  PWAs can be accessed through a web browser, eliminating download times while providing users with the option of accessing the app directly on their device.
• Security
  PWAs pass network requests through service workers, minimizing their interactions with the internet.
• Discoverability
  PWAs can be accessed and used right from a link in a search engine or on social media, exposing them to far more potential users than a visit to even the most popular app store.
• Cross-browser compatibility
  PWAs work across all modern browsers, including Chrome, Edge, Firefox, and Safari.

Why use a PWA

The features PWAs offer increase user engagement and, by extension, conversion rates. Conventional web apps only work when a device is online and can’t deliver messages through native device interface features such as push notifications. With a PWA, a brand can build an ecommerce app that lets customers browse listings offline or announce new deals through push notifications.

PWAs also improve user retention with their superior performance. As many as one in five apps will be used only a single time due in part to performance issues like slow loading speed or responsiveness. After a user’s first visit, a PWA will load almost immediately. If you face challenges such as high abandonment rates for your apps or low levels of repeat site visits, you might consider using a PWA to remedy these issues.

In addition, PWAs update far more quickly than native apps. Instead of waiting for an update to finish installing, users will be able to get back to whatever they were doing quickly.

PWAs offer the advantage of access to device hardware features as well, such as those that report a smartphone’s precise geographic location. This lets you target customers in specific locations or market to a local audience.

PWA components

PWAs consist of three primary components:

• HTTPS
  The HTTPS protocol provides a secure transport layer that encrypts traffic as it passes between the app and other network locations.
• Service workers
  Service workers are scripts that act as middlemen between the web browser and the network. By intercepting network requests, they can process them in ways a conventional web app cannot. This is how PWAs provide access to native device interface and hardware features.
• Manifest file
  This file defines how a device should display a PWA to the end user. The manifest file is what makes it possible to create PWAs which are installable and appear to the user as if they were native apps.

Manifest files are in JSON format and allow developers to define a variety of app characteristics. For example, the following stanza uses the “description” key to define which description users will see when they view information about the app:

"description": "Your app description goes here."

Likewise, developers can set the “display" key to standalone if they want the app to be displayed as a standalone application, instead of showing it within the web browser:

"display": "standalone"

When deciding how to define an app’s behavior, developers should consider the differences between server-side and client-side rendering. The former uses a central server to deliver content to the app. In the latter approach, the app is responsible for generating its content locally.

Server-side rendering may offer performance advantages because servers have more hardware resources available to them than local devices, but the catch is that apps won’t be able to access server-side content if they are offline. For that reason, client-side rendering may be preferable if offline access is a priority. A PWA can take either of these approaches or adopt aspects of each for best results.

Setting up a PWA

Building a progressive web app is not very different from creating any other type of web app. There are just a few additional steps that programmers need to complete.

The process starts as it would for any web app. First, you write HTML to define the content of the app, as well as CSS to define how it should appear. With HTML and CSS written, developers can then write a manifest file, as discussed above, to define how the device should display the app to users.

The final major step is to write the service worker scripts. This is the most complex part of the process, although it’s not too challenging if you have experience working with JavaScript, the language typically used to write these scripts. The scripts will specify how the service workers should interact with whichever browser API or APIs the PWA will use to intercept network requests in order to implement its desired features.

Realize the benefits of PWAs in ecommerce

Although traditional web and native apps are not likely to disappear entirely, PWAs are the future for a variety of digital industries. They offer a unique combination of performance and reliability central to achieving a healthy rate of consumer engagement and conversion.

Adobe Commerce makes it easy for merchants to utilize these features using PWA Studio, a set of developer tools that streamline the process of creating and deploying a PWA.

Learn more about PWA Studio and how Adobe Commerce enables ecommerce success through PWAs.