Progressive Web Applications
- Posted by Yomna Anwar
- On February 6, 2022
If you’re anything like me, then you probably find yourself falling into the habit of downloading apps only to delete them a couple of days later to save up some storage, even though you’re fully aware of the fact that it’s not practical to keep downloading and deleting or offloading these apps, yet, most of the time, going through that hassle is still better than making the swap to the slow non-responsive website.
Well, what if I tell you that there’s a middle ground where you still get the app user experience without all the storage used up by an app! Worth looking into, right?
Let me introduce you to progressive web apps.
The concept behind a PWA is to use the browser to create an installable application, which provides the user with a native app-like experience
Introducing PWAs to the world
During the iPhone reveal in 2007, Steve Jobs introduced the concept of using web technologies, like HTML and CSS, to develop apps. And even though it was Steve Jobs’ concept, apple opted to create the app store and install apps through it.
Inspired by Jobs’ concept, google introduced PWA in 2015. After the initial release, Google and Microsoft decided to work side by side to further develop PWAs, and the fact that these two major competitors decided to put the competition to the side and work together speaks for how huge PWAs are and how they were seen to be the next big thing in the industry.
What is a PWA?
If you’re thinking to yourself that there must be more to the “next big thing” in the industry than just being an installable low storage web app, then you’re on point! A progressive web app combines the many benefits of using a native app with many of the benefits of using a web app. Needless to say, native apps blow web apps out of the water when it comes to user experience, UX/UI and responsiveness. Native apps also do not require an internet connection. Granted, they might need internet for some features but the user can still at the very least, open the app without an internet connection.
Yet, we can’t just opt to use native apps, as Webapps have the upper hand in some departments. We’ve already mentioned a major factor, which is storage. Another point worth mentioning is discoverability.
How much easier is it to just google and find websites than use the app store to find apps?
That’s exactly what discoverability is. Basically, discoverability is how easily a user can “discover” the app and web apps have the take the win over native apps on this one.
PWAs bring you all what was mentioned above! You get a similar native app experience, with low storage, huge discoverability, all without requiring an internet connection!
Sounds like a win–win, right?
How to use a PWAs
So, after we’ve discussed PWAs, it’s time to further clarify what a PWA is and how to use them.
Have you ever wondered about the “add to homepage” option in your browser? It’s clear that it adds web pages to your homepage but to me, I never really understood the difference between adding to my homepage and bookmarking in my browser until I learnt about PWAs.
If this is your first time learning about PWAs, I suggest you follow the following steps.
1-Open your phone browser.
2-Visit the Pinterest or Twitter website and press add to the homepage.
Did you see the app installing? Being installable is the first property of a progressive web app.
3-Now open the app.
See how similar it is to the native app and how responsive it is? Being responsive is the second property of PWAs.
So now that we’ve experienced firsthand some of the features of a PWA, lets dig deeper and discuss the remaining ones.
Features Of PWAs
A PWA will have the following features. You’ll see that we’ve already discussed a few of them.
- Responsive: a PWA provides the user with the responsiveness of a native app which far exceeds that of a web app
- Installable: as we’ve already seen, a PWA gets installed on your device. It’s worth mentioning that it can get installed on a computer as well, not just a mobile device. You can even install a PWA from the Microsoft and Google stores!
- Discoverable: PWAs have the discoverability of a normal website as it technically is just an installable website.
- Network Independent: Internet connection is of course necessary to install the PWA, it might also be necessary for certain features, but a PWA caches data and you can still use the app on the data that has been cached, at any time. Just like a native app, the lack thereof an internet connection could mean that the data will not be up to date.
On to the features that we have not discussed before
- Linkable: a PWA is a web app after all, which means it can be shared through a link.
- Automatic Updates: The user is always connected to the most recent version without having to update the app.
- Progressive: Even if you choose not to install the PWA, you can still use it on any version of a browser, old or new.
- Re-engageable: You get push notifications while using PWAs.
- Safe: a PWA uses HTTPs connection which means it’s secure and the user can rest easy while using it.
Let’s Wrap things up!
Progressive web apps fill a gap that most of us struggle to find a solution for yet unfortunately, they were overshadowed by flutter and other new big technologies which led to them not gaining the popularity and success that was anticipated.
A common misconception is that PWAs aim to replace native apps and if you run that comparison then a native app will always win. As great as PWAs are, think of them as lite of a native app. PWAs can’t provide all the functionalities of a native app, one of the reasons is that they can’t control the hardware of your device. Although APIs can often be used to give control. So let me put it this way,
Imagine deciding to run a few errands one day, you can walk, but that would waste time. You can take your car, but then you’ll have to look for a parking spot everywhere you go. And so, you decide to take your bike as it saves time and you won’t have difficulty parking it.
You can’t compare a bike to a car as it will never replace it, but it can be perfect for your needs at times. That’s the same way you can’t compare a PWA to a native app, it is simply there to fill a gap.
The Future of PWAs
PWAs have far from hit their peak! Demand for PWAs is surely increasing and more and more companies and corporations, including some very big names, now have their own PWAs. These include Pinterest, Twitter, Jumia, Forbes, The Washington Post, Uber, Instagram, Lancôme and many others. Expect to see a lot more popularity for PWAs in the future.