 Hi everyone, my name is Asami. I'm a software engineer in the Chrome browser team. Today I'm gonna 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 websites, websites that support PWA can be installed as if they were native apps. 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 launcher 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 a plus in circle button in Omnibox. Then you can see the install pop-up. You can install a PWA by clicking the install button. Now you can see the icon in Chrome Chrome Slash Slash 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, the dinosaur page, telling us no internet connection. This is so frustrating and definitely not an app like user experience, right? This is the problem we are currently improving. 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 websites to display the PWA install prompts. 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. Before we dive into how to check offline capability of a site, let me quickly review four requirements to make PWA installable. You need a manifest JSON with the correct field-filling, a secure domain, icons, and a service worker to allow the app to work offline. When the site satisfies 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 the requirements. On desktop, you can see a pressing circle button in omnibox and an install button in the three-dot menu when the site satisfies the requirements. Service worker is the thing that is responsible for offline support. Here is how it works. Service worker can install a FEDG event handler to steal or interrupt an 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 FEDG event handler is expected to return resources on behalf of actual website using cache resources as if an internet connection is available. The behavior should be implemented by developers. 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 directory. 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 FEDG event handler in service worker. I mean, even an empty event handler like this is considered an offline support. But what happens if a FEDG event handler is empty? If a FEDG event handler is empty, it does nothing so HTTP requests fail. It leads to the dinosaur page. This is a problem that I'm working on right now. Concretary 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 main page, which is specified as start URL in Manifest JSON to see if the PWA responds with a 200 response. During the test, PWA runs in a sandbox that doesn't have an internet connection. A PWA is considered offline capable if and only if it returns a 200 response for the fake request. This is a naive and simplest example. In service worker, they can be considered as offline capable. The FEDG event handler returns a response object when a FEDG request fails. So users can see Harold offline page text when they access an installed PWA offline. This is another example in service worker that can be considered as offline capable. This code uses cache straight to store resources when users install a service worker online. Once users install a service worker and store resources to cache straight, the FEDG 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 play cache and root method. It will do caching as soon as the service worker is activated. Second, you can use the navigation root 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 future is enabled behind a flag. You can enable check-off offline capability flag in Chrome colon slash slash 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 future in Chrome 89 with warning mode. The warning mode means the new check happens without enforcement. It will show a warning message in the developer console if the site doesn't pass the new offline capability detection logic. After a grace period, the new requirement will be enforced to all sites. We are very excited to see 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.