Progressive Web Apps (PWA): A Comprehensive Guide
Tags: javascript, webdev, react, beginners
Published: 2024-07-06 06:14:23

Did you know that your web apps built with HTML, CSS, JavaScript, or any front-end framework can become installable, and work offline providing an enhanced user experience?

This article will introduce progressive web apps to beginners, and anyone looking to improve their front-end development skills. In this article, you will learn;

- [Everything you need to start building Progressive Web Apps](#intro)

-  [How to create installable web apps.](#installable)

- [How to implement offline functionality in Progressive Web Apps.](#offline)

- [How to analyze web performance, accessibility, SEO, etc.](#lighthouse)

- [Tips for improving app performance, load time, and user experience.](#tips)

**Prerequisite**: A basic knowledge of HTML and CSS is required for a full understanding of this article.

<h2 id="intro">What is a Progressive Web App?</h2>
A Progressive Web App (PWA) is a type of web application that combines the best features of traditional websites and native mobile apps. PWAs are designed to be fast, reliable, and engaging, providing a native app-like experience on the web.
 
## Why Progressive Web Apps?
 The benefits of PWA include but are not limited to:

- **Improved Performance:** PWAs load faster and perform better, which can enhance user experience and engagement.

- **Offline Functionality:** With service workers, PWAs can cache web page content and function offline or in low-network conditions.

- **Increased Engagement:** Push notifications, and home screen installation, without the hassle of going to the app store increase user engagement and experience.

- **SEO Friendly:** PWAs are discoverable by search engines, improving visibility and reach.

- **Safe:** They are served via HTTPS to prevent snooping and ensure content hasn't been tampered with.

## Progressive Web App Examples
Many big companies such as [YouTube](https://www.youtube.com/), [Facebook](https://web.facebook.com/?_rdc=1&_rdr), and even [Dev.to](https://dev.to/) made their web apps progressive (installable). If viewing from a mobile browser, click on the three dots at the top right corner, then click Install or add to the home screen. From a desktop, click on the install icon at the top right corner of your browser as in the image below.


![screenshot of Youtube landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sy3i5nnw8knahnu0mv2v.png)

<h2 id="installable">How to Make Your Web Apps Installable</h2>
Whether you are building with Plain HTML, React, Vue, or any front-end framework, the steps of making your progressive web app installable are the same.
This PWA tutorial will take you through the steps.

**Step 1**: Set up your project.

  HTML
```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>PWA tutorial</title>
</head>
<body>
    <section class="main">
        <h1>Recipe App</h1>
        <p>The best culinary treats</p>
        <button>Explore</button>
    </section>
</body>
</html>
```

CSS

```css
body{
    background-color: aliceblue;
}
.main{
    margin: 0 auto;
    background-color: cadetblue;
    text-align: center;
    padding: 3rem;
}

h1{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #fff;
    font-size: 3rem;
}
button{
    padding: 1rem 2rem;
    color: darkcyan;
    border:#fff;
    background-color: #fff;
}
p{
    color: #fff;
    font-size: 1.6rem
}

```
Output

![output of pwa code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qo1hnw3ntlc2lg2ni3o9.png)

**Step 2**: Create a "Manifest.json" file. This step makes the app installable. The following details will make the splash screen of your application. 

```json
{
    "name": "Recipe Application",
    "short_name": "My Recipes",
    "description": "A recipe application for creating awesome recipes",
    "start_url": "/",
    "theme_color": "#000000",
    "background_color": "#ffffff",
    "display": "standalone",
    "icons": [
        {   "src": "./icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }]
  }
```

Step 3- Link this manifest file to your HTML.

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

Voila! your app is installable 

![output of pwa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7sk14ft1k3691yvl5xn.png)

**Splash screen** 
This is the first screen that is displayed when the app is visited.


![splash screen of pwa app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpzoc9u4t45xzqu20tbi.png)
 


<h2 id="offline">Implementing Offline Feature in Progressive Web Apps</h2>

Offline capabilities in Progressive Web Apps enhance user experience. It ensures users enjoy the app with or without an internet connection. This is possible through service workers, background sync, [Caching](https://www.cloudflare.com/learning/cdn/what-is-caching/), etc.

A [service worker (SW)](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) intercepts network requests and gives responses from the cache when internet connection is not available.
While making your PWA offline, you can code the service worker manually or utilize tools like Workbox, [PWA Builder Online](https://www.pwabuilder.com/), PWA Studio, etc. 
For this tutorial, [Workbox](https://developer.chrome.com/docs/workbox), owned by Google is the library of choice because it offers comprehensive features like precaching, background sync, push notifications, ease of use, etc. 

### How to Integrate Workbox for Offline Functionality

**Step 1:** Install Workbox on the command line 
Using "npx" ensures the latest version is always installed. If you are building with React.js, run "npm run build" before this step to generate a build folder (contains static files ready for deployment). 

> npx workbox wizard


**Step 2:** Answer questions prompts from the Workbox wizard as in the image below.
For React.js projects, the **build** folder should serve as the root of the application.

![workbox for pwa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbpkauubhektszqikyg5.png)

**Step 3:** Generate the Service Worker file

> npx workbox generateSW workbox-config.js
![service worker for pwa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ib6mqyii8pmr3dho8fgr.png)

**Step 4:** Paste this script code into your index.js file to register the SW. Ensure it is linked to your HTML document.

```js
if('serviceWorker' in navigator){
    window.addEventListener('load', () =>{
      navigator.serviceWorker.register('/sw.js')
    })
  }
```
**Step 5:** Deploy 
Service workers require https:// to ensure security. Deploy the project to [Netlify](https://app.netlify.com/), or [Vercel](https://vercel.com/). View the web app on the browser.

![pwa deployment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcabj1iqqz2sjbdd375q.png)

<h2 id="lighthouse">How to Analyze Web App Performance, Accessibility, and SEO </h2>
Chrome [Lighthouse](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) is a powerful tool for this analysis. Analyzing web performance, accessibility, and SEO is crucial for building high-quality web apps that provide excellent user experience.
To perform this analysis:

-  Open Chrome dev tools by right-clicking on your webpage.

- Click on Inspect, then navigate to Lighthouse tab

- On the tab click on mobile or desktop based on preference

- Generate Report

![screenshot of lighthouse report pwa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nwwht4raieck2rxfxad.png)

- Check Lighthouse Score


 <h2 id="tips">Best Practices for PWA Performance Optimization</h2>

- Preload URLs and fonts that can slow the loading process of PWA.

- Implement Lazy Loading to defer the loading of assets like images until they are needed.

- Ensure clean code architecture

- Remove unwanted code and spaces to improve the overall performance of PWA.


## In Summary,
PWAs are web apps that give a native-app-like experience. From offline functionality to installation prompts. From background sync to push notifications, the list is endless.
Building a progressive web app is an interesting yet challenging feat, but with constant practice and attention to detail, the best user satisfaction is yet to be delivered.
 
Thank you for reading. Like and follow for more web development and tech-related articles. <a href="https://buymeacoffee.com/udoka_kasie" target="_blank"> Buy Me A Coffee to Support my Work</a>