Progressive Web Apps with Next.js: offline support and push notifications

Why PWAs matter for SaaS

Progressive Web Apps provide native app-like experiences with web technologies:

• Installable on any device without app stores
• Offline functionality for better user experience
• Push notifications for user engagement
• Faster load times with service worker caching
• Reduced development costs compared to native apps

What you get with Fastack

Fastack includes a complete @saas/pwa package that provides:

Service worker management

Fastack automatically generates and manages service workers using Workbox:

• Automatic registration - Service workers are registered automatically on app load
• Precaching - App shell and static assets are cached for instant loading
• Runtime caching - API responses and dynamic content are cached intelligently
• Update detection - Automatically checks for service worker updates
• Cache strategies - Network-first, cache-first, and stale-while-revalidate strategies

const withPWA = require('@saas/pwa/next/plugin');

module.exports = withPWA({
  pwa: {
    name: 'My SaaS App',
    shortName: 'MyApp',
    description: 'A modern SaaS application',
    themeColor: '#ff0080',
    backgroundColor: '#ffffff',
    iconPath: '/icon.svg',
    display: 'standalone',
    cacheStrategy: 'networkFirst',
  },
});

Offline support

Fastack provides comprehensive offline functionality:

• Offline page fallback - Custom offline page when network is unavailable
• Cache-first strategy - Serves cached content when offline
• Background sync - Queue requests for when connection is restored
• Network detection - Automatically detects online/offline status

// Service worker automatically handles offline scenarios
// When offline, cached resources are served
// When online, network requests are made with cache fallback

// Example: Network-first strategy
// 1. Try network request
// 2. If fails, serve from cache
// 3. If cache miss, show offline page

Installable apps

Fastack includes a complete install prompt system:

• Install button component - Pre-built install button with platform detection
• iOS Safari support - Special instructions for iOS users
• Install detection - Detects if app is already installed
• Beforeinstallprompt handling - Intercepts browser install prompts

import { InstallButton } from '@saas/pwa/components';
import { pwaLabels } from '@saas/pwa/types/labels';

function Header() {
  return (
    <InstallButton labels={pwaLabels}>
      Install App
    </InstallButton>
  );
}

The install button automatically detects the user's platform and provides appropriate installation instructions, including special handling for iOS Safari which requires manual installation.

VAPID push notifications

Fastack includes complete push notification support using VAPID (Voluntary Application Server Identification):

• VAPID key management - Automatic VAPID key generation and configuration
• Push subscription - User subscription management with service workers
• Notification sending - Server-side push notification sending
• Permission handling - Automatic permission request and management
• Database integration - Stores push subscriptions in database

import { sendPushNotification } from '@saas/notifications/services';

// Send push notification to user
await sendPushNotification({
  userId: 'user_123',
  messagei18nKey: 'notification.welcome',
  metadata: {
    title: 'Welcome!',
    body: 'Thanks for joining us',
  },
  link: '/dashboard',
});

Push notifications work even when the app is closed, providing a native app-like experience for user engagement.

App manifest generation

Fastack automatically generates a web app manifest with all required fields:

• App name and description - Configurable app metadata
• Icons - Multiple icon sizes for different devices
• Theme colors - Customizable theme and background colors
• Display mode - Standalone, fullscreen, or minimal-ui
• Start URL and scope - Configurable app entry point

// Manifest is automatically generated at /manifest.json
// Based on your PWA configuration

{
  "name": "My SaaS App",
  "short_name": "MyApp",
  "description": "A modern SaaS application",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ff0080",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Update notifications

Fastack includes update notification handling:

• Update detection - Automatically detects when new service worker is available
• Update notification component - Pre-built component to notify users of updates
• Skip waiting option - Immediate updates or user-controlled updates
• Periodic update checks - Checks for updates every hour

import { usePWAUpdate } from '@saas/pwa/hooks';

function App() {
  const { updateAvailable, updateServiceWorker } = usePWAUpdate();
  
  if (updateAvailable) {
    return (
      <div>
        <p>Update available!</p>
        <button onClick={updateServiceWorker}>
          Update now
        </button>
      </div>
    );
  }
  
  return <YourApp />;
}

Caching strategies

Fastack supports multiple caching strategies via Workbox:

• Network-first - Try network, fallback to cache (default)
• Cache-first - Serve from cache, update in background
• Stale-while-revalidate - Serve stale cache while fetching fresh content
• Cache expiration - Automatic cache cleanup based on age

Time saved: 30+ hours

Building PWA capabilities from scratch typically requires:

• Setting up Workbox and service worker infrastructure (4-6 hours)
• Implementing service worker registration (2-3 hours)
• Building caching strategies (4-6 hours)
• Creating app manifest (2-3 hours)
• Implementing install prompt handling (3-4 hours)
• Building update notification system (2-3 hours)
• Setting up VAPID keys and push notifications (4-6 hours)
• Creating push subscription management (3-4 hours)
• Building offline fallback pages (2-3 hours)
• Testing across different browsers and devices (3-4 hours)

Total: 29-42 hours of development time that you save with Fastack.

Best practices included

Fastack follows PWA best practices:

• HTTPS requirement - Service workers only work over HTTPS (or localhost)
• Icon optimization - Multiple icon sizes for different devices and contexts
• Update strategy - Configurable update behavior (immediate or user-controlled)
• Error handling - Graceful fallbacks when service worker fails
• Platform detection - Special handling for iOS and different browsers

Conclusion

Progressive Web Apps provide a native app-like experience without the complexity of app store distribution. Fastack provides a complete, production-ready PWA implementation that saves you weeks of development time while ensuring offline support, push notifications, and installability across all platforms.

With Fastack, you get:

• Complete service worker management with Workbox
• Offline support with intelligent caching strategies
• Installable apps with platform-specific install prompts
• VAPID push notifications with subscription management
• Automatic app manifest generation
• Update notification system for service worker updates
• Pre-built React hooks and components for PWA features
• Next.js plugin for seamless integration