An Introduction to PWA

A little back story

The internet started its journey around four decades ago with the web, it has turned out to be so appealing, engaging, captivating that its part of our daily life. Over time the internet has grown enormously in terms of its reach and domain.

The Internet, which started as a tool for sharing information/knowledge from one node of a region to another, today lets us connect, shop, play, entertain and much more.

But the internet is not the only revolution that has taken place, with the internet the whole digital, electronics and communication industry has been revolutionized. With this revolution, mobile phones were introduced and then multimedia mobile phones entered the market which made it easier to access the internet from the palm of your hand. Exploiting the internet and mobile phone availability, reachability among users, the mobile applications became the best user interaction means.

With a vast range of mobile applications available to select from, today web apps are considered deteriorating.

Here's Why:

• The web was not initially designed to deal with offline situations.
• Native and hybrid apps have given developers much more access to the device hardware than web apps have had.
• Native and hybrid apps have the benefit of being right there on the home screen.
  

Well, then is it the end of the web apps? Na, I don't think so.
Then where is the cavalry? It's here the Progressive Web App.

Progressive Web Apps (PWA) combine new technologies with established best practices for creating a reliable, accessible and engaging experience.

Why PWA?

The effort of convincing a user to install an application is commonly referred to as friction, which is followed by finding an app in the app store, pressing install, authenticating, accepting permission checks, waiting for the download and finally opening the app once it's installed. But PWA they are so easily accessible, all there to do is to share the link. One of the top reasons why companies build web applications or hybrid applications over native applications is cost. By targeting the web they can build one application that works for all platforms.

Progressive Web Apps allow you to deliver user experiences that of native apps without having different development teams and needing to deal with distributing binaries and updates. And also it becomes easy maintaining backward compatibility in their service APIs as there is only one version of the application. By focusing your efforts into building one app, you can deliver better UX and UI.

There are now ways of accessing 3D acceleration, accelerometer, position, camera and all kinds of other device APIs. Bug fixing is dashing, as an example, if you realize you have a critical bug in your native app, your developer needs to find the problem, fix it, send the build to Apple and Google, wait for them to review the build, then the new update will be available to your customers. But not in case of PWA here you have the luxury to fix and build only once.

PWA artillery:

Reliable : A PWA launches successfully and delivers users content regardless of network conditions (slow or offline).

Responsive : PWAs can adapt to different screen sizes and orientations, ensuring that the UX is great for all users.

Engaging : PWAs sit on the home screen, work offline and are discoverable by search engines. Push notifications are present that provide timely and fresh updates.

Discoverable : No app store restriction. Just a link away.

Secure : Progressive Web Apps are secure by default. The technologies powering PWA requires apps to be served over HTTPS to work.

HOW?

PWA rely on a couple of new technologies as their armor:

Web App Manifest

The Web App Manifest is a JSON file that presents the application profile to the browser. It defines the application's name, colors, icons and how it should run if installed to a device.

ServiceWorker, The Heart of PWA

The service worker is a JavaScript worker script that sits between your application and the network. With it, you can intercept and handle any network requests so your application can work reliably even in poor network conditions or offline situations. Common use cases for the ServiceWorker are caching of static assets and providing fallback content for network requests when they fail. So a stale-while-revalidate strategy will quickly return a cached version of a resource while it goes to the network to fetch an updated version if there is one. This is a good strategy for content that rarely changes.

ServiceWorker doesn’t need a web page or user interaction to work. This means that it will run even when your website is not open, even if it can’t access the DOM directly
It is event-driven and can be woken up by the browser if needed, even when the user is not on the page. This allows you to send users to push notifications for important events like when an item is shipped or when a user receives a message. Background sync is a ServiceWorker feature that allows you to retry network operations when the application regains connectivity. This helps give users read-write offline functionality. Examples of using background sync are sending emails or uploading images when the client is back online.

Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build progressive web apps.

Lighthouse is a web tool developed by Google to test and score your progressive web app. You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did.

Conclusion

Native apps are not going anywhere but I think that we should slowly start adopting the PWA technology when creating products where end-users requires an application accessible anytime, anywhere on any device of any size. PWA will provide the customer satisfaction that we promise to them. Also, PWA comes with the assurance of not exploiting user's data like SMS and call history which great promise to customer.