The Mobile market share worldwide is 52.1% compared to the desktop market share of 44.2%.  40% of people search only on a smartphone. And there’s no sign of it slowing down. Which means whatever you build on the web is basically going to be consumed mostly by smartphone users. So how do you keep these smartphone users happy?

There are many things that go in, in making your website mobile-first. Things like RWD (responsive web design), WCAG (Web Content Accessibility Guidelines), the way you load the web pages, the render time and so on so forth. All of this is fine, but how do you make sure you provide the best experience even when the user isn’t connected to the internet. 

Enter Progressive Web Apps. Or we would call them Powerful Web Apps. Now, these beauties make sure your users never see the dinosaur when there’s no connectivity. So what makes PWAs better than normal web apps?

They are: 

  • Capable: You could build an app that has WebRTC, WebVR and even WebGL and make it install on a smartphone.
  • Reliable: PWAs work like a charm when there’s slow or no internet connectivity. Imagine letting the users have access to tickets to scan even when they are not connected.
  • Installable: PWAs behave just like native apps, Apps can be added to your list with the click of a button, they can be searched for and well unlike they have a Splash screen.

PWAs are still web apps under the hood, but the new web API’s make them more powerful, which also means that if the Clients don’t support these APIs, they will still be able to use the core functionality.

So how does a PWA achieve all of this? We would say just like how the native apps do it. The reason why PWAs can open without a connection is that they have everything that they need to run saved on the client’s device. Just like how the browser has a cached version of the web site’s resources, PWAs cache entire web apps so that you can run them as apps.

And to answer your most awaited question, how on earth do I build a PWA?

There are 2 main pointers that you need to make your web app progressive.

A manifest.json: A manifest JSON is basically a file which houses configurations for the PWA. The icons, splash screen colour and so on. Here’s what a sample manifest.json looks like.

{
“name”:”PWA Sample”,
“theme_color”:”#2196f3″,
“icons”:[
{
“src”:”/images/icons-192.png”,
“type”:”image/png”,
“sizes”:”192×192″
},
{
“src”:”/images/icons-512.png”,
“type”:”image/png”,
“sizes”:”512×512″
}
],
“background_color”:”#2196f3″,
“display”:”standalone”,
“scope”:”/”,
“start_url”:”/home”
}

You can have a look at what more the JSON can house here. This file also makes chrome show the install this app modal. Easy right ?

Service worker: Client-side web apps are dependent on the server for the data, services workers sit between the web app and server acting as a proxy. They intercept every call that goes through the server.

Coditation Website-PWA-Blog-Img1

The service worker is just a JS component and it uses the browser cache API to give this offline-first approach.

Let us go through the lifecycle of a service worker:

  • Installing: When a new service worker is registered using navigator.serviceWorker.register, the JavaScript is downloaded, parsed, and enters the installing state. If the installation succeeds, the service worker will proceed to the installed state.
  • Installed/waiting: Once a service worker has successfully installed, it enters the installed state. It will then immediately move on to the activating state unless another active service worker is currently controlling this app, in which case it will remain waiting.
  • Activating: Before a service worker becomes active and takes control of your app, the activate event is triggered.
  • Activated: Once a service worker is activated, it is ready to take control of the page and listen to functional events (such as fetch).
  • Redundant: Service workers that failed during registration, or installation, or were replaced by newer versions, are placed in the redundant state.

That is how REST APIs can help you make your app provide rich offline experiences, periodic background syncs, push notifications. Although they are not going to provide an exact native experience to the user, they sure are going to be a competition to the native apps. With JavaScript being write once, run everywhere (with a browser or a runtime), the web developers would jump on the PWA bandwagon.