What is a PWA?

#javascript #webdev #tutorial #pwa

In today’s world we are not new to mobile websites. Mobile web has improved tremendously in the last few years. The majority of today's websites are device friendly or I should say responsive because of frameworks like Bootstrap, Material or Foundation.

A Progressive Web App is also a mobile website but the one which is progressive in nature or in simple words with advanced capabilities. I know Progressive Web App is a long name but trust me, it’s not just three fancy words put together. Every word has some meaning. For the sake of this article, I am going to address it by its initials i.e. PWA. Before jumping to what PWA is and what are its pros and cons, we have to see why we may need to make our website a PWA so lets begin.

Mobile Apps vs Native Apps

The reasons why most of the users opt for a native app are the following.

Push notifications: User gets notified about the updates through notifications so it improves the user engagement with the app.
Icon on Home screen: It is always available at your fingertips. You can simply tap on the app icon and use it whenever you want.
Access to device features: These apps have access to native device features like camera, geolocation etc.
Offline support: Now a days almost all the apps work offline. If not whole, at least some portion of the app works offline.

On the other hand, there are mobile websites which are simply a mobile version of a normal desktop website. The web has a wider reach. You can search something on Google and boom, you get the results. You can click on it and you get to the website so no need to download any app from an app store or play store.

So, it's not important that which one is better. The important thing is do we need something which offers best of both the worlds?

Do we need an alternative?

One of the main reasons why companies feel a need to have a mobile app is, it offers a great deal of user engagement. If users are regularly using your app then there are possibilities that they may recommend your app to other users, and may be they will be interested in exploring paid features(if any) of the app.

Native apps may have an upper hand but even native apps can have some downsides.

From the customer point of view, if I am looking for a ‘To do/Reminder’ app I may see number of apps. Each one will have their pros and cons so it may become difficult to find an app which is suitable for the user needs. Also, some of the apps may consume some extra space on the phone which can make your device really slow.
From a company’s point of view, if I want to build an app targeting different platforms, I will need developers who know different languages and technologies like Swift or Objective C(iOS devices), Java(Android devices), C#(Windows) etc.

In today’s world developers and businesses looks for faster development and cost-effective solutions and that’s where PWA stands as a good option.

Let’s take a look at What is a PWA and what it brings to the table.

What is a Progressive Web App?

PWA is a website made to resemble an app that is installed on your smartphone, laptop, tablet, or desktop
It is built from the web technologies we all know like HTML, CSS, and JavaScript. Some of the frameworks have support for PWA too.

The features offered by a PWA are supported by most of the modern-day browsers. Some of them are

Push Notifications
Camera Access
Sharing Content
Location Services
Background Sync
Offline support and many more...

Even you can add a PWA to your home screen so it gives you a native app experience. Also PWAs are accessed through the web, they don’t require a download from the app store. Well, now a days Google does offer you a support for that, but if PWA is always a good option if you want to save some bucks.

In today’s fast paced world, when we develop a website, there are mainly three things we look for.

Reliable: It should load fast and provide offline functionality (at least for some part).
Fast: It should respond quickly to user actions.
Engaging: User should get a feeling of operating on a mobile app.

Well, you find all these things in a PWA. With a couple of additions, you can turn almost any website into a PWA. This means that you can build a PWA rather quickly, in regards to a native app that’s pretty difficult to develop.

According to studies, PWAs are simpler and faster than traditional mobile apps and websites. They can be shared through a URL, and most importantly, since they are not targeting any particular platform, they are cost effective and takes less development time.

Many sites you find online are actually a progressive web app. Here are some examples.

Let’s take an example of Pinterest. After they launched their website as a PWA, they observed

40% increase in user visits and 60% increase in user engagement
44% increase in revenues
Data storage comparison: The Pinterest PWA requires approx. 400 KB of data storage, which is much less than the native Android (19.8 MB) and iOS (161.1 MB) apps

Also after Twitter launched its Lite version, they observed

65% increase in pages per session
75% increase in Tweets sent
20% lower bounce rate
Data storage comparison: At 500 KB, Twitter Lite is much smaller than the corresponding Android app

Benefits of Progressive Web Apps

Easy to install
Universal Support
Works offline
Easily discoverable on web
Faster development targeting multiple platforms so cost effective
Native App experience to the end user

The companies which feel the need of PWA use the most recent web technologies which aims at delivering the most amazing web experience to the user. By boosting the performance, accessibility, and user engagement, progressive web app developers ensure that these apps are fast, engaging, and reliable.

Drawbacks of using PWA

Searching the App in the app store can be difficult. This can be a problem for some users. You cannot just go to the app store and search for an app.
There are some limitations on using the operating system of a smartphone. PWAs get deeper and deeper access to the operating system of a smartphone, but a native app can go deeper still. Plus, there are limits to what a PWA can do. For instance, PWAs are not the best choice when you want to build high-performance games.
Different PWAs cannot share resources or data among themselves because they are highly isolated.

Now we know the good side and a bad side of turning your website into a PWA but there is still an important question which needs to be answered.

Does my audience need this?

From the business point of view, you have to know your target audience. And you have to find out whether your business needs a PWA or not.

If you are in doubt, ask yourself these questions, - What do I want this technology to do?

Who are my end users?
Will they have a good data connection and solid device hardware?
What is the nature of content my PWA is going to offer?
And will this app help them do their job better?

Final Thoughts

There are some brownie points and there are some caveats, of course. While browsers have been quick to adopt the technology for this, there are still some limitations. IOS is supporting PWAs now, but there are still some limitations, so you may or may not get the same exact experience on all iOS devices.

So to conclude, PWAs are awesome and implementing them doesn’t have to be all that hard. But just because it’s easy doesn’t mean you have to do it. But if you do implement it, it's sure going to give your users a solid native app like experience.

Thank you for reading this article. Let me know your thoughts in the comments section. In the next article, I will focus more on the technical side of a PWA and what makes them so progressive so, stay tuned.