My understanding of PWA
Current Web Development situation.
This is current situation of web development. Let us try to understand why have we landed up in such a complicated situation.
Initially it was all www. But then as the number of mobile users increased drastically things changed.
There came a strategy called “Mobile first”, which means designing a website for smartphones, tablets and mobile devices takes priority over the desktop.
With this spread some even thought why not shift to “Mobile only”. By this it means there will only be native apps (Andriod, iOS and Windows) and the desktop site would no longer exist. This would allow them to save huge cost spent over developing and maintaining the desktop site. Some did try that -
and this resulted into -
So, finally -
This clearly shows, at least for now, the desktop web is irreplaceable. Which means you need to have both the desktop website and the native applications. But this comes at a huge cost. So some tried using Responsive Web Design and Hybrid apps but these lack in performance and native experience.
Now, what would be the solution for this mess?
The definite solution or rather I should say the future of web development is Progressive Web Apps.
In 2015, designer Frances Berrimen and Google Chrome engineer Alex Russel coined the term Progressive Web Apps.
PWA, are the apps using modern web capabilities to provide app-like experience.
You have HTML5 applications on one side and the native apps on the other. PWA are somewhere in between of these. They are still HTML5 apps but they do have support of some native app features like push notifications, splash screen, offline and full screen.
PWA comprise of 3 important parts —
Service Worker (SW)
In PWA, when a page makes request for a resource, the Service Worker intercepts it, and if the resource is present in cache it is returned to the page. When the resource is not available in the cache it is fetched from the network added to the cache and then returned. This is called cache first or offline strategy.
When you go to a restaurant and place your order, immediately empty plates, spoons, forks and knifes are kept on the table. These plates, forks, spoons and knifes are kept somewhere nearby and are easily accessible. You can’t do much with the empty plates other than staring at them but it gives you a feeling that your order could arrive at any moment. This is exactly what App shell does and is meant for.
Sample App Shell
This allows you to add your application to user’s home screen. It is added to the head tag of your page as below -
<link rel=”manifest” href = “/manifest.json”>
Sample web manifest would look like -
Sample web manifest
Service Worker life cycle -
Here are some case studies worth reading on PWA by Addy Osmani. A Tinder Progressive Web App Performance Case Study Tinder recently swiped right on the web. Their new responsive Progressive Web App — Tinder Online — is available to…medium.com A Pinterest Progressive Web App Performance Case Study Pinterest’s new mobile web experience is a Progressive Web App. In this post we’ll cover some of their work to load…medium.com A React And Preact Progressive Web App Performance Case Study: Treebo Authors: Treebo: Lakshya Ranganath, Chrome: Addy Osmanimedium.com
Good news is that all the popular frameworks (Angular, React, Preact, Vue and Ploymer) have made sure that their CLIs are by default creating apps as PWA and supporting all the above mentioned features out of the box.
PWA in action
Complete list available on Wikipedia.