• Zebience Blog Admin

Progressive Web Apps : An Evolution

Inception


The World Wide Web, commonly known as the Web, has changed the way humans carried out their day-to-day activities. Web applications are software that act as a gateway for the humans to interact with each other over the web. The World Wide Web Consortium (W3C) defines standards for web application development that enable developers to build rich interactive experiences, powered by vast data stores, that are available on any device. W3C ensures neutrality of specification and implementation. Web applications are accessed via the internet browser and they adapt to device its being viewing them on. This gives it an incredible reach making accessible to anyone, anywhere, via any device with a single codebase.


Platform-specific a.k.a Native applications are built for a specific platform, such as iOS or Android. Native applications are downloaded and installed via a platform app stores and are instantly available on home screens, docks, and taskbars. They use the underlying capabilities of the device like reading/writing files from the local file system, accessing external device connected via USB, serial or bluetooth and even interacting with data stored on the device, like phone contacts and calendars. They appear like an integral part of the device making them incredibly capable & reliable.


If Native apps are known for capabilities then Web apps are known for their reach. But what are Progressive Web Apps then? Progressive Web Apps a.k.a PWA are built and enhanced with modern APIs to offer best of both the worlds delivering enhanced capabilities, reliability, ease of install while reaching anyone, anywhere, on any device with a single codebase.


Intrinsically, PWAs are ideally Web applications that take advantage of progressive enhancements which enable new capabilities in modern browsers. Features like service workers and a web app manifest make web application reliable and installable. If the new capabilities aren't available, then users still get the core experience.


Features of a PWA


Service workers


A service worker is a JavaScript that acts like a client-side proxy intercepting every web request and taking control the response sent to the client. PWA speed of rendering the requests is enhanced by serving data from the cache eliminating the network dependency. A service worker operates as an event-driven system which listens for events such as install, activate, fetch & push and calls the corresponding event handler.


Secure contexts


Service workers only work on web apps communicating using the HTTPS protocol because they have the ability to manipulate the web response of any fetch request. Anyone having a malicious intent might meddle with web response for a request on an unsecured web app using the HTTP protocol. Hosting a PWA on secure HTTPS protocol is mandatory. Communication using HTTPS establishes web app as a trusted site.


Manifest file


The manifest file provides information about a PWA in a JSON text file, necessary for the PWA to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the home screen of a device, providing users with quicker access and a richer experience). PWA manifests include its name, author, icon(s), version, description, and list of all the necessary resources.


Success stories


Many businesses have built PWAs and noticed a considerable increase in user engagement, faster web interactions and less storage compared to native apps. Some success stories are as follows:

  • Nikkei achieves a new level of quality and performance with their multi-page PWA. Performance gains where 2x better speed index, 14 seconds faster time-to-interactive and 75% faster loading with prefetch.

  • BookMyShow developed an improved version of their mobile website using a PWA, delivering an 80+% increase in conversions, 4x smaller than the Android app,180x smaller than the iOS app and less than 2.94 seconds load time

  • MakeMyTrip.com’s new PWA delivered 3x improvement in conversion rate, 38% improvement in page load times and 160% increase in shopper sessions

Reference

Recent Posts

See All