What’s a progressive web app, and why should designers care?

Progressive web apps, or PWAs, are the next generation of Javascript-based web technologies.

A PWA stands for a Progressive Web App. As the name suggests, PWAs are based on standard web technologies. At their core, PWAs are web applications based on standard web technologies, but with the addition of the newest JavaScript features, making them feel and function like native Android or iOS apps.

In other words, Progressive Web Applications work both like ordinary websites and mobile apps and offer such functionality like offline mode, push notifications, and adding to the home screen that previously could be found in native applications only. Blending mobile and web is a game-changer in the industry and can lead to astonishing business results—making this a can’t-miss technology for retailers.

We’ll be going over:

- Offline PWA features

- Common PWA development mistakes

- PWA advantages over websites

- PWAs vs. websites

 

• Offline PWA features:

 

You can run your PWA offline, but that means you need to be careful when implementing eCommerce or transactional websites, and even more so with dynamic elements like product availability or promotions. While users are on the move, their mobile devices are always close at hand, consuming content to stay informed and entertained.

For publishers, this type of offline access contributes to brand loyalty, keeping power users engaging with and discovering content while delivering UX and performance benefits. Of course, every problem has a solution. Let’s look at a common eCommerce problem: when a user is offline, the system can’t update things like availability, so the user could, after some time offline, try to order items that aren’t in stock.

 

• Common PWA development mistakes:

 

If you do have touch features, they should work just like they do in native apps. For example, tappable areas should give tactile feedback. A user shouldn’t be left wondering if the tap has been recognized. Every developer who’s ever had to deal with scrollable floating elements in iOS will agree with the following fact: there is a direct relationship between iOS scrolling and headaches.

Google goes deep into this in its Android PWA development guide. Elements shouldn’t react when you scroll by; this is a common mistake with mobile websites and one of the most annoying.

 

• PWA advantages over websites:

 

When a PWA is running in full-screen mode, there are no browser functionalities to help the user along. This makes it look good but also poses UX risks. Without a browser, there’s no safety net: no address bar, progress indicators, SSL icon, or navigation buttons.

Adding your own back button or designing your own navigation bar is the solution here: replicating the browser’s familiar navigation cues will make your PWA easier for your user to understand—and use.

 

• PWAs vs. websites:

 

From a designer’s perspective, building a PWA is similar to building a web app, but from the user’s perspective, it might as well be a native app.

One of the most important differences in the way PWAs are distributed. Because PWAs are technically web apps, there’s no need to visit an app store: users simply click the Add to home screen button in their web browser.

Another advantage of PWAs vs. native mobile apps is that they consume much fewer data. While native apps reside in the user’s phone, PWAs are only accessed when users go to the website—the only time when data is used.

Frequently Asked Questions

A lot of people don't appreciate the moment until it’s passed. I'm not trying my hardest, and I'm not trying to do