Progressive Web Apps : A Philosophy for Modern App Development

With the advent of “Mobile first” approach, more and more applications are moving from web-only platform to both Web and Mobile. Now it sounds great to have my application work on both the platforms but the time and efforts doubles. PWA comes into picture here by helping build a web application which works as a mobile app or at least as close as a mobile app. Studies show that more and more users are inclining towards their mobile devices to access and browse data rather than using a computer or a laptop. Reason being, mobile provide you anywhere and anytime access.

But it’s just one of the features that PWA provides, apart from this, PWA is capable of doing much more than this which we’ll discuss in this blog shortly. PWA became popular from 2016 but this all started back in 2015 when designer Frances Berriman and Google Chrome engineer Alex Russell coined the term “Progressive Web Apps”.

Last year I was at this conference in London called “FullStack Conf” where everybody was mainly talking about two things: Progressive Web Apps and IOT. Pete LePage, Developer Advocate on the Web team at Google presented a keynote on PWA and that is when this concept caught my attention and I started to explore it more.

PWA is to Web, what terminal is to developers!

Explaining the analogy above, PWA has made the life of web developers so easy by providing some powerful features which were not possible earlier.

Above we briefly talked about PWA being able to provide a Mobile side of the application without incurring additional efforts but apart from that, there is another area where it shines. Providing “Offline First” support as well. Being a mobile user I am pretty sure all of us feels that sudden irritation when we are in an underground station or tunnel and our network goes out. Mostly mobile apps store their static and basic contents in the app itself so that they can be accessed even in case there is no network but what about the web? How do we handle such situation where the network goes out and all we can show to our users is the Dinosaur and take them back to Jurassic Period.

Using PWA we can provide offline caching and handling such situations according to the use case where instead of totally cutting off the user maybe we can show them something that can keep them engaged at least for a while. So, even if I don’t have the fresh data, I can still provide my end user with a great user experience by giving them a small puzzle to play meanwhile the network is coming up.

Let’s start with the major components that help in building a PWA:

1. App shell Model:

This model or concept says that we should structure our application or web components in such a way that we can handle things that change often and things that remain almost static separately. So, for example, the top navbar of my application remain same on almost every page and just the internal data changes. So what I can do is maybe cache the UI for navbar and just fetch the inner data using ajax call. So in this way, I can at least save some load time and the user doesn’t have to wait for complete data to be loaded to see the screen.

2. Service workers:

They are the USP of PWA. They act as a proxy between browser and server using which we can accomplish a lot of useful tasks like caching, background sync of data, push notifications and much more. They are the scripts which get executed in the background and provide some events that we can listen to.(Service workers needs HTTPS)

In the above representation, the user asks for some content they have accessed before but due to unavailability of the network, the latest content cannot be fetched. Here service worker performs its magic and tries to fulfill the request via cache to provide better user experience. And once the network is up again, it can update the cached information with latest one on the basis of caching strategy being used.

3. Web app manifest:

Its one of the component that helps us configure the look and feel of the mobile side of the application. It’s basically a JSON file that you have to add in the head of the main page and you can provide info like the home icons, splash screen, background color, orientation etc. A PWA can be easily opened in your mobile browser with no address bar on top which gives an app like look and feel. Also, we can pin it on the home screen so they can be revisited by a single click.

Who all are using PWA

There are many organizations that are benefiting from PWA philosophy. One of the great e-commerce Giant, Flipkart here in India itself is a perfect example for demonstrating how PWA has helped businesses to grow. They switched to PWA version of their app to cater common people who mostly have 2G network access on their devices and results were amazing with more user engagement. More details can be found here: https://developers.google.com/web/showcase/2016/flipkart

Advantages

1. Provides faster experience to the users using caching strategies.
2. Help engaging more and more users by providing a mobile app like experience.
3. Its reliable and easy to use.
4. Content safety as it runs on HTTPS.

Browser support

Now that we have enough information about PWA and how it works, it is a good time to talk about the browser support for service workers. We can see below Firefox, Chrome and Opera work well with Service workers. However, IE and Safari still remain on the backfoot.

Source: http://caniuse.com/#search=serviceworker

I believe after learning about PWA, some of the curious minds out there must be having few questions. Let me answer those beforehand:

Q: Can I use PWA along with some existing front-end frameworks like React, Angular etc?
A: Sure you can.

Q: If iOS(Safari) doesn’t support PWA’s features like service workers, push notifications etc how is it so popular and how is this technology for future if big giants like Apple are not going to support it?
A: Even if Safari doesn’t support PWA, there are some use cases which says they have noticed a considerable increase in their users when they switched to PWA. For a live use case example, please refer here: https://cloudfour.com/thinks/why-does-the-washington-posts-progressive-web-app-increase-engagement-on-ios/

Q: Can we remove or uninstall a service worker?
A: Yes, through navigator API method or using dev tools.

So, this was a small introduction to PWA and its ecosystem. Let me know in the comment section below if you have any queries or suggestions related to this topic. Thanks for reading 🙂