Progressive Web Application (PWA)

Progressive Web Apps (PWAs) are web applications that are regular web pages or websites that work in tandem to provide an app-like experience on the mobile web. It was launched by the Google a couple of years ago (in 2015).

The most uniquely referred feature of PWA is to make application available offline which is achieved by the use of service workers.  Service Workers is a script that works in the background independently irrespective of the app and its platform. It runs whenever there is an event such as push notifications, network requests, change in connectivity status etc. It is a program which stores the cache of the resources used by the application. Irrespective of the data type (js file or JSON) from an HTTP request, it allows developers to handle cache providing flexible experience.

Following are the features of Progressive App:

  • Progressive – No matter which platform/browser, they keep on going and work for every user.
  • Connectivity independent – With the help of service workers they do not crash or stop in offline mode.
  • App-like – gives the feel of an app to the user.
  • Up-to-date – Service workers are always running in the background which keeps on updating the process.
  • Safe – Served via HTTPS to prevent illegal interference and ensure content has not been altered.
  • Discoverable – Can be recognized as applications through W3C manifests and service worker registration scope which allows search engines to find them
  • Installable – Allow users to keep the apps on their home screen without the hassle of an app store
  • Linkable – Easily share via URL

PWA and popular JS framework

As PWA has become a standard for the modern web, some popular JavaScript framework like Angular, React, Vue.js provides easy way to enable PWA.

Angular framework PWA supports

Angular 5 ships with angular service worker (NGSW). For new application, angular developer can take advantage of Angular CLI which will do most of the heavy lifting works by providing a boilerplate, configuring your app to use NGSW and setting up the necessary files. And, for existing project, it requires manual work such as installing the service worker package, enabling the build support in angular-cli.json file to generate the manifest file, import and registering it and creating ngsw-config.json configuration file.

React Library PWA supports

React Library doesn’t have built-in service worker boilerplate. But Webpack which is used as a build tools for React has two plugins sw-precache-webpack-plugin and pluginwebpack-manifest-plugin which will generate the service worker and manifest file. The generated service worker is ready to be registered to the react app for building a PWA.

Vue.js framework PWA supports

Vue.js CLI offers in-built PWA Webpack template which offers a quick way for the developer to create PWA. The CLI will generate all the essential need for building a PWA which includes the service worker and registering it, manifest file, a favicon and mobile-friendly image.

PWA and Native

  • A native app is for a device whereas PWA is for a web browser.
  • Cross-platform hybridization – PWA creates a single instance of an application that is functional on every platform which is not available in native.
  • A Minimalist Package – In native apps, a user has to download the app by navigating to its native app but PWAs eliminate the need for installing the app from the store as you get the website and app at one place.
  • Sublime User Experience – Due to a great range of UX functions available, PWAs deliver better UX experience than native apps. Example – AliExpress which has raised the conversion rate to 82% after implementing a PWA app solution.
  • PWAs are comparatively much budget-friendlier and quicker to develop in comparison to the native apps.
  • PWAs always remain up-to-date. In case of bug fixing or version upgrade, we only have to update the app centrally whereas in native apps we need to submit the new version in the app store.
  • PWA is slower whereas native apps provide faster experience.
  • PWA consumes more battery than the native apps.
  • The native apps can also help in securing the data based on the storage capacity of the mobile device.
  • The mobile phone or the device does not require interpreting the codes in the case of native apps while writing the language of the program. But this facility is absent in PWAs.
  • The native apps provide the access to the device functionality such as NFC, GPS, Bluetooth etc. which is missing in PWA.

PWA vs SPA

A Single Page Application (SPA) can be a Progressive Web App (PWA) but a PWA doesn’t need to be an SPA.

An SPA is simply a web app where a single page is loaded in the browser and all subsequent routing and page view rendering is handled on the client (browser) using JavaScript. In SPA, when the user clicks a link, the browser does not send any request to load the complete new page instead it uses JavaScript to manipulate existing current page and create a myth that user has navigated. This is achieved typically by using a framework such as Angular or a library such as React.

The PWA with respect to SPA is always :

Reliable – Irrespective of network connectivity, it loads instantly.

Fast – Respond quickly with smooth animations to the user interactions.

Engaging – Feels like using an app.

Progressive Web Apps (PWA) and Single Page Apps (SPA) are the design concepts to bridge the gap between the users of the internet and smart devices by providing the similar user experience.

If the principles of PWA and SPA are combined, then users can be provided with a much-improved experience especially on mobile phones even with unreliable internet connections. These are the future of web development which will make a web experience – faster, efficient and easily accessible. As of now, PWAs are an alternative to mobile apps, especially for Android devices. PWA can be a substitute for app store apps by using cross-platform browser support for the underlying technologies.

PWA upcoming advancement is app specific caching strategy, where the developer must decide on what app features and functionality to cache for offline use.

Mapu

I am a technology freak with passion for UI technology.

Leave a Reply