Skip links
Facebook-square Twitter Github
Mohamed Ashraf

Progressive Web Apps in 2025: Building the Next Generation of Web Experiences

Author
Published on:
Published in: Mobile & Apps

Introduction

The web has undergone a remarkable transformation since its inception. What began as a simple system for sharing documents has evolved into a powerful platform capable of delivering rich, interactive experiences across devices. At the forefront of this evolution are Progressive Web Apps (PWAs), which represent a fundamental shift in how we conceptualize, build, and deliver web applications.

Progressive Web Apps combine the best aspects of web and native applications. They leverage modern web capabilities to deliver app-like experiences that are fast, reliable, and engaging—regardless of network conditions or device capabilities. Unlike traditional web applications, PWAs can work offline, send push notifications, access device hardware, and even be installed on a user’s home screen, blurring the line between web and native experiences.

As we move through 2025, PWAs have matured significantly from their introduction by Google in 2015. The underlying technologies have evolved, browser support has expanded, and development practices have been refined. Major platforms and businesses across industries have embraced PWAs, recognizing their potential to reach users more effectively while reducing development and maintenance costs compared to maintaining separate web and native applications.

The appeal of PWAs lies in their progressive enhancement approach—they work for every user, regardless of browser choice, using modern features when available but gracefully adapting when not. This inclusivity, combined with their performance benefits and engagement capabilities, has positioned PWAs as a strategic technology choice for organizations looking to optimize their digital presence.

In this comprehensive guide, we’ll explore the current state of Progressive Web Apps in 2025, examining the core technologies, development best practices, performance optimization techniques, and real-world implementation strategies. Whether you’re a web developer looking to enhance your skills, a business leader evaluating technology options, or simply curious about the future of web applications, this article will provide valuable insights into how PWAs are reshaping the digital landscape.

Core Technologies and Foundations

Progressive Web Apps are built on a foundation of modern web technologies that enable their distinctive capabilities. Understanding these core technologies is essential for developing effective PWAs.

Service Workers: The Heart of PWAs

Service workers are JavaScript files that run separately from the main browser thread, acting as programmable network proxies that intercept network requests and cache resources. They form the backbone of PWAs, enabling critical features like offline functionality, background synchronization, and push notifications.

In 2025, service worker capabilities have expanded significantly, with improved lifecycle management and more sophisticated caching strategies. The Service Worker API has matured to include:

  • Enhanced cache management with smarter eviction policies
  • Improved background sync capabilities with retry mechanisms
  • Better integration with other browser APIs
  • More predictable update mechanisms

Here’s a modern service worker implementation that demonstrates current best practices:

// service-worker.js// Use the latest cache version to ensure proper updatesconst CACHE_VERSION = 'v2025-05-18';
const CACHE_NAME = `pwa-cache-${CACHE_VERSION}`;

// Resources to pre-cache on installation
const PRECACHE_RESOURCES = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/app.js',
  '/scripts/vendor.js',
  '/assets/icons/icon-192x192.png',
  '/assets/icons/icon-512x512.png',
  '/offline.html'
];

// Install event: precache critical resources
self.addEventListener('install', event => {
  event.waitUntil(
    (async () => {
      const cache = await caches.open(CACHE_NAME);
      console.log('Caching app shell and critical resources');
      await cache.addAll(PRECACHE_RESOURCES);
      await self.skipWaiting();
    })()
  );
});

// Activate event: clean up old caches
self.addEventListener('activate', event => {
  event.waitUntil(
    (async () => {
      const cacheNames = await caches.keys();
      await Promise.all(
        cacheNames
          .filter(name => name.startsWith('pwa-cache-') && name !== CACHE_NAME)
          .map(name => {
            console.log(`Deleting old cache: ${name}`);
            return caches.delete(name);
          })
      );
      await self.clients.claim();
    })()
  );
});

// Stale-while-revalidate strategy for most resources
async function staleWhileRevalidate(request) {
  const cache = await caches.open(CACHE_NAME);
  
  // Try to get the resource from the cache
  const cachedResponse = await cache.match(request);
  
  // Fetch the resource from the network in the background
  const fetchPromise = fetch(request)
    .then(networkResponse => {
      // Don't cache responses that aren't successful
      if (networkResponse && networkResponse.status === 200) {
        // Clone the response before putting it in the cache
        cache.put(request, networkResponse.clone());
      }
      return networkResponse;
    })
    .catch(error => {
      console.error('Fetch failed:', error);
      // If the network is unavailable, we'll still return the cached version
    });
  
  // Return the cached response immediately, or wait for the network response
  return cachedResponse || fetchPromise;
}

// Network-first strategy for API requests
async function networkFirst(request) {
  try {
    // Try to get the resource from the network first
    const networkResponse = await fetch(request);
    
    // If successful, cache it and return the network response
    if (networkResponse && networkResponse.status === 200) {
      const cache = await caches.open(CACHE_NAME);
      cache.put(request, networkResponse.clone());
      return networkResponse;
    }
  } catch (error) {
    console.log('Network request failed, falling back to cache', error);
  }
  
  // If network fails, try to get from cache
  const cache = await caches.open(CACHE_NAME);
  const cachedResponse = await cache.match(request);
  
  // If nothing in cache, return the offline fallback
  if (cachedResponse) {
    return cachedResponse;
  }
  
  // If it's an HTML request, return the offline page
  if (request.headers.get('Accept').includes('text/html')) {
    return cache.match('/offline.html');
  }
  
  // Otherwise, just return a 404-like response
  return new Response('Not found', { status: 404 });
}

// Fetch event: intercept network requests
self.addEventListener('fetch', event => {
  const request = event.request;
  
  // Skip cross-origin requests
  if (!request.url.startsWith(self.location.origin)) {
    return;
  }
  
  // Apply different strategies based on request type
  if (request.url.includes('/api/')) {
    // Use network-first for API requests
    event.respondWith(networkFirst(request));
  } else if (request.mode === 'navigate') {
    // Use network-first for navigation requests
    event.respondWith(networkFirst(request));
  } else {
    // Use stale-while-revalidate for all other requests
    event.respondWith(staleWhileRevalidate(request));
  }
});

// Background sync for offline form submissions
self.addEventListener('sync', event => {
  if (event.tag === 'submit-form') {
    event.waitUntil(syncForms());
  }
});

async function syncForms() {
  try {
    const db = await openDatabase();
    const forms = await db.getAll('offline-forms');
    
    for (const form of forms) {
      try {
        const response = await fetch('/api/submit', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(form.data)
        });
        
        if (response.ok) {
          await db.delete('offline-forms', form.id);
          console.log(`Successfully synced form ${form.id}`);
        }
      } catch (error) {
        console.error(`Failed to sync form ${form.id}:`, error);
        // Will retry on next sync event
      }
    }
  } catch (error) {
    console.error('Error during form sync:', error);
  }
}

// Helper function to open IndexedDB
function openDatabase() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('pwa-offline-db', 1);
    
    request.onupgradeneeded = event => {
      const db = event.target.result;
      db.createObjectStore('offline-forms', { keyPath: 'id', autoIncrement: true });
    };
    
    request.onsuccess = event => resolve({
      getAll: (storeName) => {
        return new Promise((resolve, reject) => {
          const transaction = event.target.result.transaction(storeName, 'readonly');
          const store = transaction.objectStore(storeName);
          const request = store.getAll();
          
          request.onsuccess = e => resolve(e.target.result);
          request.onerror = e => reject(e.target.error);
        });
      },
      delete: (storeName, id) => {
        return new Promise((resolve, reject) => {
          const transaction = event.target.result.transaction(storeName, 'readwrite');
          const store = transaction.objectStore(storeName);
          const request = store.delete(id);
          
          request.onsuccess = () => resolve();
          request.onerror = e => reject(e.target.error);
        });
      }
    });
    
    request.onerror = event => reject(event.target.error);
  });
}

// Push notification event handler
self.addEventListener('push', event => {
  if (!event.data) return;
  
  try {
    const data = event.data.json();
    
    const options = {
      body: data.body,
      icon: '/assets/icons/icon-192x192.png',
      badge: '/assets/icons/badge-72x72.png',
      vibrate: [100, 50, 100],
      data: {
        url: data.url || '/'
      },
      actions: data.actions || []
    };
    
    event.waitUntil(
      self.registration.showNotification(data.title, options)
    );
  } catch (error) {
    console.error('Error showing notification:', error);
  }
});

// Notification click event handler
self.addEventListener('notificationclick', event => {
  event.notification.close();
  
  event.waitUntil(
    (async () => {
      const url = event.notification.data.url;
      const windowClients = await self.clients.matchAll({ type: 'window' });
      
      // Check if there is already a window/tab open with the target URL
      for (const client of windowClients) {
        if (client.url === url && 'focus' in client) {
          return client.focus();
        }
      }
      
      // If no window/tab is open, open one
      if (self.clients.openWindow) {
        return self.clients.openWindow(url);
      }
    })()
  );
});

This service worker implementation demonstrates several modern PWA patterns:

  • Versioned caching to ensure proper updates
  • Different caching strategies for different types of requests
  • Background synchronization for offline form submissions
  • Push notification handling with rich notification options
  • Integration with IndexedDB for offline data storage

Web App Manifest

The Web App Manifest is a JSON file that provides information about a web application, controlling how the app appears when installed on a device. It defines the app’s name, icons, theme colors, and behavior when launched.

In 2025, the Web App Manifest specification has expanded to include more capabilities:

{
  "name": "Modern PWA Example",
  "short_name": "PWA 2025",
  "description": "A cutting-edge Progressive Web App demonstrating 2025 capabilities",
  "start_url": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#2196f3",
  "background_color": "#ffffff",
  "id": "com.example.modernpwa",
  "scope": "/",
  "icons": [
    {
      "src": "/assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "screenshots": [
    {
      "src": "/assets/screenshots/home-1280x720.webp",
      "sizes": "1280x720",
      "type": "image/webp",
      "platform": "wide",
      "label": "Homescreen of Modern PWA Example"
    },
    {
      "src": "/assets/screenshots/home-750x1334.webp",
      "sizes": "750x1334",
      "type": "image/webp",
      "platform": "narrow",
      "label": "Homescreen of Modern PWA Example"
    }
  ],
  "shortcuts": [
    {
      "name": "Create New Item",
      "short_name": "Create",
      "description": "Create a new item",
      "url": "/create",
      "icons": [{ "src": "/assets/icons/create-192x192.png", "sizes": "192x192" }]
    },
    {
      "name": "View Dashboard",
      "short_name": "Dashboard",
      "description": "Go to the dashboard",
      "url": "/dashboard",
      "icons": [{ "src": "/assets/icons/dashboard-192x192.png", "sizes": "192x192" }]
    }
  ],
  "related_applications": [
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=com.example.modernpwa",
      "id": "com.example.modernpwa"
    },
    {
      "platform": "itunes",
      "url": "https://apps.apple.com/app/modern-pwa-example/id123456789"
    }
  ],
  "prefer_related_applications": false,
  "handle_links": "preferred",
  "launch_handler": {
    "client_mode": ["navigate-existing", "auto"]
  },
  "edge_side_panel": {
    "preferred_width": 400
  },
  "file_handlers": [
    {
      "action": "/open-file",
      "accept": {
        "text/csv": [".csv"]
      }
    }
  ],
  "share_target": {
    "action": "/share-target",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url",
      "files": [{
        "name": "media",
        "accept": ["image/*", "video/*"]
      }]
    }
  },
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/protocol?value=%s"
    }
  ],
  "categories": ["productivity", "utilities"],
  "lang": "en-US",
  "dir": "ltr",
  "iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7",
  "display_override": ["window-controls-overlay", "standalone"],
  "theme_colors": [
    { "color": "#2196f3", "media": "(prefers-color-scheme: light)" },
    { "color": "#0d47a1", "media": "(prefers-color-scheme: dark)" }
  ]
}

This manifest demonstrates several advanced features now available in 2025:

  • Shortcuts: Quick access to specific app functionality from the home screen icon
  • Screenshots: Images displayed in app stores and install prompts
  • File handlers: Allowing the PWA to open specific file types
  • Share target: Enabling the PWA to receive shared content from other apps
  • Protocol handlers: Registering the PWA to handle custom URL protocols
  • Launch handler: Controlling how the app launches when links are clicked
  • Theme colors: Supporting different theme colors based on user preferences

HTTPS: The Secure Foundation

HTTPS remains a fundamental requirement for PWAs, providing the secure context necessary for using service workers and many modern web APIs. In 2025, HTTPS has become even more streamlined with:

  • Automated certificate management through services like Let’s Encrypt
  • HTTP/3 and QUIC protocols for improved performance
  • Enhanced security features like Certificate Transparency and HSTS preloading
  • Better developer tools for diagnosing and resolving HTTPS issues

Most hosting providers now offer HTTPS by default, removing what was once a significant barrier to PWA adoption.

Advanced Web Capabilities

Beyond the core PWA technologies, modern Progressive Web Apps leverage a suite of advanced web APIs that provide native-like capabilities:

  • Web Share API: Allows PWAs to use the device’s native sharing capabilities
  • Contact Picker API: Provides access to the user’s contacts
  • File System Access API: Enables direct interaction with the device’s file system
  • Web Bluetooth: Allows communication with Bluetooth devices
  • WebAuthn: Enables passwordless authentication using biometrics or security keys
  • Web NFC: Provides access to Near Field Communication functionality
  • Web USB: Allows communication with USB devices
  • Web Serial: Enables communication with serial devices
  • Badging API: Allows setting notification badges on the app icon
  • Periodic Background Sync: Enables periodic updates even when the app isn’t open
  • Content Indexing API: Makes offline content discoverable
  • Idle Detection: Detects when the user is idle
  • WebTransport: Provides low-latency, bidirectional communication

Here’s an example of using some of these advanced APIs in a modern PWA:

// Example of using advanced web capabilities in a PWA

// File System Access API
async function saveToFileSystem(content, suggestedName) {
  try {
    // Show the file picker
    const handle = await window.showSaveFilePicker({
      suggestedName,
      types: [{
        description: 'Text file',
        accept: { 'text/plain': ['.txt'] }
      }]
    });
    
    // Create a writable stream
    const writable = await handle.createWritable();
    
    // Write the content
    await writable.write(content);
    
    // Close the stream
    await writable.close();
    
    console.log('File saved successfully');
    return true;
  } catch (error) {
    console.error('Error saving file:', error);
    return false;
  }
}

// Web Share API
async function shareContent(title, text, url) {
  if (navigator.share) {
    try {
      await navigator.share({
        title,
        text,
        url
      });
      console.log('Content shared successfully');
      return true;
    } catch (error) {
      console.error('Error sharing content:', error);
      return false;
    }
  } else {
    console.log('Web Share API not supported');
    return false;
  }
}

// Badging API
async function updateBadge(count) {
  if ('setAppBadge' in navigator) {
    try {
      if (count > 0) {
        await navigator.setAppBadge(count);
      } else {
        await navigator.clearAppBadge();
      }
      console.log('Badge updated successfully');
      return true;
    } catch (error) {
      console.error('Error updating badge:', error);
      return false;
    }
  } else {
    console.log('Badging API not supported');
    return false;
  }
}

// Web Bluetooth API
async function connectToBluetoothDevice() {
  if ('bluetooth' in navigator) {
    try {
      const device = await navigator.bluetooth.requestDevice({
        filters: [{ services: ['heart_rate'] }]
      });
      
      console.log('Connecting to device:', device.name);
      const server = await device.gatt.connect();
      
      const service = await server.getPrimaryService('heart_rate');
      const characteristic = await service.getCharacteristic('heart_rate_measurement');
      
      await characteristic.startNotifications();
      characteristic.addEventListener('characteristicvaluechanged', event => {
        const value = event.target.value;
        const heartRate = value.getUint8(1);
        console.log('Heart rate:', heartRate);
      });
      
      console.log('Connected to heart rate monitor');
      return true;
    } catch (error) {
      console.error('Error connecting to Bluetooth device:', error);
      return false;
    }
  } else {
    console.log('Web Bluetooth API not supported');
    return false;
  }
}

// Periodic Background Sync
async function registerPeriodicSync() {
  if ('periodicSync' in navigator.serviceWorker) {
    try {
      // Check if permission is already granted
      const status = await navigator.permissions.query({
        name: 'periodic-background-sync'
      });
      
      if (status.state !== 'granted') {
        console.log('Periodic background sync permission not granted');
        return false;
      }
      
      // Register for periodic sync
      const registration = await navigator.serviceWorker.ready;
      await registration.periodicSync.register('content-sync', {
        minInterval: 24 * 60 * 60 * 1000 // Once per day
      });
      
      console.log('Periodic background sync registered');
      return true;
    } catch (error) {
      console.error('Error registering periodic background sync:', error);
      return false;
    }
  } else {
    console.log('Periodic Background Sync API not supported');
    return false;
  }
}

// WebAuthn for passwordless authentication
async function registerWebAuthn(username) {
  if (!window.PublicKeyCredential) {
    console.log('WebAuthn not supported');
    return false;
  }
  
  try {
    // Get challenge from server (simplified for example)
    const response = await fetch('/api/auth/webauthn/register/challenge', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username })
    });
    
    const options = await response.json();
    
    // Convert base64 strings to ArrayBuffers
    options.challenge = Uint8Array.from(
      atob(options.challenge), c => c.charCodeAt(0)
    );
    
    options.user.id = Uint8Array.from(
      atob(options.user.id), c => c.charCodeAt(0)
    );
    
    // Create credentials
    const credential = await navigator.credentials.create({
      publicKey: options
    });
    
    // Prepare credential data for sending to server
    const credentialData = {
      id: credential.id,
      rawId: btoa(String.fromCharCode(...new Uint8Array(credential.rawId))),
      response: {
        clientDataJSON: btoa(String.fromCharCode(
          ...new Uint8Array(credential.response.clientDataJSON)
        )),
        attestationObject: btoa(String.fromCharCode(
          ...new Uint8Array(credential.response.attestationObject)
        ))
      },
      type: credential.type
    };
    
    // Send credential to server
    const verificationResponse = await fetch('/api/auth/webauthn/register/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(credentialData)
    });
    
    const verification = await verificationResponse.json();
    
    if (verification.success) {
      console.log('WebAuthn registration successful');
      return true;
    } else {
      console.error('WebAuthn registration failed:', verification.message);
      return false;
    }
  } catch (error) {
    console.error('Error during WebAuthn registration:', error);
    return false;
  }
}

These examples demonstrate how modern PWAs can leverage advanced web APIs to provide experiences that were once only possible with native applications.

Building High-Performance PWAs

Performance is a critical aspect of Progressive Web Apps. Users expect fast, responsive experiences, and performance directly impacts key metrics like conversion rates, user engagement, and retention.

Core Web Vitals and Performance Metrics

In 2025, Core Web Vitals remain the industry standard for measuring web performance, though they have evolved to include additional metrics:

  • Largest Contentful Paint (LCP): Measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID): Measures interactivity. For a good user experience, pages should have a FID of 100 milliseconds or less.
  • Cumulative Layout Shift (CLS): Measures visual stability. Pages should maintain a CLS of 0.1 or less.
  • Interaction to Next Paint (INP): Measures responsiveness to user interactions throughout the page lifecycle. Good experiences have an INP of 200 milliseconds or less.
  • Time to First Byte (TTFB): Measures server response time. A good TTFB is 800 milliseconds or less.

Modern PWAs employ several strategies to optimize these metrics:

JavaScript Optimization

JavaScript optimization is crucial for PWA performance. Modern techniques include:

  • Code splitting: Breaking JavaScript bundles into smaller chunks that can be loaded on demand
  • Tree shaking: Removing unused code from bundles
  • Module/nomodule pattern: Serving modern JavaScript to modern browsers and transpiled code to older browsers
  • Web Workers: Moving heavy computation off the main thread
  • Optimizing third-party scripts: Loading non-critical scripts asynchronously or on demand

Here’s an example of modern JavaScript optimization techniques:

// webpack.config.js (simplified example)
module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[/]node_modules[/]/,
          name(module) {
            // Get the name of the npm package
            const packageName = module.context.match(
              /[/]node_modules[/](.+?)(?:[/]|$)/
            )[1];
            
            // npm package names are URL-safe, but some servers don't like @ symbols
            return `npm.${packageName.replace('@', '')}`;
          }
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                useBuiltIns: 'usage',
                corejs: 3,
                modules: false
              }]
            ],
            plugins: [
              '@babel/plugin-syntax-dynamic-import'
            ]
          }
        }
      }
    ]
  }
};

// Example of code splitting in a React application
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Loading from './components/Loading';

// Lazy-loaded components
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    
      }>
        
          
          
          
          
        
      
    
  );
}

// Example of using a Web Worker for heavy computation
// main.js
if ('Worker' in window) {
  const worker = new Worker('/workers/image-processor.js', { type: 'module' });
  
  document.getElementById('process-image').addEventListener('click', async () => {
    const imageData = await getImageData(); // Function to get image data
    
    worker.postMessage({
      type: 'process',
      imageData
    });
  });
  
  worker.addEventListener('message', event => {
    if (event.data.type === 'result') {
      displayProcessedImage(event.data.processedImageData);
    }
  });
}

// image-processor.js (Web Worker)
import { applyFilters } from './image-filters.js';

self.addEventListener('message', async event => {
  if (event.data.type === 'process') {
    const { imageData } = event.data;
    
    // Perform CPU-intensive image processing
    const processedImageData = await applyFilters(imageData, [
      { type: 'blur', radius: 5 },
      { type: 'brightness', value: 1.2 },
      { type: 'contrast', value: 1.1 }
    ]);
    
    self.postMessage({
      type: 'result',
      processedImageData
    });
  }
});

Asset Optimization

Optimizing assets is essential for fast loading times. Modern PWAs use several techniques:

  • Responsive images: Using srcset and sizes attributes to serve appropriately sized images
  • Next-gen image formats: Using WebP, AVIF, and JPEG XL for better compression
  • Image CDNs: Using services that automatically optimize and deliver images
  • Font optimization: Using font-display, variable fonts, and font subsetting
  • CSS optimization: Minimizing CSS, using CSS containment, and employing critical CSS techniques

Here’s an example of modern asset optimization:

<!-- Responsive images with next-gen formats -->
<picture>
  <source
    srcset="/images/hero-400.avif 400w, /images/hero-800.avif 800w, /images/hero-1200.avif 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
    type="image/avif"
  >
  <source
    srcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w, /images/hero-1200.webp 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
    type="image/webp"
  >
  <img
    src="/images/hero-800.jpg"
    srcset="/images/hero-400.jpg 400w, /images/hero-800.jpg 800w, /images/hero-1200.jpg 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
    alt="Hero image showing the product in use"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

<!-- Font optimization -->
<style>
  /* Preload critical fonts */
  @font-face {
    font-family: 'MainFont';
    src: url('/fonts/main-font-var.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  /* Critical CSS inlined in head */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
    background-color: var(--primary-bg);
    color: var(--primary-text);
    contain: layout style paint;
  }
  
  .hero h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .hero p {
    font-size: clamp(1rem, 2vw, 1.5rem);
    max-width: 60ch;
    text-align: center;
    margin-bottom: 2rem;
  }
</style>

<!-- Lazy-loaded CSS for non-critical styles -->
<link rel="preload" href="/css/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/non-critical.css"></noscript>

Network Optimization

Optimizing network requests is crucial for PWA performance, especially on mobile networks. Modern techniques include:

  • HTTP/2 and HTTP/3: Using modern protocols for faster, more efficient data transfer
  • Resource hints: Using preload, prefetch, preconnect, and dns-prefetch to optimize resource loading
  • Service worker caching: Implementing effective caching strategies
  • Content delivery networks (CDNs): Distributing content closer to users
  • Compression: Using Brotli and other modern compression algorithms

Here’s an example of modern network optimization:

<!-- Resource hints in the document head -->
<head>
  <!-- Preconnect to critical origins -->
  <link rel="preconnect" href="https://api.example.com">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  
  <!-- Preload critical resources -->
  <link rel="preload" href="/fonts/main-font-var.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/css/critical.css" as="style">
  <link rel="preload" href="/js/main.js" as="script">
  
  <!-- Prefetch resources needed for the next navigation -->
  <link rel="prefetch" href="/js/about-page.js">
  
  <!-- DNS prefetch for domains that will be used later -->
  <link rel="dns-prefetch" href="https://analytics.example.com">
</head>

Rendering Optimization

Optimizing rendering is essential for smooth user experiences. Modern PWAs use several techniques:

  • Server-side rendering (SSR): Rendering initial HTML on the server for faster first contentful paint
  • Static site generation (SSG): Pre-rendering pages at build time
  • Incremental static regeneration (ISR): Combining SSG with dynamic updates
  • Streaming SSR: Streaming HTML chunks as they’re generated
  • Partial hydration: Only hydrating interactive parts of the page
  • Islands architecture: Independent, self-contained UI components

Here’s an example of modern rendering optimization using React and Next.js:

// pages/index.js in a Next.js application
import { Suspense } from 'react';
import dynamic from 'next/dynamic';

// Static components
import Header from '../components/Header';
import Hero from '../components/Hero';
import Footer from '../components/Footer';

// Dynamically imported components with suspense
const ProductList = dynamic(() => import('../components/ProductList'), {
  suspense: true
});

const Newsletter = dynamic(() => import('../components/Newsletter'), {
  suspense: true
});

// Get static props at build time
export async function getStaticProps() {
  const featuredProducts = await fetch('https://api.example.com/products/featured')
    .then(res => res.json());
  
  return {
    props: {
      featuredProducts
    },
    // Revalidate the page every hour (ISR)
    revalidate: 3600
  };
}

export default function Home({ featuredProducts }) {
  return (

 

Loading products…

}>

Loading newsletter…

}>

); }

PWA User Experience Best Practices

Beyond performance, Progressive Web Apps must provide a seamless, engaging user experience that rivals native applications. Here are key UX best practices for modern PWAs:

App-like Navigation and Interactions

PWAs should provide navigation patterns that feel natural and app-like:

  • Single-page application (SPA) architecture: Smooth transitions between views without full page reloads
  • Gesture support: Implementing swipe gestures and other touch interactions
  • Bottom navigation: Using mobile-friendly navigation patterns
  • Transitions and animations: Adding subtle animations for state changes

Here’s an example of implementing app-like navigation:

// Example using React Router and Framer Motion for transitions
import { AnimatePresence, motion } from 'framer-motion';
import { Switch, Route, useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  
  return (

); } // Bottom navigation component with active indicators function BottomNavigation() { const location = useLocation(); return (

); } // Gesture support with Hammer.js import { useEffect, useRef } from ‘react’; import Hammer from ‘hammerjs’; import { useHistory } from ‘react-router-dom’; function GestureHandler({ children }) { const containerRef = useRef(null); const history = useHistory(); useEffect(() => { if (!containerRef.current) return; const hammer = new Hammer(containerRef.current); // Detect swipe right (go back) hammer.on(‘swiperight’, () => { history.goBack(); }); // Detect swipe left (go forward if possible) hammer.on(‘swipeleft’, () => { // Custom logic for forward navigation }); return () => { hammer.destroy(); }; }, [history]); return (

{children}

); }

Offline Experience

A thoughtful offline experience is a hallmark of well-designed PWAs:

  • Offline-first design: Designing the application to work offline by default
  • Offline content: Proactively caching important content
  • Offline feedback: Providing clear feedback about offline status
  • Background sync: Queuing actions to complete when connectivity is restored

Here’s an example of implementing a comprehensive offline experience:

// Offline UI component that shows different states based on connectivity
import { useState, useEffect } from 'react';

function OfflineAwareApp({ children }) {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  const [hasUnsyncedChanges, setHasUnsyncedChanges] = useState(false);
  
  // Check for unsynced changes in IndexedDB
  useEffect(() => {
    async function checkUnsyncedChanges() {
      const db = await openDatabase();
      const count = await db.count('offline-actions');
      setHasUnsyncedChanges(count > 0);
    }
    
    checkUnsyncedChanges();
    
    // Listen for sync events from service worker
    const channel = new BroadcastChannel('sync-updates');
    channel.addEventListener('message', event => {
      if (event.data.type === 'sync-completed') {
        checkUnsyncedChanges();
      }
    });
    
    return () => channel.close();
  }, []);
  
  // Listen for online/offline events
  useEffect(() => {
    const handleOnline = () => {
      setIsOnline(true);
      // Trigger sync when coming back online
      if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
        navigator.serviceWorker.ready.then(registration => {
          registration.sync.register('sync-data');
        });
      }
    };
    
    const handleOffline = () => {
      setIsOnline(false);
    };
    
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
  
  return (

{!isOnline && (

You’re offline. Some features may be unavailable.

)} {isOnline && hasUnsyncedChanges && (

Syncing your changes…

)} {children}

); } // Component for handling form submissions while offline function OfflineAwareForm({ onSubmit, children }) { const { isOnline } = useContext(OfflineContext); const handleSubmit = async (event) => { event.preventDefault(); const formData = new FormData(event.target); const data = Object.fromEntries(formData.entries()); if (isOnline) { // Online: submit directly await onSubmit(data); } else { // Offline: store in IndexedDB for later sync const db = await openDatabase(); await db.add(‘offline-actions’, { type: ‘form-submission’, data, timestamp: Date.now() }); // Show success message to user showNotification(‘Your changes will be saved when you’re back online’); // Request sync when back online if (‘serviceWorker’ in navigator && ‘SyncManager’ in window) { const registration = await navigator.serviceWorker.ready; await registration.sync.register(‘sync-data’); } } }; return (

{children} {!isOnline && (

You’re currently offline. Your changes will be saved and submitted when you’re back online.

)}

); }

Installation and Engagement

PWAs should provide a smooth installation experience and encourage engagement:

  • Custom install prompts: Creating tailored installation experiences
  • App shortcuts: Providing quick access to key functionality
  • Push notifications: Implementing timely, relevant notifications
  • Share target: Allowing the PWA to receive shared content

Here’s an example of implementing these engagement features:

// Custom install prompt component
import { useState, useEffect } from 'react';

function InstallPrompt() {
  const [installPromptEvent, setInstallPromptEvent] = useState(null);
  const [isInstalled, setIsInstalled] = useState(false);
  const [showPrompt, setShowPrompt] = useState(false);
  
  // Listen for the beforeinstallprompt event
  useEffect(() => {
    const handleBeforeInstallPrompt = (event) => {
      // Prevent the default browser prompt
      event.preventDefault();
      // Save the event for later
      setInstallPromptEvent(event);
      // Check if we should show our custom prompt
      checkIfShouldShowPrompt();
    };
    
    const handleAppInstalled = () => {
      setIsInstalled(true);
      setShowPrompt(false);
      // Track installation analytics
      trackEvent('app_installed');
    };
    
    async function checkIfShouldShowPrompt() {
      // Check if app is already installed
      if (window.matchMedia('(display-mode: standalone)').matches) {
        setIsInstalled(true);
        return;
      }
      
      // Check if we've recently shown the prompt
      const lastPromptTime = localStorage.getItem('lastInstallPromptTime');
      const now = Date.now();
      
      if (lastPromptTime && now - parseInt(lastPromptTime) < 7 * 24 * 60 * 60 * 1000) { // Don't show again within a week return; } // Check if user has engaged enough with the app const visitCount = parseInt(localStorage.getItem('visitCount') || '0') + 1; localStorage.setItem('visitCount', visitCount.toString()); if (visitCount >= 3) {
        setShowPrompt(true);
      }
    }
    
    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
    window.addEventListener('appinstalled', handleAppInstalled);
    
    checkIfShouldShowPrompt();
    
    return () => {
      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
      window.removeEventListener('appinstalled', handleAppInstalled);
    };
  }, []);
  
  const handleInstallClick = async () => {
    if (!installPromptEvent) return;
    
    // Show the browser install prompt
    installPromptEvent.prompt();
    
    // Wait for the user to respond
    const choiceResult = await installPromptEvent.userChoice;
    
    // Track the result
    trackEvent('install_prompt_response', {
      outcome: choiceResult.outcome
    });
    
    // Reset the saved prompt event
    setInstallPromptEvent(null);
    
    // Hide our prompt regardless of outcome
    setShowPrompt(false);
    
    // Save the time we showed the prompt
    localStorage.setItem('lastInstallPromptTime', Date.now().toString());
  };
  
  const handleDismissClick = () => {
    setShowPrompt(false);
    localStorage.setItem('lastInstallPromptTime', Date.now().toString());
  };
  
  if (!showPrompt || isInstalled) {
    return null;
  }
  
  return (

 

App icon

 

Install our app!

 

Install this app on your device for quick and easy access.

 

 

 

 

); } // Push notification implementation async function subscribeToPushNotifications() { try { // Check if service workers and push are supported if (!(‘serviceWorker’ in navigator) || !(‘PushManager’ in window)) { console.log(‘Push notifications not supported’); return false; } // Request permission const permission = await Notification.requestPermission(); if (permission !== ‘granted’) { console.log(‘Notification permission denied’); return false; } // Get service worker registration const registration = await navigator.serviceWorker.ready; // Get the server’s public key const response = await fetch(‘/api/push/public-key’); const { publicKey } = await response.json(); // Subscribe to push notifications const subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(publicKey) }); // Send the subscription to the server await fetch(‘/api/push/subscribe’, { method: ‘POST’, headers: { ‘Content-Type’: ‘application/json’ }, body: JSON.stringify(subscription) }); console.log(‘Push notification subscription successful’); return true; } catch (error) { console.error(‘Error subscribing to push notifications:’, error); return false; } } // Helper function to convert base64 to Uint8Array function urlBase64ToUint8Array(base64String) { const padding = ‘=’.repeat((4 – base64String.length % 4) % 4); const base64 = (base64String + padding) .replace(/-/g, ‘+’) .replace(/_/g, ‘/’); const rawData = window.atob(base64); const outputArray = new Uint8Array(rawData.length); for (let i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i); } return outputArray; }

Accessibility and Inclusivity

PWAs should be accessible to all users, regardless of abilities or device constraints:

  • Semantic HTML: Using appropriate HTML elements for their intended purpose
  • ARIA attributes: Adding accessibility information when needed
  • Keyboard navigation: Ensuring all functionality is accessible via keyboard
  • Screen reader support: Making content understandable to screen reader users
  • Responsive design: Adapting to different screen sizes and orientations
  • Color contrast: Ensuring sufficient contrast for readability

Here’s an example of implementing accessible components:

// Accessible modal component
import { useEffect, useRef } from 'react';
import FocusTrap from 'focus-trap-react';

function AccessibleModal({ isOpen, onClose, title, children }) {
  const modalRef = useRef(null);
  
  // Handle escape key press
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };
    
    if (isOpen) {
      window.addEventListener('keydown', handleKeyDown);
    }
    
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [isOpen, onClose]);
  
  // Prevent body scrolling when modal is open
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    
    return () => {
      document.body.style.overflow = '';
    };
  }, [isOpen]);
  
  if (!isOpen) {
    return null;
  }
  
  return (

 

e.stopPropagation()} >

 

 

 

{children}

 

 

); } // Accessible form input with error handling function AccessibleInput({ id, label, type = ‘text’, value, onChange, error, required, …props }) { const inputId = id || `input-${label.toLowerCase().replace(/s+/g, ‘-‘)}`; const errorId = `${inputId}-error`; return (

{error && (

)}

); }

Real-World PWA Case Studies

Examining successful Progressive Web Apps provides valuable insights into effective implementation strategies and the real-world benefits they can deliver.

E-commerce: Shopify PWA

Shopify’s PWA implementation demonstrates how e-commerce platforms can benefit from the PWA approach:

  • Implementation: Shopify’s PWA uses a combination of server-side rendering and client-side hydration to deliver fast initial page loads and smooth navigation.
  • Key Features: Offline product browsing, cart persistence, push notifications for order updates, and installability.
  • Results: 50% faster page loads, 23% higher conversion rates, and 27% longer average session duration compared to their previous mobile web experience.

Media: Financial Times

The Financial Times PWA shows how content-heavy sites can leverage PWA capabilities:

  • Implementation: The FT uses an offline-first approach with aggressive caching of articles and assets.
  • Key Features: Offline reading, background content syncing, push notifications for breaking news, and adaptive loading based on network conditions.
  • Results: 58% increase in mobile users, 2x increase in user engagement, and significantly higher retention rates.

Productivity: Microsoft Office

Microsoft’s Office PWA suite demonstrates how complex productivity applications can be delivered via PWAs:

  • Implementation: Microsoft uses a modular architecture with code splitting and lazy loading to deliver complex functionality without sacrificing performance.
  • Key Features: File system integration, offline document editing, real-time collaboration, and deep integration with device capabilities.
  • Results: 3x faster load times compared to the previous web apps, higher user satisfaction, and increased cross-platform usage.

Social: Twitter Lite

Twitter Lite remains one of the most referenced PWA success stories:

  • Implementation: Twitter uses aggressive code splitting, service worker caching, and a focus on core functionality to deliver a fast, reliable experience.
  • Key Features: Offline browsing of previously loaded content, data saving mode, push notifications, and a minimal initial payload size.
  • Results: 65% increase in pages per session, 75% increase in tweets sent, and 20% decrease in bounce rate.

Future Trends and Emerging Capabilities

As we look beyond 2025, several emerging trends and capabilities are shaping the future of Progressive Web Apps:

WebAssembly Integration

WebAssembly (Wasm) is enabling new levels of performance for web applications:

  • Near-native performance for computationally intensive tasks
  • Broader language support, allowing code written in C++, Rust, and other languages to run in the browser
  • Component model for better integration with JavaScript and the DOM

PWAs are increasingly leveraging WebAssembly for performance-critical features like image processing, 3D rendering, and complex calculations.

Advanced Device Integration

The gap between web and native capabilities continues to narrow with new APIs:

  • WebXR for augmented and virtual reality experiences
  • WebGPU for high-performance graphics and computing
  • Web Neural Network API for machine learning in the browser
  • WebTransport for low-latency, bidirectional communication

These APIs are enabling PWAs to deliver experiences that were previously only possible with native applications.

Ambient Computing Integration

PWAs are expanding beyond traditional devices to support ambient computing scenarios:

  • Smart displays and other connected home devices
  • Automotive integration for in-vehicle experiences
  • Cross-device experiences that span multiple devices

This expansion is creating new opportunities for PWAs to deliver seamless experiences across a user’s entire device ecosystem.

AI and Machine Learning Integration

AI capabilities are becoming more accessible to PWAs:

  • On-device machine learning using TensorFlow.js and similar libraries
  • Natural language processing for conversational interfaces
  • Computer vision for image recognition and augmented reality
  • Personalization based on user behavior and preferences

These capabilities are enabling PWAs to deliver more intelligent, personalized experiences without requiring constant server communication.

Bottom Line

Progressive Web Apps have evolved from an experimental technology to a mainstream approach for delivering high-quality web experiences. In 2025, PWAs represent a mature, powerful platform that combines the reach and accessibility of the web with the capabilities and engagement of native applications.

The core strengths of PWAs remain compelling:

  • Reach: PWAs are accessible to anyone with a web browser, without the friction of app store installation.
  • Performance: Modern PWAs deliver fast, responsive experiences even on constrained devices and networks.
  • Engagement: Features like push notifications, offline support, and home screen installation drive higher user engagement.
  • Maintenance: A single codebase for multiple platforms reduces development and maintenance costs.
  • Discoverability: PWAs benefit from web search and link sharing while also being installable.

As web capabilities continue to expand and browser support improves, the distinction between web and native applications will continue to blur. For many use cases, PWAs now represent the optimal approach for delivering cross-platform experiences that are fast, reliable, and engaging.

Organizations considering their mobile and cross-platform strategy should evaluate PWAs not as a compromise between web and native, but as a powerful approach that combines the best of both worlds. By embracing PWA best practices and leveraging the latest web capabilities, developers can create experiences that meet user expectations across devices while maintaining the openness and accessibility that make the web unique.

The future of Progressive Web Apps is bright, with continued innovation in web standards, tooling, and best practices driving the platform forward. As we move beyond 2025, PWAs will likely play an increasingly central role in how users access and interact with digital services across their growing ecosystem of connected devices.

If you found this guide helpful, consider subscribing to our newsletter for more in-depth technical articles and tutorials. We also offer premium courses on PWA development to help your team master these powerful techniques and build exceptional web experiences.

You may also like

This website uses cookies to improve your web experience.