![Pete LePage](https://web.dev/images/authors/petelepage.jpg) Pete LePage [X](https://twitter.com/petele) [GitHub](https://github.com/petele) [Mastodon](https://techhub.social/@petele) [Homepage](https://petelepage.com/) ![Sam Richard](https://web.dev/images/authors/samrichard.jpg) Sam Richard [X](https://twitter.com/snugug) [GitHub](https://github.com/snugug) [Homepage](https://snugug.com)
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](https://web.dev/articles/pwa-checklist#core) and [optimal](https://web.dev/articles/pwa-checklist#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. ### 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, such as 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](https://web.dev/articles/vitals), and scoring high on those audits will make your users more likely to have an enjoyable experience. You can also use [PageSpeed Insights](https://pagespeed.web.dev/) or the [Chrome User Experience Report](https://developer.chrome.com/docs/crux/) to get real-world performance data for your web app. #### How Follow our [guide on fast load times](https://web.dev/explore/fast) 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](https://resilientwebdesign.com/), 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](https://resilientwebdesign.com/) 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](https://alistapart.com/article/understandingprogressiveenhancement/) is a good introduction to the topic. - Smashing Magazine's [Progressive Enhancement: What It Is, And How To Use It?](https://www.smashingmagazine.com/2009/04/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](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) article discusses how to detect a feature by directly querying it. ### 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 that your content fits within the viewport, and 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](https://alistapart.com/article/responsive-web-design/) and a [collection of important concepts](https://snugug.com/musings/principles-responsive-web-design/) 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](https://uxdesign.cc/why-you-should-design-the-content-first-for-better-experiences-374f4ba1fe3c) - [Content-out responsive layouts](https://alistapart.com/article/content-out-layout/). - [Seven Deadly Mobile Myths](https://www.forbes.com/sites/anthonykosner/2012/05/03/seven-deadly-mobile-myths-josh-clark-debunks-the-desktop-paradigm-and-more/#21ecac977bca), which is just as relevant to small-sized views of responsive sites as all mobile. ### 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. Read [Create an offline fallback page](https://web.dev/articles/offline-fallback-page) to learn how to implement it yourself. Chrome continues to show a [basic offline page](https://developer.chrome.com/blog/default-offline) 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](https://web.dev/articles/customize-install). ## 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 need to make your content available and adaptable to offline contexts. You can use [IndexedDB](https://web.dev/articles/indexeddb), an in-browser NoSQL storage system, to store and retrieve data, and [background sync](https://developer.chrome.com/blog/background-sync/) to let users take actions while offline and defer server communications until the user has a stable connection again. You can 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](https://developer.chrome.com/blog/2-cookie-handoff/) to keep users authenticated. From a user experience perspective, you can use [skeleton screens](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a) 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. ### Fully accessible All user interactions pass the most recent [Web Content Accessibility Guidelines (WCAG) international standard](https://www.w3.org/WAI/standards-guidelines/wcag/). #### Why Most users, at some point in their life, want to use your PWA in a way covered by WCAG. 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](https://www.w3.org/WAI/fundamentals/accessibility-intro/) is a good place to start. A majority of accessibility testing must be done manually. [Accessibility audit in Lighthouse](https://developer.chrome.com/docs/lighthouse/accessibility/), [axe](https://github.com/dequelabs/axe-core), and [Accessibility Insights](https://accessibilityinsights.io/) can help you automate some accessibility testing. It's also important to use semantically correct elements instead of recreating those elements on your own, such as `` and `