What makes a good Progressive Web App?

Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase. To help you create the best possible experience, use the core and optimal checklists and recommendations to guide you.

The Progressive Web App Checklist describes what makes an app installable and usable by all users, regardless of size or input type.

Starts fast, stays fast

Performance plays a significant role in the success of any online experience, because high-performing sites engage and retain users better than poorly performing ones. Focus on optimizing for user-centric performance metrics.

Why

Speed is critical for getting users to use your app. In fact, as page load times increase from one second to ten seconds, the probability of a user bouncing increases by 123%. Performance doesn't stop with the load event, either. Users should never wonder whether their interaction—for example, clicking a button—was registered or not. Scrolling and animation should feel smooth. Performance affects your entire experience, in both how your app behaves and how users perceive it.

Though all applications have different needs, the performance audits in Lighthouse are based on the Core Web Vitals, and scoring high on those audits will make your users more likely to have an enjoyable experience. You can also use PageSpeed Insights or the Chrome User Experience Report to get real-world performance data for your web app.

How

Follow our guide on fast load times to learn how to make your PWA start fast and stay fast.

Works in any browser

Users can use any browser they choose to access your web app before it's installed.

Why

Progressive Web Apps are web apps first, and that means they need to work across browsers.

An effective way of doing this is by, according to Jeremy Keith in Resilient Web Design, identifying the core features, making those features available using the simplest possible technology, and then enhancing the experience where possible. In many cases, this means starting with just HTML to create the core features, and enhancing the user experience with CSS and JavaScript to create a more engaging experience.

Take form submission for example. The simplest way to implement that is an HTML form that submits a POST request. After building that, you can enhance the experience with JavaScript to do form validation and submit the form through AJAX, improving the experience for users who can support it.

Your users experience your site across a spectrum of devices and browsers. You can't just target the top end of that spectrum. Use feature detection to deliver a usable experience for the widest possible range of potential users, including those using browsers and devices that don't exist yet.

How

Jeremy Keith's Resilient Web Design is an excellent resource describing how to think about web design in this cross-browser, progressive methodology.

Additional reading

Responsive to any screen size

Users can use your PWA on any screen size, and all of its content is available at any viewport size.

Why

Devices come in a range of sizes, and users may use your application at a range of sizes, even on the same device. Therefore, it's critical to ensure not only that your content fits within the viewport, but that all features and content for your site are usable at all viewport sizes.

The tasks users want to complete and the content they want to access don't change with viewport size. You can rearrange your content for different viewport sizes, and it should all be there, one way or another. In fact, as Luke Wroblewski states in his book Mobile First, starting small and tweaking your design for larger screens can improve a site's design:

Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn't room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize.

How

There are many resources on responsive design, including the original article by Ethan Marcotte, a collection of important concepts related to it, as well as books and talks galore. To narrow this discussion down to the content aspects of responsive design, refer to content-first design and content-out responsive layouts. Finally, while it's focused on mobile, the lessons in Seven Deadly Mobile Myths by Josh Clark are just as relevant to small-sized views of responsive sites as they are to mobile more generally.

Provides a custom offline page

When users are offline, keeping them in your PWA provides a more seamless experience than dropping back to the default browser offline page.

Why

Users expect installed apps to work regardless of their connection status. A platform-specific app never shows a blank page when it's offline, and a PWA should never show the browser default offline page. Providing a custom offline experience, both when a user navigates to a URL that hasn't been cached and when a user tries to use a feature that requires a connection, helps your web experience feel like part of the device it's running on.

How

During a service worker's install event, you can precache a custom offline page to show when a user goes offline. Check out Create an offline fallback page to learn how to implement it yourself. Note that Chrome will show a basic offline page if none is provided.

Is installable

Users who install or add apps to their device tend to engage with those apps more.

Why

Installing a Progressive Web App lets it look, feel, and behave like all other installed apps. It's launched from the same place users launch their other apps. It runs in its own app window, separate from the browser, and it appears in the task list, just like other apps.

As with device-specific apps, users who install your apps are your most engaged audience, and often have engagement metrics at parity with app users on mobile devices. These metrics include more repeat visits, longer times on your site, and higher conversion rates than typical visitors.

How

Follow our installable guide to learn how to make your PWA installable.

Optimal Progressive Web App checklist

To create a truly great PWA, one that feels like a best-in-class app, you need more than just the core checklist. The optimal PWA checklist is about making your PWA feel like it's part of the device it's running on while taking advantage of what makes the web powerful.

Provides an offline experience

Where connectivity isn't strictly required, your app works the same offline as it does online.

Why

In addition to providing a custom offline page, users expect PWAs to be usable offline. For example, travel and airline apps should have trip details and boarding passes readily available when offline. Music, video, and podcasting apps should allow offline playback. Social and news apps should cache recent content so users can read it offline. Users also expect to stay authenticated when offline, so design for offline authentication. An offline PWA provides a true app-like experience for users.

How

After determining which features your users expect to work offline, you'll need to make your content available and adaptable to offline contexts. You can use IndexedDB, an in-browser NoSQL storage system, to store and retrieve data, and background sync to let users take actions while offline and defer server communications until the user has a stable connection again. You can also use service workers to store other kinds of content, such as images, video files, and audio files, for offline use, and to implement safe, long-lived sessions to keep users authenticated. From a user experience perspective, you can use skeleton screens that give users a perception of speed and content while loading that can then fall back to cached content or an offline indicator as needed.

Is fully accessible

All user interactions pass WCAG 2.0 accessibility requirements.

Why

Most users, at some point in their life, want to use your PWA in a way covered under the WCAG 2.0 accessibility requirements. Humans' ability to interact with and understand your PWA exist on a spectrum, and needs can be temporary or permanent. By making your PWA accessible, you make it usable for everyone.

How

W3C's Introduction to Web Accessibility is a good place to start. A majority of accessibility testing must be done manually. Tools like the Accessibility audits in Lighthouse, axe, and Accessibility Insights can help you automate some accessibility testing. It's also important to use semantically correct elements instead of recreating those elements on your own, for instance, a and button elements. This ensures that when you do need to build more advanced features, accessibility expectations are met (such as when to use arrows versus tabs). A11Y Nutrition Cards has excellent advice on this for some common components.

Can be discovered through search

Your PWA can be readily discovered through search.

Why

One of the biggest advantages of the web is the ability to discover sites and apps through search. In fact, more than half of all website traffic comes from organic search. Making sure that canonical URLs exist for content and that search engines can index your site is critical to let potential users find your PWA. This is especially true when adopting client-side rendering.

How

Start by ensuring that each URL has a unique, descriptive title and meta description. Then you can use the Google Search Console and the Search Engine Optimization audits in Lighthouse to debug and fix discoverability issues with your PWA. You can also use Bing's or Yandex's site owner tools, and consider including structured data using schemas from Schema.org in your PWA.

Works with any input type

Your PWA is equally usable with a mouse, a keyboard, a stylus, or touch.

Why

Devices offer a variety of input methods, and users should be able to seamlessly switch between them while using your application. Just as importantly, input methods shouldn't depend on screen size, meaning that large viewports must support touch and small viewports must support keyboards and mice. To the best of your ability, ensure that your application and all of its features support usage of any input method your user might choose. Where appropriate, enhance experiences to allow input-specific controls as well (such as pull-to-refresh).

How

The Pointer Events API provides a unified interface for working with various input options, and is especially good for adding stylus support. For supporting both touch and keyboard, make sure you're using the correct semantic elements (anchors, buttons, form controls, etc.) and not rebuilding them with non-semantic HTML. When including interactions that activate on hover, ensure they can also activate on click or tap.

Provides context for permission requests

When asking permission to use powerful APIs, provide context and ask only when the API is needed.

Why

APIs that trigger a permission prompt, like notifications, geolocation, and credentials, are intentionally designed to be disruptive to a user because they tend to be related to powerful features that require opt-in. Triggering these prompts without additional context, like on page load, makes users less likely to accept those permissions and more likely to distrust them in the future. Instead, trigger those prompts only after providing an in-context rationale to the user for why you need that permission.

How

The Permission UX article and UX Planet's The Right Ways to Ask Users for Permissions are good resources to understand how to design permission prompts that, while focused on mobile, apply to all PWAs.

Follows best practices for healthy code

Keeping your codebase healthy makes it easier to meet your goals and deliver new features.

Why

There's a lot that goes into building a modern web application. Keeping your application up to date and your codebase healthy makes it easier for you to deliver new features that meet the other goals laid out in this checklist.

How

There are a number of high-priority checks to ensure a healthy codebase:

  • Avoid using libraries with known vulnerabilities.
  • Make sure you're not using deprecated APIs.
  • Remove unsafe coding practices from your codebase (like using document.write() or having non-passive scroll event listeners),
  • You can even code defensively to make sure your PWA doesn't break if analytics or other third party libraries fail to load.
  • Consider requiring static code analysis, like linting, as well as automated testing in multiple browsers and release channels. These techniques can help catch errors before they make it into production.