PWAs with AI: Skip the App Store Entirely

// Service worker with strategy-per-resource-type
// Generated by AI agent with correct cache strategies

import { registerRoute, NavigationRoute } from 'workbox-routing';
import {
  CacheFirst,
  NetworkFirst,
  StaleWhileRevalidate,
} from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';
import { precacheAndRoute } from 'workbox-precaching';

declare const self: ServiceWorkerGlobalScope;

// Precache build artifacts (versioned by webpack/Vite hash)
precacheAndRoute(self.__WB_MANIFEST);

// Static assets: Cache-First (versioned, safe to cache forever)
registerRoute(
  ({ request }) => request.destination === 'image' ||
    request.destination === 'font',
  new CacheFirst({
    cacheName: 'static-assets',
    plugins: [
      new CacheableResponsePlugin({ statuses: [200] }),
      new ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 365 * 24 * 60 * 60, // 1 year
      }),
    ],
  })
);

// API responses: Network-First with cache fallback
// Fresh when connected, stale when not
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-responses',
    plugins: [
      new CacheableResponsePlugin({ statuses: [200] }),
      new ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 5 * 60, // 5 minutes
      }),
    ],
    networkTimeoutSeconds: 3,
  })
);

// HTML pages: Stale-While-Revalidate
// Instant loads from cache, background refresh
registerRoute(
  new NavigationRoute(
    new StaleWhileRevalidate({
      cacheName: 'pages',
      plugins: [
        new ExpirationPlugin({ maxEntries: 20 }),
      ],
    })
  )
);

{
  "name": "Your Application",
  "short_name": "YourApp",
  "description": "A description for app stores and install prompts",
  "start_url": "/dashboard",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait-primary",
  "theme_color": "#1a1a1a",
  "background_color": "#1a1a1a",
  "icons": [
    { "src": "/icons/icon-72.png",   "sizes": "72x72",   "type": "image/png" },
    { "src": "/icons/icon-96.png",   "sizes": "96x96",   "type": "image/png" },
    { "src": "/icons/icon-128.png",  "sizes": "128x128", "type": "image/png" },
    { "src": "/icons/icon-144.png",  "sizes": "144x144", "type": "image/png" },
    { "src": "/icons/icon-152.png",  "sizes": "152x152", "type": "image/png" },
    { "src": "/icons/icon-192.png",  "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/icons/icon-384.png",  "sizes": "384x384", "type": "image/png" },
    { "src": "/icons/icon-512.png",  "sizes": "512x512", "type": "image/png", "purpose": "any" }
  ],
  "shortcuts": [
    {
      "name": "New Project",
      "url": "/projects/new",
      "icons": [{ "src": "/icons/shortcut-new.png", "sizes": "96x96" }]
    }
  ],
  "screenshots": [
    {
      "src": "/screenshots/desktop.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    }
  ]
}

// Engagement-based install prompting
class InstallPromptManager {
  private deferredPrompt: BeforeInstallPromptEvent | null = null;
  private sessionData = {
    visitCount: 0,
    actionsCompleted: 0,
    minutesEngaged: 0,
  };

  constructor() {
    // Capture the browser's install prompt
    window.addEventListener('beforeinstallprompt', (event) => {
      event.preventDefault(); // Prevent automatic prompt
      this.deferredPrompt = event as BeforeInstallPromptEvent;
    });

    // Track session data from localStorage
    this.sessionData = this.loadSessionData();
  }

  trackAction(actionType: string) {
    this.sessionData.actionsCompleted++;
    this.saveSessionData();
    this.checkInstallConditions(actionType);
  }

  private checkInstallConditions(triggerAction: string) {
    // Do not prompt if already installed
    if (window.matchMedia('(display-mode: standalone)').matches) return;
    // Do not prompt without the event
    if (!this.deferredPrompt) return;

    const conditions = [
      // Third visit or later
      this.sessionData.visitCount >= 3,
      // Has completed meaningful actions
      this.sessionData.actionsCompleted >= 5,
      // Has spent meaningful time
      this.sessionData.minutesEngaged >= 10,
    ];

    const shouldPrompt = conditions.filter(Boolean).length >= 2;

    if (shouldPrompt) {
      // Contextual prompt message based on what user just did
      const message = this.getContextualMessage(triggerAction);
      this.showInstallPrompt(message);
    }
  }

  private getContextualMessage(action: string): string {
    const messages: Record<string, string> = {
      'save_item': 'Install to access your saved items offline',
      'complete_project': 'Install for faster access to your projects',
      'view_dashboard': 'Install for one-tap access to your dashboard',
    };
    return messages[action] ?? 'Install for faster access and offline use';
  }

  async showInstallPrompt(message: string) {
    if (!this.deferredPrompt) return;

    // Show custom UI with contextual message
    const userChoice = await showCustomInstallBanner(message);

    if (userChoice === 'install') {
      this.deferredPrompt.prompt();
      const { outcome } = await this.deferredPrompt.userChoice;
      trackAnalytics('pwa_install_prompt', { outcome, message });
    }

    this.deferredPrompt = null;
  }
}

// Push notification subscription
async function subscribeToPushNotifications(): Promise<PushSubscription | null> {
  if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
    return null;
  }

  const permission = await Notification.requestPermission();
  if (permission !== 'granted') return null;

  const registration = await navigator.serviceWorker.ready;

  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!),
  });

  // Store subscription on server
  await savePushSubscription(subscription);

  return subscription;
}

// Service worker: handle push events
self.addEventListener('push', (event: PushEvent) => {
  if (!event.data) return;

  const notification = event.data.json();

  event.waitUntil(
    self.registration.showNotification(notification.title, {
      body: notification.body,
      icon: '/icons/icon-192.png',
      badge: '/icons/badge-72.png',
      data: { url: notification.url },
      actions: notification.actions ?? [],
      tag: notification.tag, // Prevents duplicate notifications
    })
  );
});

// Handle notification click: open the specific URL
self.addEventListener('notificationclick', (event: NotificationClickEvent) => {
  event.notification.close();
  const url = event.notification.data?.url ?? '/';
  
  event.waitUntil(
    clients.openWindow(url)
  );
});