Translated from Why Progressive Web Apps Are The Future Of Web Development by Tushar Agrawal.

Recently, many people have proclaimed that PWA is the future of Web development, especially for mobile devices. At its core, Progressive Web App (PWA) is a Web application that uses modern Web technologies to provide users with a native-like App experience. These Web applications have incremental enhancements to provide caching, background synchronization, and push messaging. Although the PWA has been proposed for more than two years, the feedback has not been that strong. A few players have adopted this idea, but most have not really embraced it. Chrome and Mozilla are probably the best browsers to test your PWA app because Apple hasn’t entered the space yet.

PWA- Is it really that good?

On the one hand, native apps are unquestionably fast and agile in most cases. On the other hand, some websites are slow to access and connection problems are getting worse. Twitter and Google’s Mobile Page Acceleration Program (AMP), implemented in 2016, only addressed the problem of slow links. The PWA works perfectly in all scenarios. With a good Internet connection, there is no problem. The problem is that when there is no Internet connection, we get an error page.

Why is PWA a good choice

Research shows that the average user spends 80% of their time on a limited number of three apps (Chrome, Quora and Medium in my case). Other applications sit idle in memory most of the time. Also, developing a native application takes 10 times longer than developing the same Web application. If you want to develop and maintain apps for different platforms, such as Android, IOS and the Web, it costs more.

Some of the native application features that PWA can implement

  • Being pushed
  • Full screen
  • Work offline
  • The launch page has a more native app-like experience and PWA can use more of these features. These are just some of the capabilities of the PWA. However, there are still some traditional features that can only be experienced on native apps.

What features can’t be implemented by PWA

  • Access to different hardware sensors is limited or restricted
  • The alarm clock
  • Address book access
  • The PWA is evolving rapidly, and we can expect to implement these features on PWA soon.

There are two main parts of the PWA

APP Manifest

It’s a JSON file that defines the app icon, how to install the app (standalone, full screen, in the browser, etc.). And other relevant information. It is located in the root directory of your application. Each page needs a link to render the file. Add it to the HEAD section of the HTML file:

< link rel = "manifest" href = "/ manifest json" >

Service Worker

Service workers are the reason for the magic in PWA. It is nothing more than JavaScript code that acts as a programmable agent responsible for intercepting and responding to network requests. Because it only acts as a proxy and can be easily modified, applications must use HTTPS requests to ensure data security. It’s worth noting that the service worker stores the actual response, not just the response data, but also the HTTP response headers. This means that your application can simply generate the network request and process the response without requiring any specific code to handle the cache.

How do you start building a PWA

The good news is that starting to build a PWA is easier than you might think. In fact, it is likely that all existing sites will be converted to THE PWA model. If you’re going to develop PWA, I highly encourage you to check out this video.