← Back to Tutorials Chapter 2

Getting Started with PWAs

Prerequisites

Development Environment

# Option 1: Use VS Code + Live Server
npm install -g live-server
live-server --https

# Option 2: Use Node.js http-server with HTTPS
npm install -g http-server
http-server -S -C cert.pem -o

# Option 3: Use Python
python -m http.server 8000

# For local HTTPS (recommended for PWA dev):
# Install mkcert
mkcert -install
mkcert localhost
# Then use the generated cert.pem and key.pem

Your First PWA

Let's create a minimal PWA step by step.

1. Create the HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First PWA</title>
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4f46e5">
  <link rel="apple-touch-icon" href="icon-192.png">
</head>
<body>
  <h1>Hello, PWA!</h1>
  <p>This is my first Progressive Web App.</p>
  <script src="app.js"></script>
</body>
</html>

2. Create the Web App Manifest

{
  "name": "My First PWA",
  "short_name": "PWA Demo",
  "description": "A simple demo PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4f46e5",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

3. Register a Service Worker

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

4. Create the Service Worker

// sw.js
self.addEventListener('install', (event) => {
  console.log('Service Worker installing...');
  self.skipWaiting();
});

self.addEventListener('activate', (event) => {
  console.log('Service Worker activating...');
});

self.addEventListener('fetch', (event) => {
  console.log('Fetching:', event.request.url);
});
Important: Service Workers only work over HTTPS (or localhost for development). You must serve your PWA over a secure connection.
Exercise: Create the four files above (index.html, manifest.json, app.js, sw.js) on your local machine. Serve them with a local HTTPS server, open Chrome DevTools, and verify the Service Worker is installed in Application > Service Workers.