Current page does not respond with a 200 when offline
The Core Progressive Web App checklist says that a PWA should provide a custom offline page. The Optimial Progressive Web App checklist says that a PWA should provide an offline experience where the PWA works the same offline as it does online (wherever network connectivity isn't strictly required).
Learn more in the What is network reliability and how do you measure it? post.
How the Lighthouse offline audit fails
Lighthouse flags pages that don't respond with an HTTP 200 response when offline:
Lighthouse emulates an offline connection using the Chrome Remote Debugging Protocol and then attempts to retrieve the page using XMLHttpRequest
.
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 make your PWA work offline
Workbox is the recommended approach for adding service workers to websites because it automates a lot of boilerplate, makes it easier to follow best practices, and prevents subtle bugs that are common when using the low-level ServiceWorker
API directly.
- Add a service worker to your app.
- Use the service worker to cache files locally.
- When offline, use the service worker as a network proxy to return the locally cached version of the file.
Learn how to add a service worker to your app with the Working with service workers codelab.