Why should you care about Progressive Web Apps (PWAs)?
This article summarises the things that I have learnt in Udacity’s Mobile Web Specialist Course. It is offered by Udacity in collaboration with Google. It’s an awesome course. You should definitely check out Udacity (here).
The world has become a global village. The average internet speed has gone up significantly. The average number of internet users in the world have steadily risen, and the number of cat videos have increased in proportion. The world is becoming increasingly reliant on the internet. The web has grown to a point where it has 5 billion devices connected to it. Yet, the thing that is most feared in this age of interconnectedness is the downasaur!
Developers strive to never show the downasaur, even in uncertain network conditions. This reliability is a cornerstone of offline-first approach. But you may ask: why do we even need to worry about the network or connectivity when on average the world is getting more connected, with speedier network connectivity?
Here’s why: When a user clicks on a link on a web page, the browser creates a request packet. This packet passes through multiple layers of TCP/IP on the client’s machine before it is sent to the Wi-Fi router. The router appends its own headers in the packet. The packet is then put on transmission cable that may be thousands of miles long, going to the other side of the globe. Along the way, the packet passes though multitude of routers, gateways, ISPs, and computers before reaching the server. The server makes an appropriate response based on the request, and the full journey repeats again in reverse.
That was a (very) short description of a really long journey!
Between the request and the response, a lot can fail. If a component is slow in this chain, it slows down the whole network. The response from the server may fail to come, or worse, do not come in time due to poor connectivity. 53% of users will abandon a site if it takes longer than 3 seconds to load! Google calls this type of connections Lie-Fi. The reasons for Lie-fi are(but not limited to):
- Poor Signal
- Misconfigured Proxy
- Faults in the mobile network
- Busy network
- Server being DDoSed
- Bugs in the server
- Moon’s Gravitational Pull
Well, the last point is debatable.
This means that we want to adopt a development paradigm that is offline-first as opposed to online-first.
What are online and offline-first?
Simply put, if a web app is making a network request and when the request fails, the app shows:
- Cached data
- Fancy error page
- A sad cat video
then it is online-first. Keep in mind that the web app is waiting for the network to succeed or fail first before showing any content.
In direct contrast, an offline-first approach shows something on the screen before waiting for the network to succeed or fail. A few examples to illustrate the point are —
- Deliver the page’s header and content from a cache on the device and then attempt to fetch updated content from the network.
- Deliver the page’s header from the cache, and then attempt to fetch content from the network.
It is evident from the preceding examples that the device’s or browser’s cache is going to play a big role in offline-first techniques.
What are Progressive Web Apps(PWAs)?
The web is one of the biggest platforms on the internet. It is bigger than any other operating system or form-factor. The web has higher (as much as 3X) reach than mobile apps. This is due to the fact that it is much easier to navigate to a new website than an application since a new application requires downloading and installation first. However, the engagement is much more on mobile applications because it becomes tedious to type URLs again and again when you can just touch an icon on your home screen and start to engage.
What if you could give users deep, engaging experiences of a mobile application while having the reach of a website? In the process, you also remove tedious steps such as installations via an app store? What if users lands on your website and they get a native-app like experience along with all the perks of a real app such as Push Notifications, Splash Screens, and the capability to work offline.
This new breed of web applications is known as Progressive Web Applications(PWAs). Here’s the definition from Alex Russell, who came up with the concept along with Frances Berriman. PWAs are:
Responsive, connectivity-independent, app-like, fresh, safe, discoverable, re-engageable, installable, linkable web experiences.
You might think: Why not just let the user use a browser and let them see the website like they always did? Well, this is where the offline-first approach kicks in. If the users’ network connection is lost, they are going to see the dreaded downasaur. If the user is on Lie-Fi, they are going to see a white screen of nothingness for a long time before the actual content appears. This is going to frustrate and agonise most users and is not the best user experience.
The key concepts of PWAs are —
- Reliable — Reliability ensures that the user never sees the downasaur irrespective of their network connection’s strength. This is usually achieved by using Service Workers in JavaScript. Service Workers are a relatively new browser feature that makes PWAs possible. They are scripts that the browser runs in the background, separate from the rest of the website.
- Fast — Respond quickly to user interactions with silky smooth animations and no jittery scrolling.
- Engaging — Feel like a natural app on the device, with an immersive user experience. This means that the PWAs should utilise the full set of features such as Full Screen launches and Push Notifications.
Should your new app be a PWA?
The PWAs are an evolving technology. Currently not all browsers support it, but that is changing rapidly. Chrome, Opera and Firefox are already on it. Support in Microsoft Edge is in development, and Safari has yet to catch the drift. Support for PWAs are also available in Webpack in forms of plugins. Parcel (after 1.6.0) supports PWAs too.
If you want to get your hands dirty now, you can do so here.
All in all, it is definitely one of the most exciting technologies to emerge in recent times in Web Development. The future of PWAs looks bright. Do you feel the same?
Sources —
Originally published at codeburst.io on February 21, 2018 by Arfat Salman
