What’s a Progressive Web App, and Does Your Site Need One?

Why So Many Sites Are Building Progressive Web Apps

Remember a couple of years ago when everyone was telling site owners to implement responsive design for smartphone users?

Responsive design still matters, but the mobile-usability goalposts are moving toward progressive web apps (PWAs).

What are PWAs?

PWAs occupy the space between desktopssites with responsive mobile display and full-blown mobile apps that users have to download and install. PWAs load fast, get right to the point, use minimal data, work offline, send push notifications and put icons on users’ homescreens, all without the development investment in an app.

Is a PWA right for your site? If so, how can you build one? Let’s take a look.

Google has the definitive list of PWA criteria, but in very simple terms, PWAs are web sites that act like apps. PWAs are at least twice as fast as responsive websites, which means that even if you have a responsive template to make your site as mobile-friendly as possible, a progressive web app may still offer some specific advantages, depending on what your site does and what your goals are.

 

What are the advantages of PWAs?

Progressive web apps can benefit retailers, information providers, NGOs, and their users.

 

1. PWAs can boost sales

Many retailers who add PWAs report mobile sales growth, because PWAs help overcome some of the issues that cause mobile shoppers to bail out before buying, such as difficult navigation, slow load times, and fussy data-entry at checkout.

After launching its progressive web app, cosmetics company Lancome saw a 17% increase in mobile revenue in the US market. AliExpress, the China-based merchant marketplace, saw conversion rates rise by 104% after its PWA went live.

Clearly, customers are happy to make purchases on their phones as long as the process is easy, and PWAs can make it so.

2. PWAs load fast and use less data

Most smartphone users will wait 3 seconds tops for your site to load. After that, they’re gone.

A PWA speeds up load times, which is good for all users, whether they’re impatient city dwellers who are multitasking at top speed or people in rural, backcountry, or developing areas who want to make the most of their limited connectivity.

A good non-retail example of a PWA is the UN’s ReliefWeb. The huge humanitarian-crisis information portal has a full site (below, left) with maps, slideshows, a Twitter feed, and more. The site loads fast for people using the type of internet connection common in major Western cities. But for aid workers in remote locations and disaster zones, it’s not as useful as ReliefWeb’s “lite” site (below, right), which debuted in December 2017. The PWA distills the content to easy-to-scroll headlines and a small navigation menu.

</center

3. PWAs work offline

Your visitors can pin your site to their smartphone homescreens, and every page on a PWA will load while the user’s device is in airplane mode.

If you want your site visitors to be able to scroll your archives—or browse your store—even when they’re on an actual plane, in a tunnel, or without internet access for any reason, a PWA may be the way to go.

All that said, if you run a site that doesn’t sell products or serve people in low-bandwidth areas, and your mobile site already loads fast and is easy to navigate, you may not strictly need a PWA. But because PWAs are easier to make than an app, you might want to have one anyway.

 

How can you build a PWA for your site?

The good news for site owners who aren’t code-savvy is that there’s a WordPress plugin for PWAs.

After searching in vain for easy PWA conversion options for my own site, which uses WordPress on the Genesis framework, I tried the free version of WordPress Mobile Pack, which comes with a free theme and takes just a few minutes to set up.

After I activated the plugin and chose the most current version of the Obliq theme, my desktop site still displayed with the Enterprise theme I’ve had for a couple of years, while the Obliq theme displayed on my phone’s browser. In the plugin’s quick start menu on my WordPress dashboard, I set the PWA to display only to me while I played around with the settings. I had the option to upload an icon for users’ homescreens, and I picked a color scheme that I liked.

The only thing I wasn’t sold on in the free version of WordPress Mobile Pack was the Obliq theme, which I think would work better for an image-heavy site than a text-heavy one like mine. The developer offers some paid themes that I think would better showcase my content, and I’ll probably end up going with one of those once I’m ready to take my PWA live.

 

What if you want to build your own PWA without using a WordPress plug-in?

Here are a few resources to get you started.

• Google Codelab has an 8-step tutorial to walk developers through the basics of converting an “old-timey” desktop website to a PWA.
• Google’s Baseline Progressive Web App Checklist includes some elements that even non-programmers can tackle, like checking the PWA’s mobile-friendliness and verifying that the site is served over HTTPS, along with more advanced tasks like installing a service worker and a web app manifest.
• Once you’ve met the baseline requirements, there are more than 20 elements on the Exemplary Progressive Web App Checklist, including schema markup, cache-first networking, credential management for sites that require users to log in, and a lot of UI/UX elements.
• When you’re done, you can audit your PWA with Lighthouse in Chrome DevTools to see what works and what needs to be tweaked.

 

Adding a PWA to your site can be the work of a few minutes or a big project, depending on whether you use a plugin or get into your site’s code. Either way, the time investment can pay off in terms of more sales, better accessibility for users with intermittent or slow connections, and a better mobile user experience.