Progressive Web Apps: A Convincing Case for Native-like Apps on the Web

So its November 2018 and if you are a web developer, you must have heard about PWAs (unless you live under a rock)

Alex Russel who coined the term with Frances Berriman describes a Progressive Web Application as:

responsive, connectivity-independent, app-like, fresh, safe, discoverable, re-engagable, installable and linkable web experiences.

They are essentially web applications that uses the very latest modern web technologies (service workers) to deliver amazingly awesome user-experiences with Native-appyness on the web.

Simply put, PWAs are web apps that have all the native app functionalities without ever having to use the appstore again, you could call it a hybrid of best user experience. This all sounds a bit too good to be true right?

Tip: When building Web Apps, use Bit to turn components into reusable building blocks to share as a team between projects. Give it a try.

But, why PWAs?

short answer: because it combines the best of web experiences with the best of native-appyness.

Before we can talk about combining the best of two different things, let us look at some bad things about both the web and the native app experiences respectively.

Web

• Bad Network : There are 3 types of bad network, no network, s/low network and lie-fi. The Google Chrome Dinosaur represents the no network, the place in your house without 3G is low or slow, however, the other place in the bathroom where your network bar is full but you cannot browse is lie-fi.
• Lack of User-meaningful content when the network is down (ft. chrome dinosaur game) : A very high percentage of web pages online always show the dinosaur whenever network is down. While the dinosaur game can be a bit encouraging, it is mostly frustrating.

no_internet.jpg

• Bookmarks : we wanted apps on the web but always got a colorless star at the right side of our search bar.

Native Apps

• The stress of using the Appstore: especially that of first installation, then monthly updates and more updates (and rate my apps pop-ups)
• Not easily discovered by search engines.
• The bottlenecks of submitting Apps for appstore approval: If you are an IOS developer, you must have given up a lot more times than andriod studio guys (boo! apple)
• The High Churn rate of Native Applications: People get bored and delete apps quicker than we think, recent studies show churn rates at month 2 of app installation at over 65% (if 100 people download an app in January, 65 of them delete the app by February)

Native-Appyness is simply the state of a web application adopting Native App-like features and functionalities to the point where they get indistinguishable

Average Retention/Churn for Native Apps last year

PWAs: Can Web Apps feel like Native Apps?

Remember our man Alex, Let us conclude by going through his definition of PWAs and see the marriage of Modern Web Experience and the pursuit of Native-Appyness. (PS: I coined Native-Appyness)

1. Responsive : All PWAs are responsive to all kinds of mobile screens and supported in all browsers under the earth that go through regular updates (yes, even Safari).
2. Connectivity-Independent : Content shown on PWAs does not depend on your network anymore, new browser employees called service workers have been assigned to make sure you never see dinosaurs again (yipee!)
3. App-Like : All PWAs can be accessed in your App Drawer, they can be added to your home-screen with their own icons as any other Native App would. In fact, you would not be able to tell the difference.
4. Fresh: Everybody knows how fresh apps on your mobile look compared to web pages, well that’s in the past now(cheers!)PWAs are fast, so fast that they are way faster than your Native Apps. Pages can be pre-cached and loaded straight from device.
5. Safe : Because they are still essentially web apps, they are going to be accessed over https not just the regular unsafe http (chill, your localhost web servers would be able to run it in a development environment, Don’t panic)
6. Discoverable : Unlike Appstore Apps, PWAs are always discoverable by crawlers and search engines. What can be better than this?
7. Re-engagable : I know you must have asked if PWAs would also get app notifications like Native Apps. So it keeps getting better, Answer: Yessssss.
8. Installable : One-click Installation, No Appstores, No Appstore Permissions.
9. Linkable : Easily shared by a link (URL)

For Progressive Web Applications to work, you must employ the services of service workers.

Who are Service Workers? Oh, sorry what are Service Workers?

In the land of Progressive Web Applications and the department of Native-appyness, a Service Worker is a proxy between your web page and the network, this proxy is programmable so you intercept and even cache requests from network made by the web page to be able to create an offline no-dinosaur web experience.

In simpler words, a service worker is a Javascript file [.js file] that runs in the background separate from the web page and assists in an offline-first web application development. They provide the very technical foundation for rich offline experiences, periodic background synchronization, push notifications and a host of other native app-like functionalities.

Service Worker Characteristics

• They are run over HTTPS to ensure security.
• They are Programmable, the developer has all the power.
• It has no DOM access because it is run in a worker context running on a different thread from the app.
• It makes extensive use of Javascript Promises (Yes, you gotta learn that)
• It is terminated when not in use and kickstarted as soon as the need arises.

The Service Worker Lifecycle

Compared to a Native App’s Lifecycle, the service worker lifecycle is amazingly short.

1. Registration.

2. Installation.

3. Activation.

Registration

This is the simple process of telling the browser where exactly your javascript file stays, what directory is your app.js is located.

The register() method is called to complete a service worker registration. Here is a sample service worker registration example:

if ('serviceWorker' in navigator){
   try {
     navigator.serviceWorker.register('./sw.js');
     console.log('SW successfully registered');
   } catch (error) {
     console.log('SW registration failed');
   }
 }

It is automatically downloaded when a user accesses a page containing a service worker registration.

Installation

This is mainly done by the browser when it finds a service worker registration register() on a web page. The browser goes through with installation if it is only seeing the registration for the first time. If it has seen it before, and it is probably outdated, it would update it instead.

It is terminated when not in use and kick-started as soon as the need arises.

The Installation is achieved by the install event. By doing so, a cache is opened in the browser for the web page and now files can be cached and cached assets confirmation can be made.

Activation

After the first two steps of registration and installation, we have to finally activate the installed service worker to make it active.

The activate event is used to activate the service worker

// a sample service-worker.js file
self.addEventListener('activate', function(e) {
    console.log('Service Worker is Activated');
  });

After this stage, you can refresh your application and booOOOM! your service worker is ready for use.

Examples

From Twitter mobile lite to Ali express to trivago to Washington post to even forbes and lyft all are progressive web apps and provide a really good offline web experience that is similar to Native Apps.

Lyft on the web

Conclusion

I hope you have been thoroughly convinced to try out building progressive web apps, you have also seen what a service worker is and how it can be easily setup and all the perks that PWAs have to offer, so go out there and start building for offline experience experiences! Have you used PWAs in any project? Comment below.