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
- Cross-platform
- Low data usage
- Responsive
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.
Dino Runner
- For making PWA installable, it is first verified that whether web app contains a service worker with a fetch event handler. When we load the web app, a fetch request is initiated to get index page and then it is rendered on the browser. Here, we have a service worker acting as a proxy between App and Server. Service Worker is just a javascript file that runs in background. It is also known as the heart of PWA. It runs separately from the main browser’s thread. Hence, there is no webpage/user interaction with the service workers.
- 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.
-
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.
- We are using another cache that can be controlled by us using Service Workers and Regular Javascript. We can control & manage which resources should be stored in the cache in order to increase the performance of the web app. Later we can retrieve them when needed (i.e offline).
- Initially, the cache is empty. The first service worker gets loaded, it requests the server to get some core assets which are requested by the web app. Assets include images, CSS styling files, javascript files, etc. The service worker then returns all these assets and stores them into cache also, as they might be useful in the future! This is called Pre-caching. All these cached assets are stored locally.
- 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.
Article Tags :
Recommended Articles