How to Build a Progressive Web App (PWA) from Scratch?

Last Updated : 21 Jan, 2025

A Progressive Web App (PWA) is a kind of application software sent through the web, formed using standard web technologies such as HTML, CSS, and JavaScript. PWAs are planned to work on any platform that uses a standards-compliant browser, containing both desktop and portable devices.

How-to-Build-a-Progressive-Web-Apps-(PWAs)-copy-2

Steps to Build a Progressive Web App

Step 1: Setting Up Your Development Environment

Here are the primary tools you will want to set up your development environment:

A code editor (such as Visual Studio Code, Atom, or Sublime Text)
A local development server (such as Live Server extension in VS Code or Node.js with Express)
A web browser (preferably Google Chrome or Firefox for their developer tools)

Step 1.1: Install Node.js and NPM:

Download and install Node.js. This will also install NPM. Verify the installation by running:

node -v          
npm -v

Step 1.2: Initialize Your Project

Make a new project directory and initialize it with NPM:

mkdir my-pwa
cd my-pwa
npm init -y

Step 2: Building the User Interface(UI)

Start with the 'index.html' file. This will be the main entry point of your PWA. Here is an easy example:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>My PWA</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
    <p>This is a simple Progressive Web App example.</p>
    <script src="app.js"></script>
</body>
</html>

Step 3: Adding Styles

Make a basic 'styles.css' file in the CSS directory to style your app:

CSS

body {
    font-family: Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

Step 4: Use JavaScript to Show Your Information

Make a basic 'app.js' file:

JavaScript

console.log('Hello, GeeksforGeeks!');

Step 5: Create Web App Manifest

Make a 'manifest.json' file to characterize the app's metadata:

JavaScript

{
    "name": "My PWA",
    "short_name": "PWA",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#ffffff",
    "description": "A simple Progressive Web App example.",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

Step 6: Add the manifest in your HTML file:

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

Step 7: Create and Fetch Assets

The service worker is a script that your browser runs in the background, separate from a web page, to manage caching and handle fetch requests. Create 'sw.js' file:

JavaScript

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('v1').then(cache => {
            return cache.addAll([
                '/',
                '/index.html' ,
                '/styles.css' ,
                '/app.js' ,
                '/manifest.json' ,
                '/icon.png'
            ]);
        })
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    );
});

Step 7: Registering the Service Worker

In your 'app.js' file, register the service worker:

JavaScript

if ('serviceWorker' in navigator) {
    window.addEventListener('load' , () => {
        navigator.serviceWorker.register('/sw.js')
                  .then(registration => {
            console.log('Service Worker registered with scope:' , registration.scope);
        }).catch(error => {
            console.log('Service Worker registration failed:' , error);
        });
    });
}

Step 8: Testing Your PWA

To test your PWA, you need to serve it over HTTPS. You can use basic Node.js server or any static file server. For development purposes, you can use 'HTTP-server' :

npm install -g http-server                                                                                                        
 http-server -p 8080

Navigate to http://localhost:8080 in your browser to see your PWA in action. Use Chrome DevTools to simulate different network conditions and test offline feature.

Step 9: Including Additional Features

Improve your PWA by adding push notifications, background sync, or improving performance using tools like Workbox, a set of libraries to simplify service worker development.

 npm install workbox-cli --global                                                                                              
 workbox generateSW

Conclusion

Making a Progressive Web App consists of creating a responsive web design, including a web app manifest, and executing a service worker for offline potentials and caching. By proceeding these steps, you can make a PWA that gives a stable and fascinating user experience. PWAs are a capable way to present high-quality, solid applications that work over all devices and network conditions.

How to build progressive web app(PWA) in Angular 9 ?

pooja162003yadav

Improve

Article Tags :

How to Build a Progressive Web App (PWA) from Scratch?

Steps to Build a Progressive Web App

Step 1: Setting Up Your Development Environment

Step 1.1: Install Node.js and NPM:

Step 1.2: Initialize Your Project

Step 2: Building the User Interface(UI)

Step 3: Adding Styles

Step 4: Use JavaScript to Show Your Information

Step 5: Create Web App Manifest

Step 6: Add the manifest in your HTML file:

Step 7: Create and Fetch Assets

Step 7: Registering the Service Worker

Step 8: Testing Your PWA

Step 9: Including Additional Features

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?