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.
Core Progressive Web App checklist
The Progressive Web App Checklist describes what makes an app installable and usable by all users, regardless of size or input type.
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.
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
- A List Apart's Understanding Progressive Enhancement is a good introduction to the topic.
- Smashing Magazine's Progressive Enhancement: What It Is, And How To Use It? gives a practical introduction and links to more advanced topics.
- MDN's Implementing feature detection article discusses how to detect a feature by directly querying it.
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.
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.
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.
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.
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.
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.
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.
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.
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.