These days, there's an app for everything – from banking to studying and from trading to shopping. Every business has an app, and even our governments have simplified their services into app form.

But wait a minute – building and mantainig an app is cumbersome, and it's quite expensive for small businesses.

Luckily there is another option, one that helps small businesses out. This option combines the features of an app with the technology used on the web – I'm talking about Progressive Web Apps.

What is a Progressive Web App?

Progressive web applications, or PWAs, are apps built with web technologies that we properbly all know and love, like HTML, CSS, and JavaScript. But they have the feel and functionality of an actual native app.

Wait a minute! Native Apps, what does that mean?

A Native App is a software application built in a specific programming language for a specific device platform, either IOS or Android.

PWAs are also built on and enhanced with modern APIs to deliver improved capabilities along with reliability and installability on any device.

Thanks to the technology we have today, almost any site can be turned into a PWA. This means you can build a PWA quickly compared to a native app which is pretty difficult to develop.

PWAs have gained in popularity lately. Many big company's sites are PWAs – for example, look at twitter.com, one of the widely used social media platforms.

If you visit the site on your smartphone, it can be installed on your homescreen. When you open the saved site, it looks and performs just like a native app – no browser, just the installation you did on your homescreen.

There's no difference running it from an IOS or Android phone – all you need to do is login and you're ready to use it.

Other examples of companies that use PWAs inlude:

  • Starbucks
  • Pinterest
  • Uber
  • Jumia (leading eCommerce website in Africa)
  • Flipboard
  • Spotify

And many more.

These apps are actually installable on your home screen and offer a comparable experience and features to their native apps.

What Makes a Good PWA?

  1. They're responsive to any screen size
    Devices are built with defferent screen sizes, which means users will use your application on different gadgets. So it's a good idea to make sure your app can be used on any screen size and it's content is available at any viewport size.
  2. They're easily installable
    Users who install apps tend to engage with them more. By making PWAs installable it gives them the look, feel, and behavior of a regular web app.
  3. They provide a custom offline experince
    When a user is offline, keeping them in you app provides a more consistent experience than dropping back to a default offline page.
    For example travel and airline apps should be able to show trip details easily even when offline. Another example is a music app, as your users should be able to access offline playback.
  4. They're discoverable through search
    The web helps us discover sites and apps through search engines like Google. If you have a PWA, it helps generate traffic to your app. You just have to make sure that the URLS exist and that search engines can index your sites.
  5. They have app icons
    Since a PWA is an installable app, it should have an icon. This makes your app easily recognizable.
  6. They work with any browser
    PWAs are web apps first, which means that they need to work on all browsers and not just a select few. Users should be able to use them in any browser before they decide to install them.
  7. They work with any input device
    Different devices offer a variety of input methods. So a PWA should be equally usable with a mouse, keyboard, or even a touch screen. Users should be able to switch between different input devices while using your applicatin. You should make sure your application and all its features support any input methods a user may choose to use.

We have have seen what PWAs are and what makes a good Progressive Web App. But earlier we mentioned Native Apps. What are the difference between the two?

Differences Between PWAs and Native Apps

Progressive Web Apps are cheaper to develop compared to native apps

When you're developing a native app, you'll have to learn a certain programming language and then build a version of the app for each type of device, Android and iOS.

Down the road, you will also need resourses to mantain and update the app, which means lots of money and time is required.

In the case of a PWA, you can have a single codebase for the different platforms. It's also time-saving since you will not need to develop it from scratch you can configure your current web site to fit.

PWAs can be indexed by search engines

Native apps cannot be indexed by the search engines, they can just be found through the App/Play store's website. You can make your app more discoverable on the App/Play store by using App Store Optimization(ASO), but that's another story.

Unlike native apps, PWAs work like websites so they can be indexed by search engines. This helps them rank better in search results (better SEO).

PWAs are more secure

PWAs are more secure because they run on HTTPS. These are security protocols that no exchange between client and server so data doesn't get tampered with.

To secure your native apps, you need to implement various security measures, like multi-factor authentication and so on.

Installation and Download

Native apps need to be downloaded and installed from an app store. This requires some commitment from the user to do it from start to finish. Users have to pass and check multiple permissions before installing an app.

On the other hand, PWAs don't require any of those steps. From the browser you can bookmark it and add the app to your home screen with just a few taps.

Benefits of PWAs

Many companies are rushing to build PWAs not only because they are cheap to make but also because they offer greater engagement. You can easily engage with users through push notifications (those alerts that pop up when you're using an app on your phone).

Now let's look at a quick summary of the benefits of a PWA:

  • They are responsive and work with many different screen sizes.
  • They're built with common web technologies.
  • They're fast and lightweight.
  • They work offline unlike other sites.
  • They are discoverable via search engine.
  • You can use push notification to re-engage your customers.
  • They are easily installable
  • They're easier to mantain since you will be turning your site into an app

So far we have covered why you should be using a PWA. But we haven't talked about how to get started with building them. So here's what you'll need.

What You Need to Build a PWA

It does not take much to get started buildng a PWA. You just need a few things and you are good to go.

HTTPS – First you will need a server with an HTTPS connection. This makes sure your users' data is secure.

Application Shell – An application shell provides a fast first impression when your app loads. In simpler words this is what the user sees when they interact with your app for the first time.

Service workers – This is one of the key technologies behind PWAs. Service workers help support your app offline, and they perform advanced caching and run background tasks. Service workers can complete tasks even when your PWA is not running.

Service workers do many things, like:

  • sending push notification
  • Badging icons
  • running background fetch tasks

and more.

Manifest file – This is a JSON that is created with a generator. This file contains the information that tells how your PWA should appear and function. It allows you to determine the name, description, icon, colors and other features of your PWA.

Here's an example of a manifest file:

{
"short_name": "Shopping",  
"name": "Shop Quick",  
"description": "Your number one online shop",
"theme_color": "#eb5252",  
"background_color": "#000000",  
"display": "fullscreen",  
"Scope": "/",  "orientation": "portrait",  
"icons": [    
    {
        "src": "images/android/android-launchericon-48-48.png",      
        "type": "image/png",      
        "sizes": "48x48"
    },
    {      
        "src": "images/android/android-launchericon-96-96.png",
        "type": "image/png",      
        "sizes": "96x96"    
    },    
    {      
        "src": "images/android/android-launchericon-192-192.png",
        "type": "image/png",      
        "sizes": "192x192"    
    }  
   ],  
       "start_url": "index.html?utm_source=homescreen"
  }

Audit your app – This is possible using the Google Lighthouse tool. Google is a big champions of PWAs and pushes them as the future of the web. You can use Lighthouse to help you see how fast, accessible, and so on your PWA is.

Conclusion

PWAs can be a great addition to your toolkit. Done well they are fast, they work offline, and they can also perform like a normal native app. This offers your users a great experince and keeps them satisfied.

We have also learned that PWAs and Web Applications have the same functionality and are very similar in many ways.

Now that we have covered what PWAs are and their advantages, you should be able to determine whether a PWA is a good idea for your business.

If you have read this far I really appreciate it. You can connect with me on Twitter | Insta | YouTube | LinkedIn | GitHub

Do share your valuable opinion, I appreciate your honest feedback!

Enjoy Coding ❤