New logic to detect PWA offline support

Key Takeaways

[Music] 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 up-like experience for websites websites that support pwa can be installed as if they were native apps when you visit and 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 add 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 our pwa capable website and the click pressing cycle button in omnibox then you can see the install popup you can install a pwa by clicking the install button now you can see the icon in chrome current slash apps in the browser when you install api on mobile the icon will appear on home screen like this however when you open uninstalled 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 a 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 website 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 vwa installable you need a manifest json with a correct field fielding a secure domain icons and a 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 the requirements on desktop you can see a processing cycle button in opening box and an install button in the three dot menu when the site satisfies the requirements 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 steal or interrupt 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're offline a fetch event tundra 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 correctly this is a reason why you sometimes see the dinosaur page in an installed pwa the current logic to detect pwl offline support is just checking the existence of a fetch event tundra in service worker i mean even an empty event chandra like this is considered an offline support but what happens if a fetch event tundra is empty in a fetch event tundra is empty it does nothing so http request fail it leads to the dinosaur page 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 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 that can be considered as offline capable the fetch event handler returns a response object when a fetch request fails so users can see hero or front page text when they access uninstalled pwa offline this is another example in subs worker that can be considered as offline capable this code use cash straight to store resources when users install a service worker online once users install a service worker and store resources to cash straight 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 pre-cache and root method it will do caching as soon as the service worker is activated second you can use the 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 future is enabled behind the flag you can enable check-offline k-puppetry flag in chrome current slash flux 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 winding mode means that new check happens without enforcement it will 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 we are very excited to see the new offering 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 offering capability check thank you