Improving Progressive Web App offline support detection

Penny McLachlan
Penny McLachlan

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.

Diagram of service worker

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.

The warning that is shown under the Issues tab of developer tools will be removed around Chrome 90.