Progressive Web Apps

#javascript #webdev #pwa #beginners

Hello folks!! In this article, we'll learn about the Progressive web app in detail, its advantages and how to create one on your own.

Let's learn how to create simple PWA using HTML, CSS and vanilla JS.

🎯 What is PWA?

PWA stands for "Progressive Web App". PWAs are simply alternatives to creating a native mobile app. It is a web application that is designed to provide an app-like experience to users on their mobile devices or desktop browsers, without the need to download and install a native app from an app store.

Using PWAs we can create a mobile app with vanilla javascript that runs inside a browser just like a normal website does but which could also consist of the features of native mobile apps so that when we run that web app on a mobile it could do things that a native app could do as well like:

Be installed onto the home screen of the mobile
Access the application when offline
Get push notifications

🎯 Advantages of PWA

Can be made using vanilla JS, HTML & CSS
Accessed via a web address and not the app store
Can be installed on the mobile home screen
Runs in the browser but with access to device features
Can be used offline
Can use web push notifications

🎯 Technical components of PWA

We can simply create a progressive web app using the below components:

The Web App Manifest
Application Shell
Service Workers

Don't worry if this sounds like bit complicated, we'll look into these components one by one.

🎯 Basic Setup

We will create a simple web app with three pages Home , About , Contact and later on convert it into PWA.

Let's build a basic setup of our app. We'll start with a simple HTML file.

In index.html file:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PWA Application</title>
    <link rel="stylesheet" href="/css/styles.css" />
    <link
      href="https://unpkg.com/@innovaccer/design-system@2.15.3/css/dist/index.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap"
      rel="stylesheet"
    />
    <meta name="theme-color" content="#FFE1C4" />
  </head>
  <body
    class="d-flex h-100 align-items-center flex-column justify-content-center"
  >
    <nav class="p-10">
      <a class="links" href="/index.html">Home</a>
      <a class="links" href="/pages/about.html">About</a>
      <a class="links" href="/pages/contact.html">Contact</a>
    </nav>
    <div>
      <div class="bg-primary p-10">
        <h2>My PWA Application</h2>
      </div>
    </div>
  </body>
</html>

Similarly, create the other two pages About & Contact

🎯 Web App Manifest

This is a single JSON file which is going to provide information about our app to the browser like:

name of the application
home screen icon for the mobile
colour theme
start URL

By providing the above information, the browser would know how to display our app properly on a mobile when it's installed onto it.

By using the Web App Manifest, PWAs can be easily installed on a user's device and provide a more native-like experience, even when accessed through a browser.

On the root of the project, create a file manifest.json

{
  "name": "My PWA App",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#FFE9D2",
  "theme_color": "#FFE1C4",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/img/icons/icon-72x72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "/img/icons/icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/img/icons/icon-128x128.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "/img/icons/icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "/img/icons/icon-152x152.png",
      "type": "image/png",
      "sizes": "152x152"
    },
    {
      "src": "/img/icons/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/img/icons/icon-384x384.png",
      "type": "image/png",
      "sizes": "384x384"
    },
    {
      "src": "/img/icons/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

name: the name of your app, this is going to be shown when you click on the application on the splash screen while the application loads in the mobile.
short_name: the name that displays underneath the icon on the home screen when someone installs your application.
start_url: the URL of the page that actually opens up when the user taps on the icon when we install it onto the home screen.
display: it specifies the developers' preferred display mode for the website. By selecting "standalone" it's not going to show the other browser things like the address bar at the top.
icons: An array of objects and each object represents a different icon. Depending on the device we are installing the app on, it's going to use a different-sized icon.

Don't forget to include this manifest.json file inside your all HTML files like this:

<link rel="manifest" href="/manifest.json" />

Now you can all those properties which you have provided inside the browser in the Application Tab:

Browser will take all the information and when we install this onto our mobile device it can make sure that our app displays properly.

You can read more about web app manifest here

🎯 Application Shell

Now let's move to the next component of PWA i.e. Application Shell.

The app shell is the minimum HTML, CSS, and javascript that is required to power the user interface of PWAs. It represents the static parts of the app that remain consistent across different views or pages. This includes components like the header, footer, navigation menu, and other UI elements that are visible on every page.

By caching the App Shell in the service worker, PWAs can load instantly and provide a smooth user experience even in offline or low connectivity scenarios.

The App Shell provides a consistent UI and navigation experience throughout the app, making it feel more like a native application.

There are more important concepts of PWA like service workers etc. which we will cover in the next article.