Table of contents
Table of Contents
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 in 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
How to install PWA on your mobile
- Open a URL address of a PWA you want to install in your browser.
- Ex: www.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
- Service Worker
- Push notifications
- Offline mode
- Web App Manifest – Responsible for icons, display name, background-color
- 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 potentials 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.
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.