Progressive Web App offline support detection Logic for Chrome Browser
Progressive Web Apps(PWA’s) are installable applications built for mobile and desktop devices using web technology (they are intended to work on any standard platform). PWA’s are highly reliable even in unstable network conditions.
Most interestingly: Web application built in any tech stack can be converted to Progressive Web App!
Advantages of Progressive Web App include:
- App-Like look, feel and features (add to home screen, push notifications)
- Offline Accessibility
- No updating issues (auto-update)
- Easy Installation on any devices
- Search Engine Optimized
- Short loading time
- Better Performance
- Low data usage
The web apps that fulfill all the core criterion of Progressive Web App installability including support for an offline mode, can be installed on the device from Browser.
In this article, there is a fair explanation about how offline detection in PWA exactly works.
- App must continue to work even in offline mode simply means that, even if the user loses network access of their device, no Google Dino runner (T-Rex Game) appears on the screen. Even if there is no network connection, the user can navigate through the app and can view the content.
- Now, we are going to enable the ability of web apps to load content offline instead of loading the default error page.
- For this, we would be storing assets locally in cache storage (after inspecting the page, navigate to the Application section to view cache storage), so that we can access them whenever we need them i.e in offline mode.
- There are different types of caches that control the storing of resources and assets of a web application, one of them is Browser cache.
- Browser cache(works automatically): Its speeds up the website by caching resources like CSS files, images, etc so that we don’t have to download them every time the webpage loads. The only problem here is, we cannot control what to store and what not to store in cache! Hence, it would be better to disable the browser cache.
- In case we lose network connection, the service worker will still make a request to the server to fetch resources, but it will never reach the server-side. Now, fetching resources without network connection is possible using Pre-cached assets.
- Service worker will interrupt into these fetch requests which are made to the server (In simple words, service workers tell the fetch requests that there is no network connection available, hence no need to go to the server anymore for fetching resources!). The service worker itself looks into the pre-cached assets and returns the resources to the web browser.
- This enables the user to navigate through the app even in offline mode and is able to view the content/resources as well!
Note: UPDATE IN OFFLINE DETECTION FROM AUGUST’21
- This was the verification check followed previously ( and will be followed till August 2021 only! ). If you have built any Progressive Web App, you will now, notice the warning in Chrome 89 after auditing (generating a report) through Lighthouse. a warning has been started since March 2021.
- There will be certain new checks introduced from mid-2021 because :
- It is not possible for Chrome to check the correct offline behavior of web applications as there is no ability to check the status of HTTP requests through the service worker.
- When we check the offline mode compatibility of the web app, chrome only checks whether the service worker has the fetch event handler or not, but that is not only the case.
- It should be checked that whether the fetch event handler returns valid resources with HTTP 200 (success status code) when in offline mode.
- If you have already implemented offline mode in a correct manner, no changes are to be done again.
- Or else, if your fetch handler is not working properly and it is not returning a response status code of 200 through HTTP requests, then that app should be updated with the latest required criteria.