PWA: A Beginner's Guide for Building Progressive web apps

Progressive Web Applications (PWAs) are apps built with web technologies that we probably 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 do we mean by this?

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

PWAs are built with the capabilities like push notifications and the ability to work offline. They are also built on and enhanced with modern APIs which makes it easy to deliver improved capabilities along with reliability and the ability to install them on any device.

Characteristics of PWAs

Below is what should be considered when developing a PWA:

Responsiveness

Different companies produce gadgets with different screen sizes, and as a developer it's your responsibility to ensure all the different users enjoy the product regardless the device they are using. 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 view-port size.

Installable

Research has shown that users tend to engage more with installed apps compared to visiting the official sites. Having a PWA as your product gives the users the look, feel and engagement of a normal app.

Independent Connectivity

By keeping a user engaged to your app even while they are offline, provides a more consistent experience than dropping them back to a default offline page.

A good example to illustrate this will be that of a music app, your users should be able to access offline playback and listen to saved music even without internet connection. Another good example is twitter app, a user is able to go back a read through tweets which they might have missed.

Discoverability

Since most PWAs are converted websites, it is fair to make them discoverable on the search engines, this will help generate extra traffic to your app. This also acts as an advantage over native apps which can't be discovered over the search engines.

Appearance

The appearance of the app should feel and look like that of a normal app, so be sure to include things like an app icon, this will help make it easily recognizable also things like splash screen will add the touch and feel of an app.

Cross Platform

PWAs are developed as web app first, which means that they need to work on all browsers/systems and not just a selected few. Users should be able to use them in any browser before they decide to install them.

So folks! there you have it, the general info about PWAs. Along the way you might have noticed occasionally a comparison between PWAs and Native App and this might have confused you a bit, Well let's clear the airwaves by checking the comparison between the two to get a clear understanding.

Benefits of PWAs

A lot of organizations both private and public are switching to PWAs not only because they are cheap to develop but also because they offer greater engagement.

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 can run on multiple platforms and any device with a modern web browser.
• They function just like normal Native Apps.
• The updates are independent, you don't need to visit the Play Store for an update.
• They're built with common web technologies.
• They're fast and lightweight.
• They work offline unlike other sites.
• They are discoverable via search engines.
• They are easily installable.
• Low maintenance cost.

Requirements to Get Started with PWA Development

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

Tools

The best known technology stack to develop PWAs is AngularJS. Speaking of Angular, here is a resourceful guide on how you can convert your already existing Angular app into PWA. Others stacks include ReactJS(Next.js) and Polymer.

HTTPS

You will need a server with a HTTPS connection. This makes sure your user's data is secure. It adds an extra layer of security to you site.

Application Shell

It provides a good 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. They help support your app work offline, and they perform advanced caching and run background tasks. Service workers can complete tasks even when your PWA is not running.Some other functions associated with Service Worker include:

• Sending push notification
• Badging icons
• Running background fetch tasks etc...

Manifest file

This is a JSON file that is created with a Web App Manifest 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:

{
  "name": "My awesome PWA app",
  "short_name": "PWA App",
  "icons": [
    {
      "src": "/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#FFFFFF",
  "background_color": "#FFFFFF",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait"
}

In the Next Article, we will show how to practice PWA in the Next.js Web App, put a comment if you interested & share