@web-engine-dev/pwa

Progressive Web App support for web-engine-dev.

Features

• Service Worker: Offline support caching
• Install Prompt: A2HS (Add to Home Screen)
• Manifest: Web app manifest management
• Offline Mode: Offline gameplay support
• Updates: App update notifications
• Push Notifications: Game notifications

Installation

npm install @web-engine-dev/pwa
# or
pnpm add @web-engine-dev/pwa

Quick Start

import { PWA, ServiceWorker } from '@web-engine-dev/pwa';

// Initialize PWA
const pwa = new PWA();

// Register service worker
await pwa.registerServiceWorker('/sw.js');

// Check install status
if (pwa.canInstall()) {
  showInstallButton();
}

// Handle install
pwa.onInstallPrompt((event) => {
  installButton.onclick = () => {
    pwa.promptInstall();
  };
});

API Overview

Service Worker

// Register
await pwa.registerServiceWorker('/sw.js');

// Check status
if (pwa.isServiceWorkerActive()) {
  console.log('SW active');
}

// Update
pwa.onUpdateAvailable((registration) => {
  if (confirm('Update available. Reload?')) {
    registration.waiting.postMessage({ type: 'SKIP_WAITING' });
    window.location.reload();
  }
});

Installation

// Check if installable
if (pwa.canInstall()) {
  showInstallButton();
}

// Prompt install
pwa.onInstallPrompt((event) => {
  installBtn.onclick = async () => {
    const result = await pwa.promptInstall();
    if (result.outcome === 'accepted') {
      console.log('Installed!');
    }
  };
});

// Check if already installed
if (pwa.isInstalled()) {
  hideInstallButton();
}

Offline Support

// Check online status
if (pwa.isOnline()) {
  loadOnlineFeatures();
} else {
  enableOfflineMode();
}

// Listen for changes
pwa.onOnlineStatusChange((isOnline) => {
  if (isOnline) {
    syncData();
  }
});

// Cache assets
await pwa.cacheAssets(['/game.js', '/assets/sprites.png', '/assets/audio.mp3']);

Push Notifications

// Request permission
const permission = await pwa.requestNotificationPermission();

if (permission === 'granted') {
  // Subscribe
  const subscription = await pwa.subscribePush(publicVapidKey);

  // Send to server
  await sendPushSubscription(subscription);
}

// Show notification
pwa.showNotification('Game Update', {
  body: 'New levels available!',
  icon: '/icon.png',
  actions: [{ action: 'play', title: 'Play Now' }],
});

Manifest

// Generate manifest
const manifest = pwa.generateManifest({
  name: 'My Game',
  shortName: 'Game',
  startUrl: '/',
  display: 'fullscreen',
  backgroundColor: '#000000',
  themeColor: '#ff0000',
  icons: [
    { src: '/icon-192.png', sizes: '192x192' },
    { src: '/icon-512.png', sizes: '512x512' },
  ],
});