Progressive Web Applications

BLOG
X
min read

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.

Modernizing Legacy Apps​

Maecenas mollis sagittis ante, eleifend ultricies sapien. Nam ultricies risus et augue auctor vulputate gravida eget sem. Quisque mollis gravida magna, eu semper eros pharetra in. Sed et elit sit amet odio rutrum consectetur vel vel ante. Praesent vitae elementum lacus. Vivamus efficitur nunc tortor, cursus lobortis purus placerat ut. Maecenas ut aliquet ante, vel finibus lorem. Nulla facilisi. Donec maximus elementum pulvinar.

test heading

h1 text

h3

Impact

Sample article featured image
Pellentesque posuere sem in ipsum venenatis, at bibendum lorem aliquam. Nullam condimentum tempus orci nec commodo. Maecenas malesuada elementum metus, non aliquam est elementum sed. Integer ac finibus ligula, id venenatis lectus. Mauris non eleifend enim. Pellentesque eu congue justo. In ornare dapibus nisi, sit amet feugiat neque. Vivamus mollis, lectus quis gravida viverra, risus ligula congue felis, ut laoreet sem nisi in tortor. Sed vel ligula nulla.
“Quisque mollis purus nec pulvinar rutrum. Duis faucibus sed orci vel pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec non volutpat eros, nec placerat mi. Praesent porta felis ut urna sagittis, sit amet placerat nisl porttitor.”

Nunc tempor molestie velit id dictum. Aenean ac venenatis ipsum, sit amet sodales tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque posuere sem in ipsum venenatis, at bibendum lorem aliquam.

Nullam condimentum tempus orci nec commodo. Maecenas malesuada elementum metus, non aliquam est elementum sed. Integer ac finibus ligula, id venenatis lectus. Mauris non eleifend enim. Pellentesque eu congue justo. In ornare dapibus nisi, sit amet feugiat neque. Vivamus mollis, lectus quis gravida viverra, risus ligula congue felis, ut laoreet sem nisi in tortor. Sed vel ligula nulla.

data-acc-source-start

Ensure that Modernizing your Legacy Application is the Right Decision

Our expert consultants work closely with you to understand you organization's business drivers, then conduct an in-depth business goals and that every dollar invested is directed towards the right solution

Depend on a Tailored, Phased Application Modernization Strategy

Our expert consultants work closely with you to understand you organization's business drivers, then conduct an in-depth business goals and that every dollar invested is directed towards the right solution

Streamline the Transition from Old to New

Our expert consultants work closely with you to understand you organization's business drivers, then conduct an in-depth business goals and that every dollar invested is directed towards the right solution

data-acc-source-end

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum, elit a pellentesque placerat, nisl quam blandit orci, at maximus eros nunc nec lacus. Nullam euismod consequat libero, eget suscipit ligula lacinia nec. Nunc finibus dapibus quam, eu convallis magna. Nulla finibus ut risus in sodales. Cras tristique nisi non mattis volutpat. Nullam venenatis varius nisl, dictum ornare lorem dictum rhoncus. Nulla sem nunc, lobortis et massa sed, ultrices convallis justo. Quisque laoreet nibh sit amet arcu rhoncus accumsan. Proin at elementum lacus, at maximus mi. Curabitur vulputate urna mollis lacinia auctor. Donec venenatis finibus magna id tempor. Duis at mattis odio. Aenean eu tempus justo. Donec est arcu, vulputate quis risus et, pharetra imperdiet velit.

Vivamus ut dignissim quam.

No items found.
Article carousel image 1
Article carousel image 2
Article carousel image 3
Author
Yomna Anwar
Posted on
06 Feb 2022
We’re your partner in addressing

real human needs.

Align IT Initiatives with Strategic Business Goals
Plus sign iconMinus sign icon
10X
Increase in transactions
per second

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Modernizing Legacy Apps​

Maecenas mollis sagittis ante, eleifend ultricies sapien. Nam ultricies risus et augue auctor vulputate gravida eget sem. Quisque mollis gravida magna, eu semper eros pharetra in. Sed et elit sit amet odio rutrum consectetur vel vel ante. Praesent vitae elementum lacus. Vivamus efficitur nunc tortor, cursus lobortis purus placerat ut. Maecenas ut aliquet ante, vel finibus lorem. Nulla facilisi. Donec maximus elementum pulvinar.

Impact

Sample article featured image
Pellentesque posuere sem in ipsum venenatis, at bibendum lorem aliquam. Nullam condimentum tempus orci nec commodo. Maecenas malesuada elementum metus, non aliquam est elementum sed. Integer ac finibus ligula, id venenatis lectus. Mauris non eleifend enim. Pellentesque eu congue justo. In ornare dapibus nisi, sit amet feugiat neque. Vivamus mollis, lectus quis gravida viverra, risus ligula congue felis, ut laoreet sem nisi in tortor. Sed vel ligula nulla.
“Quisque mollis purus nec pulvinar rutrum. Duis faucibus sed orci vel pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec non volutpat eros, nec placerat mi. Praesent porta felis ut urna sagittis, sit amet placerat nisl porttitor.”

Nunc tempor molestie velit id dictum. Aenean ac venenatis ipsum, sit amet sodales tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque posuere sem in ipsum venenatis, at bibendum lorem aliquam.

Nullam condimentum tempus orci nec commodo. Maecenas malesuada elementum metus, non aliquam est elementum sed. Integer ac finibus ligula, id venenatis lectus. Mauris non eleifend enim. Pellentesque eu congue justo. In ornare dapibus nisi, sit amet feugiat neque. Vivamus mollis, lectus quis gravida viverra, risus ligula congue felis, ut laoreet sem nisi in tortor. Sed vel ligula nulla.

data-acc-source-start

Ensure that Modernizing your Legacy Application is the Right Decision

Our expert consultants work closely with you to understand you organization's business drivers, then conduct an in-depth business goals and that every dollar invested is directed towards the right solution

Depend on a Tailored, Phased Application Modernization Strategy

Our expert consultants work closely with you to understand you organization's business drivers, then conduct an in-depth business goals and that every dollar invested is directed towards the right solution

Streamline the Transition from Old to New

Our expert consultants work closely with you to understand you organization's business drivers, then conduct an in-depth business goals and that every dollar invested is directed towards the right solution

data-acc-source-end

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum, elit a pellentesque placerat, nisl quam blandit orci, at maximus eros nunc nec lacus. Nullam euismod consequat libero, eget suscipit ligula lacinia nec. Nunc finibus dapibus quam, eu convallis magna. Nulla finibus ut risus in sodales. Cras tristique nisi non mattis volutpat. Nullam venenatis varius nisl, dictum ornare lorem dictum rhoncus. Nulla sem nunc, lobortis et massa sed, ultrices convallis justo. Quisque laoreet nibh sit amet arcu rhoncus accumsan. Proin at elementum lacus, at maximus mi. Curabitur vulputate urna mollis lacinia auctor. Donec venenatis finibus magna id tempor. Duis at mattis odio. Aenean eu tempus justo. Donec est arcu, vulputate quis risus et, pharetra imperdiet velit.

Vivamus ut dignissim quam.

No items found.
Article carousel image 1
Article carousel image 2
Article carousel image 3
Author
This is some text inside of a div block.
Posted on
This is some text inside of a div block.
Topics