A Beginner’s Guide for 2020

Progressive web development has picked up in recent years after Google’s initial proposal back in 2015. Progressive web apps (PWAs) utilize the best of web and mobile technologies to provide great user experience.

Why are PWAs worth the effort? A business may prefer building separate applications for Android and iOS platforms, along with a responsive website. However, the use of a progressive web app can help unite all of these approaches. In this beginner’s guide to progressive web apps, we discuss the reasons why many businesses are exploring this avenue in 2020, and then show you how to get on the bandwagon as well.

What is a progressive web app (PWA)?

A progressive web app is a web application that uses latest web capabilities to provide users with an experience comparable to a native mobile app. While web technologies are used to build a progressive web app, its functionality mimics that of a native app.

The objective of a progressive web app is to provide an app-like experience. If you choose a progressive web app, you may be giving up certain native features, but this choice significantly increases your reach. With an increasing number of features to tap into with web technologies, the gap between a native app and a progressive web app has gone down in the last few years, leading to an increase in adoption.

Characteristics of a progressive web app

Just like the concept of responsive web design, a progressive web app consist of a set of characteristics that a developer may follow. It consists of a list of technologies and features that bridge the gap between a native app and a progressive web app. In addition to being adaptive to various devices, browsers and screens, a progressive web app has the following characteristics:

• Installable: A PWA can be installed and pinned to the home screen of a device, making it accessible for later use.
• Ability to work offline: When there is no connectivity, a PWA should work (with at least a screen saying that you need connectivity).
• Secure: As the information in a PWA is exchanged through the web, you should ensure that your connection uses the HTTPS protocol and SSL.
• Support native app features such as full-screen mode and push notifications.

These characteristics should serve as guidelines when you build a progressive web app. The answer to whether your application is progressive, therefore, is more of a scale than a binary choice.

At the end of the day, a progressive web app is a web application only — therefore, it does not appear in any app store. Does this harm your application? This is always a trade-off. Popular app stores give you discoverability and an audience of new users that’s waiting there to be served new and interesting apps. On the other hand, getting onto an app store takes a lot of effort, and your creation has to be 100% in tune with the store’s requirements. Delivering a PWA yourself is overall a lot simpler, but you do have to have a pre-existing audience to whom you’re going to market the app.

Implement a progressive web app: key considerations

We have discussed what the characteristics of a progressive web app are so far. Let’s look at certain elements of a progressive web app. Before we move further in this section, we will assume that your website is responsive and works across devices and browsers.

To make your application work offline, you need to employ a service worker. In simple terms, a service registers an offline version for your web application. Next, you need a manifest for your PWA. It’s essentially a JSON file that contains metadata for your application.

You can find how to work on these steps in our guide to creating progressive web apps on WooCommerce.

Why should you develop a progressive web app?

Native mobile apps generally take a few steps to install and set up. With an increasing number of steps to install your app, less and less users will follow through. On the other hand, a user is able to use a progressive web app almost immediately. Progressive web apps help businesses immensely in reaching their audience effectively. The most significant benefits of PWAs are:

• Increase in efficiency: Since applications are loaded with web technologies, they typically take less time to load as compared to their native counterparts.
• Efficient use of bandwidth: Since PWAs are just text-based code, they are ideally smaller than the installation file of a native application. Thus, a user potentially has to spend less data to get your application running on their device.

Assess a progressive web app with lighthouse

As we have established earlier, a progressive web app is defined through a spectrum of properties. How do you assess if your web application is progressive? Lighthouse by Google is a tool to assess how progressive a website is. Lighthouse is automated and open source, which assesses your website on parameters such as performance, SEO, and accessibility. You can install the Lighthouse Chrome plugin to use it as part of Developer Tools.

To run a Lighthouse audit, open your website on Chrome and navigate to the Lighthouse tab in Chrome Developer Tools. The progressive web app section of the tool expands on various parameters of your website, and how you relate to the best practices in those fields.

PWA demo: how to create a to-do list

We have created a ReactJS-based WooCommerce progressive web app earlier on the blog. In this section, let’s create a vanillaJS progressive web app. This app will be a simple to-do list. The final UI has only a list of tasks and a button to add new tasks to the list.

HTML/CSS structure of our PWA

First, let’s create a structure for the progressive web app.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="manifest" href="manifest.json">
    <title>To Do List</title>
  </head>
...
</html>

Notice that we set a viewport just like we do in responsive web design. Further, we set the initial scaling to “1”. Next, we link to our stylesheet and manifest. We will shortly see how to create a manifest JSON file.

Next, we define the body of the page. We create a title and a button to add an item to the list. We will work with the JavaScript shortly to associate an action with a button click.

<body>
  <div class="app">
    <header>
      <h1>To Do List</h1>
    </header>
    <div class="btn-wrapper">
      <button class='btn' type="button">Add item!</button>
    </div>
    <div class="todolist">
      <div class="list-items">
          <div class="odd">
            item 1
          </div>
          <div class="even">
            item 2
          </div>
      </div>
    </div>
  </div>

  <script src="./script.js"></script>
</body>

The list of items is displayed inside a div with the class of todolist. Alternate items have odd and even class names – they will have different colors as we will set in the styles.

We use a flexbox to make our design responsive in this section. Further, we assign the height of the app container using viewport height units.

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

Next, we set the properties for the header and button.

header h1 {
  margin: 50px 0px 20px 0px;
  text-align: center;
  padding: 2rem;
  background: #4A44F2;
  font-size: 40px;
  color: #FFFF52;
}

.btn-wrapper: {
  text-align: center;
}

.btn-wrapper button {
  width: 150px;
  height: 75px;
  font-size: 20px;
  color: black;
}

Finally, we set the dimensions of the list items.

.todolist {
  background: #101010;
  width: 60%;
  margin-bottom: 100px;
}

.list-items{
  display: flex;
}

.list-items > div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  flex: 1;
  color: black;
  width: 100px;
}

.odd {
  background: #F2E635;
}
.even {
  background: #F20505;
}

Add task functionality using VanillaJS

To add JavaScript functionality to the item, we first bind a JavaScript function with the click of the button, which then adds a div element to the list of items. The class is set to odd or even based on how many items are present in the list when the button is clicked.

const buttons = document.querySelectorAll(".btn");

buttons.forEach((btn,index) => {
  btn.addEventListener("click", ()=> {
    var listItems = document.querySelectorAll(".list-items")[0];
    var item = document.createElement("div");
    item.className = (listItems.children.length % 2 === 0) ? 'odd' : 'even';
    item.innerHTML = 'item ' + String(listItems.children.length + 1);
    listItems.appendChild(item);
  });
});

Application manifest

While we have created a responsive web app with just a few progressive features, we need to add a critical element to it, the manifest. You can use this online manifest generator where you type in the metadata of your application, and upload the icon to generate the manifest JSON file. The following is the JSON file that we use.

{
  "name": "To Do List",
  "short_name": "todolist",
  "theme_color": "#cecece",
  "background_color": "#2196f3",
  "display": "minimal-ui",
  "orientation": "portrait",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

The code is available on GitHub for you to modify and run.

Final thoughts on progressive web apps

In this beginner’s guide to progressive web apps, we first looked at the emergence of progressive web apps. Then, we explored the reason behind their increasing popularity and broken them down into essential elements. Further, we looked at how to build your first PWA the simplest way possible. Your app will probably be more complex than our basic to-do list, but the principles are still the same.

If you have any questions on how PWAs work, feel free to ask in the comments.