What is a PWA?

PWA ( Progressive Web Applications ) is a web application designed to run on mobile as a native mobile application. It offers the benefits of both web and native applications.

Why do we need it?

Since mobile users have been on the rise for the last two decades, web technologies have evolved to facilitate them. Responsive designs of web applications and a mobile-first approach to designing web applications had a positive impact on mobile users accessing the web. However, this was not enough to compete with the native mobile apps.

To fill the gap between the native apps and traditional web applications google presented PWA as a new web standard in 2015. PWA has features of both native mobile apps and web applications. It is a web application running on the browser, but for the user, it offers the look and feel of a native mobile app.

The main features of PWA

• PWA can be installed on mobile and desktop. It installs faster than native apps and takes much less storage
• Offers functionality such as offline mode, push notifications(only on Android at the time of writing this post ), access to geolocations, camera, microphone, etc
• PWA is responsive
• Connect larger web ecosystems, plugins, and community
• Ease of deployment and maintenance
• Secure as PWA work on HTTPS

Limitations/ Disadvantages of PWA

• Lack of support on iOS: no push notifications, No “Add to Home Screen” option
• Lack of browser support: at the moment of this post Edge, Safari or IE does not have the support for PWA
• Can not communicate with other apps installed. Because PWA is essentially a web application. therefore, it can not access calendars, contacts, browser bookmarks, alarms, etc. do
• PWA is basically HTML5 and Javascript. Therefore, PWA can only be installed in hardware that supports these technologies.
• PWA can drain a device’s battery more than native apps do as it uses technologies such as HTML5 and javascript

How to install PWA on your mobile

• Open a URL address of a PWA you want to install in your browser.
• Ex: pinterest.com
• Open your browser’s settings.
• Scroll down and tap the “Add to Home screen” option. This will prompt the installation of the app.
• Click on “install”.
• After the fourth step, you will notice an icon on your home screen for the website.

Main Technical components of PWA

There are 3 main components

1. Service Worker

   • Push notifications
   • Offline mode
   • Resource-caching

2. Web App Manifest – Responsible for icons, display name, background-color

3. HTTPS – For secure network communication

Is PWA the future?

Android, IOS, and Windows all support PWS at the moment of writing this post. PWA is a trending technology with a lot of potential to improve. Its speed and ease of installation have the potential to replace native apps. As technology improves, there will be ways the eliminate any drawbacks it has at present.

Final thoughts…

If you are a web developer, it is time to shift your focus on PWA and start implementing your classical web apps with this new standard. It will make your web apps more appealing to clients. You can also educate your users on PWA from a user’s perspective. This way you will prepare them for the near future.