Improving Progressive Web App offline support detection
Published on • Updated on
Penny is a Product Manager on the Chrome Web Platform team responsible for Chrome permissions, notifications, and progressive web apps.
Updated April 14th, 2021: We previously announced plans to update the installability criteria to ensure a PWA actually provides an offline experience. After listening to your feedback, and discovering a number of issues, we have decided to put those plans on hold. We strongly believe providing a valid page when the user is offline is critical to providing a good user experience.
Progressive Web Apps (PWAs) are a pattern for building modern, installable applications using web technology for mobile and desktop devices.
One of the criteria for building a modern web experience, and not coincidentally PWAs, is that the app must continue to work even if the device is offline. That means no Chrome Dino screen if the user loses network access on their device!
The goal of all PWA criteria is to help ensure users have a high quality, app-competitive experience when browsing the web. Chrome performs checks against PWA criteria before enabling the install capability for a PWA.
Only apps that fulfill all core Progressive Web App installability criteria, including support for an offline mode, can be installed to the device from Chrome.
Previous offline detection logic
Verification of offline support has been part of PWA installability criteria for several years. Until recently, Chrome did not have the ability to simulate requests through the service worker, so a full check of correct offline behaviour was not possible.
That meant that Chrome did not have the ability to validate whether the fetch event handler returned a valid resource with HTTP 200 during the offline check. Chrome only checked whether the service worker actually had a fetch handler.
Updated offline detection logic
Chrome 89 added the ability to run simulated offline requests through the service worker, allowing improved offline detection logic to better reflect actual offline support of the application.
We had planned to use this new ability to ensure that PWAs provided a valid page when offline, but have put those plans hold. The installability check will continue to pass if the page has a service worker that includes a fetch event handler.
What does this mean for developers?
While no changes are required now, we strongly recommend you provide an offline experience, as we expect to use the updated logic to check for a valid page at some point in the future.
It's up to you to decide what kind of offline experience you want to provide. On one end of the spectrum is a fully functional offline experience. This means pre-caching all the resources and data needed, and syncing data with your server when the user is online again. Caching resources will also help improve core web vital metrics because it eliminates the need to download resources from the network every time. At the other end of the spectrum is a custom offline fallback page.
Want something easy? We've got all the code you need for a custom offline fallback page that you can literally copy and paste directly into your app. And for more complex scenarios, check out Workbox, a set of libraries that can power a production-ready service worker for your Progressive Web App.
The warning that is shown under the Issues tab of developer tools will be removed around Chrome 90.
Have a question about service workers? Ask it on Stack Overflow and tag it with service-worker and progressive-web-apps. Our team regularly monitors those tags and does our best to help.
Updated on • Improve article