> [!CAUTION]
> **Caution:** PWA testing in Lighthouse is deprecated. For more information on its deprecation see [Chrome's updated Installability Criteria](https://developer.chrome.com/blog/update-install-criteria.md.txt). For guidance on testing, refer to the [PWA documentation.](https://developer.chrome.com/docs/devtools/progressive-web-apps.md.txt)

[Progressive Enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement)
is a web development strategy that ensures that your site is accessible to the
largest possible audience. The core principle is that
basic content and page functionality should rely on
only the most fundamental web technologies.
Enhanced experiences, such as sophisticated
styling using CSS or interactivity using JavaScript, can be layered on top for
browsers that support those technologies. But basic content and page
functionality should not rely on CSS or JavaScript.

## How the Lighthouse fallback content audit fails

[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview.md.txt)
flags pages that don't contain *some* content
when JavaScript is unavailable:
![Lighthouse audit showing page doesn't contain some content when JS is unavailable](https://developer.chrome.com/static/docs/lighthouse/pwa/without-javascript/image/lighthouse-audit-showing-6c47c11f1b897.png)

Lighthouse disables JavaScript on the page and then inspects the page's HTML. If
the HTML is empty, the audit fails.

> [!NOTE]
> **Note:** In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (**Fast and reliable** , **Installable** , and **PWA optimized**).

## How to ensure your page has content without JavaScript

Progressive enhancement is a large and contentious topic. One camp says that,
in order to adhere to the strategy of progressive enhancement, pages should
be layered so that basic content and page functionality only require HTML.
See 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/)
for an example of this approach.

Another camp believes that this strict approach is unfeasible or unnecessary
for many modern, large-scale web applications and suggests using inline
critical-path CSS in the document `<head>` for absolutely critical page styles.

Given these considerations, this Lighthouse audit performs a simple check to
ensure that your page isn't blank when JavaScript is disabled. How strictly your
app adheres to progressive enhancement is a topic of debate, but there's
widespread agreement that all pages should display at least *some* information
when JavaScript is disabled, even if the content is just an alert to the user
that JavaScript is required to use the page.

For pages that absolutely must rely on JavaScript, one approach is to use a
[`<noscript>`](https://developer.mozilla.org/docs/Web/HTML/Element/noscript)
element to alert the user that JavaScript is required for the page. This is
better than a blank page because the blank page leaves users uncertain
about whether there's a problem with the page, their browsers, or their
computers.

To see how your site looks and performs when JavaScript is disabled, use
Chrome DevTools' [Disable JavaScript](https://developer.chrome.com/docs/devtools/javascript/disable.md.txt) feature.

## Resources

- [Source code for **Does not provide fallback content when JavaScript is not available** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/without-javascript.js)
- [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/)
- [Critical Rendering Path](https://web.dev/articles/critical-rendering-path)
- [Disable JavaScript With Chrome DevTools](https://developer.chrome.com/docs/devtools/javascript/disable.md.txt)