DEV Community

Cover image for Progressive Web Apps (PWAs)
Suhas Palani
Suhas Palani

Posted on

Progressive Web Apps (PWAs)

Building Progressive Web Apps (PWAs)

In this post, we will explore Progressive Web Apps (PWAs), a modern approach to building web applications that offer a native app-like experience. I'll cover the basics of PWAs, their advantages, and the steps to create a PWA from scratch.

1. Introduction to Progressive Web Apps (PWAs)

What is a Progressive Web App (PWA)?

A Progressive Web App is a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. PWAs are intended to work on any platform that uses a standards-compliant browser.

Key Features of PWAs:

  • Responsive: Works on any device and screen size.
  • Offline Capability: Functions offline or with poor network conditions using service workers.
  • App-Like Experience: Provides an app-like user experience with features like home screen installation.
  • Secure: Served over HTTPS to prevent snooping and ensure content integrity.
  • Re-engageable: Enables push notifications to keep users engaged.

2. Advantages of PWAs

Why Build a PWA?

  • Improved Performance: Faster loading times and smoother interactions.
  • Enhanced User Engagement: Push notifications and home screen access.
  • Lower Development Costs: Single codebase for both web and mobile experiences.
  • SEO Benefits: PWAs are discoverable by search engines.

3. Setting Up a PWA

Prerequisites:

  • Basic knowledge of HTML, CSS, and JavaScript.
  • Node.js and npm/yarn installed.

Creating a Simple PWA:

  1. Project Setup:

    mkdir my-pwa
    cd my-pwa
    npm init -y
    npm install express
    
  2. Project Structure:

    my-pwa/
    ├── public/
    │   ├── index.html
    │   ├── styles.css
    │   └── app.js
    ├── server.js
    ├── package.json
    └── manifest.json
    

4. Creating the Manifest File

manifest.json:

The manifest file provides metadata about the PWA and is required for installing the app on the home screen.

// manifest.json
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

5. Creating the HTML, CSS, and JavaScript Files

index.html:

<!DOCTYPE html>
<html lang="en">
<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">
  <link rel="manifest" href="/manifest.json">
</head>
<body>
  <h1>Welcome to My Progressive Web App!</h1>
  <script src="/app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

styles.css:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f0f0;
  color: #333;
}
Enter fullscreen mode Exit fullscreen mode

app.js:

// app.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('ServiceWorker registered: ', registration);
      })
      .catch(error => {
        console.log('ServiceWorker registration failed: ', error);
      });
  });
}
Enter fullscreen mode Exit fullscreen mode

6. Setting Up the Service Worker

A service worker is a script that the browser runs in the background, separate from the web page. It intercepts network requests and can cache resources to improve performance and offline capabilities.

service-worker.js:

// service-worker.js
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/styles.css',
  '/app.js',
  '/manifest.json',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

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

7. Setting Up the Server

server.js:

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});
Enter fullscreen mode Exit fullscreen mode

Running the Server:

node server.js
Enter fullscreen mode Exit fullscreen mode

8. Testing Your PWA

  1. Open the App:

    • Navigate to http://localhost:3000 in your browser.
  2. Service Worker Registration:

    • Open the Developer Tools (F12 or right-click and select "Inspect").
    • Go to the "Application" tab.
    • Under "Service Workers", you should see your service worker registered.
  3. Add to Home Screen:

    • On a mobile device, open your PWA in the browser.
    • You should see a prompt to "Add to Home Screen".

9. Best Practices for PWAs

Best Practices:

  • Use HTTPS: PWAs require secure contexts.
  • Optimize Images: Use responsive images and lazy loading.
  • Minimize Network Requests: Cache resources effectively.
  • Ensure Offline Functionality: Provide meaningful offline experiences.

10. Conclusion

Summarize the key points covered:

  • Introduction to PWAs and their benefits.
  • Setting up a simple PWA with manifest, service worker, and caching.
  • Best practices for building robust PWAs.

11. Additional Resources

  • PWA Documentation
  • Tutorials and guides on advanced PWA topics.
  • Community forums and support.

Top comments (0)