PWA Configuration

import withSerwistInit from '@serwist/next';
import withBundleAnalyzer from '@next/bundle-analyzer';
import type { NextConfig } from 'next';

const isProduction = process.env.NODE_ENV === 'production';

const withSerwist = withSerwistInit({
  swSrc: 'src/sw.ts',                    // Service worker source
  swDest: 'public/sw.js',                // Output location
  cacheOnNavigation: true,               // Cache pages on navigation
  disable: !isProduction,                // Only enable in production
  register: isProduction,                // Auto-register in production
  maximumFileSizeToCacheInBytes: 100 * 1024 * 1024, // 100MB limit
});

const nextConfig: NextConfig = {
  reactStrictMode: !isProduction,
  transpilePackages: ['jotai-devtools'],
  compiler: {
    removeConsole: isProduction && { exclude: ['error'] },
  },
};

// Combine Serwist with bundle analyzer
export default withBundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
})(withSerwist(nextConfig));

import { defaultCache } from '@serwist/next/worker';
import type { PrecacheEntry, SerwistGlobalConfig } from 'serwist';
import {
  CacheableResponsePlugin,
  CacheFirst,
  ExpirationPlugin,
  Serwist,
} from 'serwist';

// TypeScript declarations
declare global {
  interface WorkerGlobalScope extends SerwistGlobalConfig {
    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
  }
}

declare const self: ServiceWorkerGlobalScope;

// Custom cache for MP3Quran audio files
const quranAudioCache = {
  matcher: ({ url }: { url: URL }) => {
    // Match MP3Quran audio URLs:
    // https://server12.mp3quran.net/001.mp3
    return (
      url.hostname.endsWith('.mp3quran.net') &&
      /^server\d+$/.test(url.hostname.split('.')[0]) &&
      /^\d+\.mp3$/.test(url.pathname.slice(1))
    );
  },
  handler: new CacheFirst({
    cacheName: 'quran-audio',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 20,                  // Cache up to 20 audio files
        maxAgeSeconds: 7 * 24 * 60 * 60, // Keep for 7 days
      }),
      new CacheableResponsePlugin({
        statuses: [200],                 // Only cache successful responses
      }),
    ],
  }),
};

// Prepend our custom cache before default caches
const runtimeCaching = [quranAudioCache, ...defaultCache];

// Initialize Serwist service worker
const serwist = new Serwist({
  precacheEntries: self.__SW_MANIFEST,   // Injected by build process
  skipWaiting: true,                     // Activate new SW immediately
  clientsClaim: true,                    // Take control of all clients
  navigationPreload: true,               // Speed up navigation requests
  runtimeCaching,
});

// Register event listeners
serwist.addEventListeners();

import { MetadataRoute } from 'next';

export default function manifest(): MetadataRoute.Manifest {
  return {
    id: '9a008c3173fcca3c4def71adedd5bd3f',
    theme_color: '#000000',
    background_color: '#000000',
    display: 'standalone',               // Hide browser UI
    scope: '/',
    start_url: '/',
    name: 'Open Tarteel',
    short_name: 'Open Tarteel',
    description: 'Quran streaming application',
    
    dir: 'auto',                         // RTL/LTR auto-detection
    lang: 'auto',
    orientation: 'portrait',
    
    // Launch behavior
    launch_handler: {
      client_mode: 'auto',
    },
    
    // Handle external links
    handle_links: [
      {
        url: 'https://tarteel.quran.us.kg',
        action: 'navigate',
      },
    ],
    
    categories: ['education', 'books', 'religion'],
    prefer_related_applications: false,
    
    // Web app identity
    web_apps: [
      {
        web_app_identity: 'https://tarteel.quran.us.kg/',
      },
    ],
    scope_extensions: [{ origin: 'tarteel.quran.us.kg' }],
    
    // App icons
    icons: [
      {
        src: 'images/192x192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        src: 'images/512x512.png',
        sizes: '512x512',
        type: 'image/png',
      },
    ],
    
    // Screenshots for app stores
    screenshots: [
      {
        src: '/screenshots/desktop.png',
        sizes: '1919x917',
        type: 'image/png',
        platform: 'wide',
        form_factor: 'wide',
        label: 'Open Tarteel - Desktop',
      },
      {
        src: '/screenshots/mobile.png',
        sizes: '1442x3202',
        type: 'image/png',
        platform: 'narrow',
        form_factor: 'narrow',
        label: 'Open Tarteel - Mobile',
      },
    ],
    
    // App shortcuts
    shortcuts: [
      {
        name: 'Contact us',
        url: '/contact',
        description: 'Contact us page',
        icons: [
          {
            src: 'images/shortcuts/contact.png',
            sizes: '96x96',
            type: 'image/png',
          },
        ],
      },
      {
        name: 'About us',
        url: '/about',
        description: 'About us page',
        icons: [
          {
            src: 'images/shortcuts/about.png',
            sizes: '96x96',
            type: 'image/png',
          },
        ],
      },
    ],
  };
}

# Build production version (enables service worker)
npm run build

# Start production server
npm start

# Visit http://localhost:3000
# Service worker will register
# Play some audio to populate cache
# Toggle offline mode in DevTools
# Verify offline playback works