Introduction

A progressive web app (PWA) is an application that is built using web technologies, but it provides user experience like that of a native or a platform-specific app.

Just like a website, a PWA can run on multiple platforms and devices on a web browser. Like a native app, it can be installed on the device, can operate in the background and in offline mode, and can also interact with the device and with other installed apps. Some of the top companies that have developed their products as PWA’s are Twitter, Starbucks, Pinterest, Flipkart, Uber, Spotify etc.

Characteristics of PWAs

• Responsiveness – Since different companies produce gadgets with different screen sizes, it’s the developer’s responsibility to ensure the app can be used on any screen size and its content is available at any view-port size.

• Installable – One highlighting aspect of a PWA is that the browser can promote the application to be installed. Once installed, the app provides the look and feel of a native app which can be launched with an icon. This provides the application an edge over other apps as research suggests that users are more comfortable using a native app than a website. The UI experience for installing a PWA might be different depending on the browser and platform. One common experience is to have the install icon in the URL bar. On clicking the icon the user is prompted for installation.

• Offline capability – PWA apps can work even when the device is offline. This is achieved through service worker and other offline storage techniques. PWA uses Cache API to store resources such as HTML, CSS, JavaScript, and images locally which ensures users can access content even when they are not connected to the internet. Some of the caching solutions include. Cache – first strategy – which serves the content from cache and falls back on network only when the requested content is not available in cache.Network – first strategy – which tries to get the content from network first and if that fails then falls back on the cache.This provides an enhanced experience as the users can access saved data, for e.g. listening to a downloaded music on a music app or reading through messages on a messaging app even when there is no internet connectivity.
• Push notifications – Push notifications are short messages that show up on the user’s device. These can be triggered from open applications or pushed from the server when the app is not running without any action from the client. They are powerful marketing tools that help re-engage the audience and keep them informed about new updates. To enable push notifications, PWA uses Service Worker which provides two APIs, Notifications API, and Push API. Using the Notifications API, the app can display notifications to the user. The Push API allows the app to subscribe to push service and receive messages.
• Appearance – When the PWA app is installed on a device it should look like a native app. This can be achieved by including an app icon.

• Security – For security reasons, service workers can be served only over HTTPS. Service workers are powerful APIs which are vulnerable to malicious attacks like man in the middle attack and hence they are not allowed over HTTP.

• Performance – By leveraging service workers, applications can implement cache-first strategies for offline access and faster loading. The service worker serves the content from cache and falls back on network only when the requested content is not available in cache. Service workers can also use pre-caching strategy to ensure key resources are available as soon as the user loads the application for the first time.

• Build and deployment – The two basic building blocks for a PWA are.Service worker – It is a JavaScript file that needs to be registered. If registration is successful, the service worker will be downloaded, installed and activated on the client. Service workers act as proxy between the application and the network when online. The service worker provides offline experience by intercepting network requests and taking necessary action depending on network availability. A service worker is run in a worker context. It has no DOM access and is non-blocking as it runs on a different thread to the main JavaScript that powers the app.Manifest file – A manifest is a JSON configuration file which defines how the app should look and behave. For example, the name of the app and the icon image.

  Since PWA is built over web technologies, the existing deployment techniques can be used for PWA as well.

Benefits of PWAs

• PWA’s provide the best of both worlds. They are responsive and run on multiple browsers on devices with different screen sizes and work as a native app.
• Unlike a native app, the updates don’t have to be dependent on an app store.
• They’re built using common web technologies and hence learning curve is minimal.
• They’re fast and lightweight.
• They work even when there is no internet connectivity.
• They can be discovered by the search engines.
• They are easily installable.
• Low development and maintenance cost.

PWA Limitations

There are certain limitations to PWA’s running on iOS devices.

• PWA’s cannot be published on the Apple store.
• Although in Android devices PWA’s can be run on different browsers such as Chrome, Firefox and Edge, in iOS only safari supports PWA.
• Although PWA offers app like experience, it cannot connect to some phone functions like Face ID, Touch ID, iOS’s virtual assistance etc.

So when should you prefer PWA over a native app?

• Development cost – Native apps need expertise in different programming languages as the apps need to be developed for two different operating systems and hence double the development cost. Since PWA is a web-based application, it uses a single code base which significantly reduces the development cost.
• Maintenance cost – Separate code base leads to higher maintenance cost. With a single code base, PWA’s are more manageable and affordable.
• Discoverability – Native apps use App Store Optimization (ASO) to improve an app’s visibility and to get more downloads.
  Since PWA’s are essentially web applications they are easily discoverable by search engines.
• Time to market – Native apps require more time for development and deployment as they need approvals from the app stores.
  Since PWA’s are not OS or platform specific, they can be released in a quicker timeframe.

Additional capabilities of PWA

With support from tech giants like Google, Microsoft and Apple, the capabilities of PWA’s keep increasing year after year. Below are some of those features.

• Camera access – With access to camera, features such as barcode scanning, photo id scanning can improve user experience.
• Augmented and virtual reality – Access to camera also allows to implement augmented and virtual reality which greatly benefits eCommerce sites.
• Geolocation – This capability brings quality-of-life improvements with implementation of features like store locators and real time tracking.
• Speech recognition – With full access to speech recognition the apps can be made more accessible and inclusive towards certain disabilities.

Success stories

• Twitter released a PWA alternative to the native app called Twitter Lite which consumed only 1-3% of the size of the native apps.
• Starbucks was able to double the number of online orders with release of its PWA version.
• Users on Pinterest spent 40% more time which led to revenue increase.
• 60% of Flipkart’s customers who had uninstalled the native app returned through their PWA.

Conclusion

With minimal learning curve, developers can turn their existing websites into a Progressive Web App which provides the best of both worlds.