This content also appears on skookum.com and was co-authored by Tirell Mckinnon

What are Progressive Web Apps (PWAs), and how do they solve for many of the challenges brands experience in user engagement, accessibility, and utility? In this post, we’ll explore how and when PWAs are used, what characteristics define them, and most importantly, whether you should be considering a Progressive Web App for your own company’s needs.

At its core, a Progressive Web App isn’t a new “type” of app at all. Rather, it’s an experience you can create for your users that adheres to a set of principles designed to provide them the maximum value in every interaction. These best practices can be used in every site building project, regardless of whether the application will be saved to the user’s home screen.

What are Progressive Web Apps?

Progressive Web Apps deliver a better user experience than traditional web apps, but what exactly are they? Let’s start there.

First brought to the mainstream in June 2015 by Google Chrome engineers, Progressive Web Apps take advantage of the features of modern browsers. They can also be installed on mobile, as well as some desktop systems.

There were no PWA startups vying for funding, and no packaged PWA product launches. Rather, Progressive Web Apps are the result of the evolution of website technology, in keeping with rapidly changing consumer demands.

Alex Russell and Frances Berriman, who coined the term, decreed back in 2015 that by definition PWAs are:

• Responsive
• Connectivity independent
• Designed with app-like interactions
• Fresh
• Safe
• Discoverable
• Re-engageable
• Installable
• Linkable

“They’re just websites that took all the right vitamins,” Russell wrote.

For their part, Google Developers explained that, “Progressive Web Apps are user experiences that have the reach of the web, and are reliable, fast, and engaging.”

Addy Osmani, who was helpful in the introduction and popularization of PWAs, wrote that, “A Progressive Web App uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment.”

Best Practices for Building Progressive Web Apps

At their core, PWAs have three distinct characteristics:

1. They serve your website over HTTPS

2. They provide a Web App Manifest file

3. They use a Service Worker that caches and serves the experience, regardless of Internet connectivity.

(Aaron Gustafson expands on these in Yes, That Web Project Should Be a PWA).

Those are the technical specs, but what actually makes a Progressive Web App valuable to your company and its customers?

The greatest value of a PWA is in the enhanced experience it provides users. A PWA provides a meaningful, safe, and interactive experience as quickly as possible. It ensures that content is available to users, no matter what kind of network they have access to. Finally, it follows native application principles to create a natural and familiar app experience. This certainly isn’t an exhaustive list, but should give you an idea of the value inherent to PWAs.

Google have been huge proponents of PWAs, and as such offer an extensive checklist of best practices for their development. They’ve broken the list out into two sections: Baseline Progressive Web App requirements, and those that elevate your project to an Exemplary PWA.

To achieve compliance with the baseline, your Progressive Web App must be:

• Served over HTTPS
• Responsive on tablets and mobile devices
• Able to load various pages while offline
• Inclusive of metadata for Add to Home Screen
• Fast loading, even on 3G
• Able to work across browsers
• Free of laggy, slow transitions
• Constructed in such a way that each page has a unique URL

Use a tool like Lighthouse to audit your website and illuminate opportunities to apply these PWA best practices.

Incorporating Progressive Web App Principles Across the Board

Bringing your website in line with the principles of Progressive Web Apps helps you serve an app experience to your users quickly, safely, and consistently. You may even find that you’re already well on your way to a PWA, via your current website.

Start slow, if you have to. Even if you don’t achieve compliance with every aspect of Google’s checklist, each point you can accomplish improves your user experience that much more. For instance, a core element to Progressive Web Apps is lowering the time it takes for your application to become interactive to your users. This can be achieved in a variety of ways, such as by progressively enhancing the style of your website as content continues to load while providing an accurate layout and interactivity immediately.

To see an example of this in the wild, go to https://youtube.com on a slow connection. You’ll see that the navigation and core interactions are available almost immediately, while the video thumbnails, titles, and descriptions are simulated with grey boxes until they are loaded and ready to be viewed. This application “frame” ensures that the general feel of the site is immediately available and doesn’t shift around or change as content loads, giving the user a sense of confidence that meaningful content is on the way.

In Conclusion

The work you put into creating a Progressive Web App today will not only create more immersive experiences for all of your users regardless of platform, but will automatically deliver new features and native-like experiences as support increases.