We had a time when people were switching from websites (opening a link on the browser and logging in) to mobile apps (installing an app locally on the phone) because of frequency of use, location aware features and overall user experience. But soon, with too many apps installed, a lot of the phone’s memory and battery was being consumed and this lead to people quickly uninstalling “heavy” apps that drained the CPU and retaining ones they needed the most on the mobile, going back to use the web for the rest. Modern day businesses, need to be present on both web and the mobile, however building for each platform separately costs higher.
Here’s where Progressive Web Apps come into play.
Progressive Web Apps have all the ingredients to be a smart, pseudo – native app. They are fast, location aware, reliable and give users to experience what they would expect from a natively developed mobile app. All you need to do is just install it once by adding it to your mobile home screen and everything on the app, is delivered by the web.
For any PWA there are 2 technologies used to make it reliable, fast and engaging. They are Service Workers and the Web App Manifest file.
Service Workers are registered only when they are served from HTTPS and they fail to register with HTTP. When a service worker is registered, it handles requests only under its scope (so make sure that the service worker is registered at the root of the domain, which means the service worker’s scope will be it’s entire origin).
While in development, the service worker may cache few assets and become a pain, so I’d recommend using an incognito browser window for development; that way each time I close and reopen the browser window, the service worker and anything that has been cached, gets cleared and I start fresh. Even if we have multiple browser tabs or windows open, there is only one service worker registered serving different tabs and windows.
When a service worker is registered, it calls the install event which is the right time to cache all our resources required for the app. Later when we have new or updated resources to cache, we need to call an activate method to clear out older cache and fill it with newer cache.
Service Workers let you decide various caching strategies based on your application
1. Cache first, then network
2. Network first, then cache
3. Cache only
4. Network only
5. Cache and network race
6. Cache then network
Cache first, then network:If the request matches the cache entry respond to that, otherwise try to fetch from the network, this is ideal for commonly stored resources.
Network first, then cache: In this strategy, we try to handle the request from the network first, and if the request fails or times out, then the data can be served from cache, this is ideal for game leader boards or social media timeline.
Cache only:Here the request is fulfilled by cached data only and is used where there is no network request made at all. Eg: serving static images on load
Cache and Network race: This is considered to be the fastest and also my favourite. Here the request has been made in parallel and responds to whichever serves first. Usually it will be the cached response but network request made earlier gets a response and cache will be updated for future requests.
Cache then Network: Even in this strategy request has been made in parallel, but it is always served from the cache, later the cache will be updated from the network request.
Based on the app, picking up the right strategy yields the best result making the web app reliable and fast.
Web app manifest file is a JSON file which gives the ability to control how your Progressive Web App appears to the user and also how it behaves when first launched. With the web app manifest file, our web app is made to open, just like a native mobile app opening with a splash screen, in a fullscreen mode (without the URL bar).
Progressive Web App, in my view is a culmination of learnings from the modern web and the mobile first web, taking the best of web and mobile; there’s no doubt in it being the next big disruptive thing in the mobile – web space.