Complete Guide to Progressive Web Apps (PWA)

Progressive web development has gained popularity in the recent past after Google’s initial proposal in 2015. The USP of progressive web apps is that they make use of the best mobile and web technologies and provide a great user experience.

Why are PWA’s are popular? Some people prefer to have different applications for iOS and Android along with a website for their business and building separate applications for each platform requires a lot of time and investment.PWA can help to solve these issues. This blog is a complete beginner guide to Progressive Web Applications and gives a peek at its features.

Let’s dive in!

What is progressive web application?

A progressive web app is a web application that utilizes the newest web capabilities to provide users with an experience similar to a native mobile app. The purpose of a progressive web app is to provide an app-like experience.

Let’s understand it with a relatable example. Take the example of WhatsApp on your phone. When there is no network, you can still open the app, check past messages and even reply to someone. Right? But on a website, you can't even access it without the Internet.

This is what PWA promises to provide in web apps.

It enables web apps to load when there is no network, sends push notifications, and even publish it to Google PlayStore as a native-app.

Features of Progressive Web Application

Progressive web application offers a list of features that bridge the gap between a native app and a website. Here are a few:

Reliable: The progressive web apps are lightning fast when loading and can be operated with limited functions when there is no network.
Responsive: PWAs are responsive for all types of device screens.
Installable: PWAs are installable and can reside in the home screen along with other native apps.
Splash Screen: PWA adds a splash screen during the startup of the app. This makes the PWA feel more like a native app.
Notifications: PWA can send push notifications to users like a native mobile app does.
Other Features: PWA can be published to Google PlayStore and user can download it just like a normal native app.

How does PWA work without the internet?

When there is no connectivity, a PWA should work, but how? That's where service workers come into play.

A service worker is just a component of JavaScript code that works as a proxy between the browser and the network. In online mode, service workers will cache the pages once you visit them.

And when the user visits the app next time, the service workers check the cache and return the response to the user before even checking the network.

Importance of a Manifest file

Every PWA should have a manifest.json file.

The manifest file is a config JSON file that contains the information of your progressive web application and how it should behave when installed on the user’s desktop or mobile device.

It includes the icon to be displayed on the home screen, the short name of the application, the URL that should be opened when the app is launched, and the theme/background color.

Example of a manifest.json file

{
  "short_name": "SCENTIO",
  "name": "Perfume's Ecommerce App",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#33a0ff",
  "background_color": "#ffffff"
}

You can find the repo for the complete code here

Why should you develop a progressive web app?

In today's era, every business wants to reach its user by all possible means and so it wants to be present in all possible mediums. Developing an application requires a lot of engineering efforts and investment and when you need to build the same application separately tailored to each platform, it's a total nightmare for any small business.

PWA tries to solve this problem where developers can build a single application and make a behave like a native mobile app as well as a website.

Major benefits of progressive web apps are:

Less cost: Since you need a build only one application, it saves a significant amount of cost.
Less time: Single application means less engineering efforts, which in turn helps you to ship faster in production.

Hope you find this article helpful. Do share your feedback below.

This article was originally posted here.

You can reach me out here for any discussion

dipankar.dev