Read Insight

Why I recommend Progressive Web Apps

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.

Progressive Web Apps – Advantages

  • Progressive Web Apps, can be quickly built by reusing the code written for “responsive web design”, which makes the developer’s job easy
  • With a progressive web app, you can simplify initial installation and push upgrades faster, by eliminating the need for the user to download & install an app or an app upgrade, from the app store. You can push new upgrades to users, directly from the web. Progressive web apps are always automatically updated (whenever there are changes or upgrades made to the application).
  • Progressive web apps consume less mobile phone resources to run, as they allow many, flexible caching strategies.
  • You may not find some of these apps coming on top of the app store searches, but Progressive web apps (PWAs) are accessible across the globe.

Progressive Web Apps – Disadvantage

  • Progressive web apps with all the best features, still would be unable to handle features integrated with the hardware capabilities of the phone ie., access to flashlight, pressure sensors etc., PWA’s would also not be able to access phone’s contacts, calendar and alarms.

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.

What makes a Progressive Web App fast, engaging and reliable?

#1 The Service Worker

A web app is made progressive with the help of a service worker. A Service Worker sits in between the browser and the server, pretending to be the client side proxy and is written in Javascript. This allows assets to be cached and served as and when required, which makes the app faster and makes the app load near instantly. Once the service worker is registered, push notifications for events can be also be triggered to engage the user.

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.

Caching strategies

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.

#2 Web app manifest file

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.

Learn more about us, our vision, our experience and what we could do for you.