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 —
App Shell
Web manifest
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.
App Shell
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.
App shell is the minimal HTML, JavaScript and CSS that powers your application UI. It is loaded in less than a second. It is stored and served from the cache.
Sample App Shell
Web manifest
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
These are JavaScript workers but unlike web workers they run in browser and are not part of the page. These are called programmable network proxies. Which means they can intercept network calls and play around with the responses.
Service Worker life cycle -
Sample PWA
Weather PWA Edit descriptionweather-pwa-sample.firebaseapp.com
Case Studies
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
CLIs
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.
Tools
GoogleChrome/lighthouse lighthouse - Auditing, performance metrics, and best practices for Progressive Web Appsgithub.com GoogleChrome/workbox workbox - 📦 Workbox: JavaScript libraries for Progressive Web Appsgithub.com
PWA in action
Flipkart Lite
Paytm Lite
Github Explorer
Washington Post
Wiki Offline
Twitter
Complete list available on Wikipedia.