A Designer’s Guide to Progressive Web Apps

The popularity of smartphones has changed the entire face of design. Today, people consider the mobile experience alongside the desktop one, and progressive web apps are an example of how mobile devices impact design. They combine the use of a standard website with app-like capabilities. One example would be sending push notifications to site visitors.

In a study of the top progressive web apps (PWAs), researchers discovered an SEO score of 85 percent, as the Googlebot seems to favor them as long as they’re correctly indexed.

Part of your design strategy going forward likely includes mobile elements, but here are some specific ways you can add PWAs into the equation and create an amazing user experience (UX):

1. Create a Smooth User Experience

Mobile web apps create a rich experience for your users and seem to work seamlessly. They load at lightning speed. The reason everything seems smoother, including scrolling, is because the site draws on a cache rather than waiting for the server to respond. A cache pushes content instantaneously even to users with poor connections.

AliExpress uses a PWA to pull site visitors into buying something and then staying in touch as new items arrive that the user might be interested in buying. In the past, the site tried to get users to sign up for its mobile app, but it recently went to a cross-browser model. It’s much more streamlined, no matter which device you use to access the site.

2. Avoid Common Mistakes

Because progressive web apps are still new, people often make common design mistakes that slow things down or make them unworkable. Here are a few things to watch for:

• Scrolling glitches occur when a website has a large feed or infinite scroll. Fix this by adding a virtualized list. This makes elements visible to users based on where they are in the scrolling at the moment.
• Fonts sometimes slow down performance, so be cautious and avoid custom ones. Use scalable vector graphics for logos rather than custom fonts for fast loading.
• Pay attention to the PRPL pattern. PRPL stands for push, render, pre-cache and lazy load. The goal is to reduce the time between action and response.

Over time, you should become more familiar with the PWA environment and make fewer mistakes. In the early days, test often and fix any issues with user interface (UI).

3. Give Touch Feedback

One issue with some progressive web apps is the lack of feedback from the developer. When a user takes action, such as clicking on a button, there must be some form of response, so that person knows the process is moving forward.

Although PWAs typically mean faster loading times between the action and the response screen, there are occasions where the next page loads slowly. Make sure it’s clear the user engaged by a flashing screen, change of button color or some other animation.

Starbucks took a look at its native app, which offers rewards for ordering online — making life easier on the baristas serving customers during peak hours — and created a PWA that works similarly. Users can order online, and when they land on the rewards page, they are invited to sign in or join the program. It works on any device and integrates with a phone app, where you can order and pay ahead. You’ll also get a birthday treat, bonus rewards on certain days and exclusive offers based on past history.

4. Set up Service Workers

If you plan to deliver any type of push notification, you need to set up service workers. Once you register, you’ll need to get user permission to install the worker when the person lands on your page, activate it and fetch as they engage with your app. Fortunately, Google offers extensive instructions on installing a service worker. Experienced web developers won’t have any problem with the setup. If you can’t quite figure out the process, hire a freelancer to install the JavaScript for you.

5. Host Over HTTPS

It’s vital to update your site’s security. Progressive web apps work best when served over a secure website. If you don’t already have an SSL certificate installed on your server, that is your first step. Consider getting a Cheap Code Signing certificate. If you don’t serve your app over a secure site, users may receive a notification that your website isn’t safe. Upon seeing the warning, site visitors will likely bounce away and never return.

Yummly’s homepage is an invitation to join its community and access recipes and cooking advice. Once you sign up, the PWA starts tracking your favorite recipes so the site can personalize experiences during return visits. The site also sends push notifications with recipe suggestions based on nutritional needs as well as the user’s cooking skill level. You can gather a shopping list or even order one-hour grocery delivery. The desktop site is very similar to the native app site.

6. Use Less Data

Users are tired of downloading native apps to their cellphones, which use up space and data even when they’re not being used. Unlike native apps, PWAs only respond when the user visits the website from their mobile device. Although they work on desktop sites, too, they have advantages for the mobile user by keeping homepages uncluttered and free.

PWAs in the Future

The online experience shifts and changes from year to year, but progressive web apps should become more popular as they give mobile users a desktop experience and vice versa. Users crave consistency, and PWAs provide a familiar experience across devices. Because they create a fast and smooth UX, more designers are likely to add them to their design repertoire in the near future.