New logic to detect PWA offline support

(upbeat music) - Hi everyone, my name is Asami. I’m a software engineer in the Chrome browser team. Today, I am going to talk about the new logic to detect PWA offline support. PWA is a technology to turn a web application into a native app-like stuff so that we can take advantage of both web and native app features. Because PWA offers native app-like experience for website, websites that support PWA can be installed as if they were native apps.

00:40 - When you visit an offline-capable PWA, the browser asks if you want to install it. If your answer is yes, the icon for the PWA is added to the app arranger on desktop and to home screen on mobile. Once installed, PWA can and should work even without internet connection. Let’s see a little bit more about the flow of how to install a PWA. If you want to install a PWA on desktop, first, you visit a PWA-capable website and click plus in circle button in Omnibox. There, you can see the install pop-up.

01:23 - You can install a PWA by clicking the Install button. Now you can see the icon in Chrome|Chrome//apps in the browser. When you install a PWA on mobile, the icon will appear on home screen like this. However, when you open an installed PWA without an internet connection, you sometimes see the screen, that dinosaur page telling us no internet connection. This is so frustrating and definitely not an app-like user experience, right? This is a problem we are currently improving.

02:04 - We are hoping all PWAs work correctly without an internet connection. We encourage web developers to make their PWAs work offline by handling the offline situation correctly. So we are raising the bar for website to display the PWA install prompt. In short, If your PWA doesn’t work offline, Chrome will not show the prompts for installation starting from the near future. That change will affect both mobile and desktop.

02:39 - Before we dive into how to check offline capability of our site, let me quickly review four requirements to make PWA installable. You need a manifest.json with the correct field fielding, a secure domain, icons, and your service worker to allow the app to work offline. When the site satisfy all of the requirements, install buttons will show up. On mobile, you can see an install button in the three-dot menu and Add to Home Screen button at the bottom of the page when the site satisfies our requirements. On desktop, you can see a Plus-in-Circle button in Omnibox and an Install button in the three-dot menu when the site satisfies our requirements.

03:28 - Service worker is a thing that is responsible for offline support. Here is how it works. Service worker can install a fetch event handler to steer or interrupt a HTTP request from the PWA before they get to the network. Using the feature, service worker can and is expected to handle all HTTP requests by itself. When you are offline, a fetch event handler is expected to return resources on behalf of actual website using cached resources, as if an internet connection is available. The behavior should be implemented by developers.

04:11 - If it’s not implemented, the install prompts wouldn’t appear, but the problem is the logic to detect if the site works offline is not very accurate. Consequently, install prompts may appear even if the site doesn’t actually support offline correctly. This is a reason why you sometimes see the dinosaur page in an installed PWA. The current logic to detect PWA offline support is just checking the existence of a fetch event handler in Service Worker. I mean, even an empty event handler like this is considered an offline support, but what happens if a fetch event handler is empty? If a fetch event handler is empty, it does nothing. So HTTP request fail. It leads to the dinosaur page.

05:05 - This is a problem that I’m working on right now. Concretely speaking, Chrome will stop considering the empty event handler as an offline support. We are updating the offline capability detection logic as follows. In the new logic, Chrome will create a fake HTTP request and send it to a PWA mains page, which is specified as start URL in manifest.json to see if the PWA respond with a 200 response.

05:40 - During the test, PWA runs in our sandbox that doesn’t have an internet connection. A PWA is considered offline capable if and only if it returns out 200 response for the fake request. This is a naive and the simplest example in service worker that can be considered as offline capable. The fetch event handler returns a response object when fetch request fails. So users can see Hello Offline page text when they access an installed PWA offline.

06:14 - This is another example in service worker that can be considered as offline capable. This code use cached thread to store resources when users install our service worker online. Once users install a service worker and store resources to cache storage, the fetch event handler can return the resources without internet connection. This is yet another example with Workbox. Workbox is a JavaScript library to make it easy to support offline pages. First, you need to supply an array of resources to the precache and route method if you do caching as soon as the service worker is activated.

06:56 - Second, you can use a navigation route method to return a specific response for all navigation requests. Using Workbox is easy and practical, so we recommend using it for your site. Here is a timeline we are currently planning. The new offline detection logic is not available yet, but most implementation was done in the current stable Chrome version, 87. In the next milestone, Chrome 88, the feature is enabled behind a flag. You can enable a check-offline-capability flag in Chrome://flags. Also, we are going to run experiment for some Dev and Canary users to make sure any regression doesn’t happen. We are planning to roll out the feature in Chrome 89 with warning mode. The warning mode means that new check happens without enforcement, even show a running message in the developer console if the site doesn’t pass a new offline capability detection logic. After a grace period, the new requirement will be enforced to all sites.

08:11 - We are very excited to ship the new offline detection logic, and we believe that it will lead to a better user experience. We welcome your feedback, so please input what you think about the new offline capability check. Thank you. (bouncy music) .