{"_id":"@basirah/vite-pwa-bootstrap","name":"@basirah/vite-pwa-bootstrap","dist-tags":{"latest":"1.2.0"},"versions":{"1.2.0":{"name":"@basirah/vite-pwa-bootstrap","version":"1.2.0","description":"Vite PWA Bootstrap Toolkit - Vite plugin, React hooks, cache management, and service worker generation for seamless Progressive Web App experiences.","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./build-time":{"types":"./dist/build-time.d.ts","import":"./dist/build-time.mjs","require":"./dist/build-time.js"},"./vite":{"types":"./dist/vite.d.ts","import":"./dist/vite.mjs","require":"./dist/vite.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.mjs","require":"./dist/react.js"},"./cache":{"types":"./dist/cache.d.ts","import":"./dist/cache.mjs","require":"./dist/cache.js"},"./workbox":{"types":"./dist/workbox.d.ts","import":"./dist/workbox.mjs","require":"./dist/workbox.js"},"./pwa":{"types":"./dist/pwa.d.ts","import":"./dist/pwa.mjs","require":"./dist/pwa.js"}},"scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest","lint":"eslint src","lint:fix":"eslint src --fix","prepublishOnly":"npm run build","release":"npm run build && npm publish"},"keywords":["vite","pwa","progressive-web-app","vite-plugin","react-hooks","cache-manager","service-worker","workbox","offline","loading","bootstrap","asset-manifest","gzip-loader"],"author":{"name":"Basirah Team"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/BaserahThing/vite-pwa-bootstrap.git"},"bugs":{"url":"https://github.com/BaserahThing/vite-pwa-bootstrap/issues"},"homepage":"https://github.com/BaserahThing/vite-pwa-bootstrap#readme","publishConfig":{"access":"public"},"peerDependencies":{"vite":"^5.0.0","react":"^19.0.0"},"devDependencies":{"@types/node":"^20.0.0","@types/react":"^19.0.0","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","eslint":"^8.0.0","react":"^19.0.0","tsup":"^8.0.0","typescript":"^5.0.0","vitest":"^1.0.0"},"engines":{"node":">=18"},"_id":"@basirah/vite-pwa-bootstrap@1.2.0","gitHead":"d3ed4685c399d8d11b51d6e5bdba966bbe1454b6","_nodeVersion":"22.17.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-vVuA49sH9wo33azyfcDIvTvIgkeSLhKG7/W6sihmDAz9jqn0liN98HuVm1sR653Ww0Ot58+lsho/R3iaq8tvZw==","shasum":"99bdba49e9dee0ecf3c4769d6e0edc51be527c85","tarball":"https://registry.npmjs.org/@basirah/vite-pwa-bootstrap/-/vite-pwa-bootstrap-1.2.0.tgz","fileCount":47,"unpackedSize":589565,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFmGUDJqNAKVltcvKA6lUknmzXPoglW3/II/0V22cmgDAiEAiS7VBrEMQisTWyrpYcUQxDCNNufBC6i17TrNucI370w="}]},"_npmUser":{"name":"omd0","email":"emad.cydia@gmail.com"},"directories":{},"maintainers":[{"name":"omd0","email":"emad.cydia@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vite-pwa-bootstrap_1.2.0_1754047228796_0.08520204356805872"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-01T11:20:28.716Z","1.2.0":"2025-08-01T11:20:28.988Z","modified":"2025-08-01T11:20:29.222Z"},"maintainers":[{"name":"omd0","email":"emad.cydia@gmail.com"}],"description":"Vite PWA Bootstrap Toolkit - Vite plugin, React hooks, cache management, and service worker generation for seamless Progressive Web App experiences.","homepage":"https://github.com/BaserahThing/vite-pwa-bootstrap#readme","keywords":["vite","pwa","progressive-web-app","vite-plugin","react-hooks","cache-manager","service-worker","workbox","offline","loading","bootstrap","asset-manifest","gzip-loader"],"repository":{"type":"git","url":"git+https://github.com/BaserahThing/vite-pwa-bootstrap.git"},"author":{"name":"Basirah Team"},"bugs":{"url":"https://github.com/BaserahThing/vite-pwa-bootstrap/issues"},"license":"MIT","readme":"# @basirah/vite-pwa-bootstrap\n\n🚀 **Vite PWA Bootstrap Toolkit** - Everything you need to create seamless Progressive Web App experiences with Vite, React, and advanced caching strategies.\n\n## ✨ Features\n\n- **🎯 Vite Plugin**: Automatic asset manifest generation and loading optimization\n- **⚛️ React Hooks**: Easy integration with React applications\n- **💾 Cache Manager**: Intelligent loading screens and service worker management\n- **📱 PWA Module**: Service worker registration, install prompts, and manifest generation\n- **🔧 Workbox Integration**: Advanced service worker functionality with caching strategies\n- **🎨 Customizable**: Multiple themes and extensive configuration options\n- **🚫 Disableable**: PWA functionality can be disabled from project config\n\n## 📦 Installation\n\n```bash\nnpm install @basirah/vite-pwa-bootstrap\n```\n\n## 🚀 Quick Start\n\n### 1. Basic Vite Configuration\n\n```typescript\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport { appBootstrapPlugin } from '@basirah/vite-pwa-bootstrap';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    appBootstrapPlugin({\n      appName: 'My Amazing PWA',\n      loadingTheme: 'gradient',\n      debugMode: true,\n      // PWA configuration\n      pwa: {\n        enablePWA: true, // Can be disabled from project config\n        manifest: {\n          name: 'My Amazing PWA',\n          short_name: 'MyPWA',\n          description: 'An amazing Progressive Web App',\n          theme_color: '#667eea',\n          background_color: '#ffffff',\n          icons: [\n            {\n              src: '/icon-192x192.png',\n              sizes: '192x192',\n              type: 'image/png'\n            }\n          ]\n        },\n        serviceWorker: {\n          enabled: true,\n          src: '/sw.js',\n          scope: '/'\n        },\n        installPrompt: {\n          enabled: true,\n          text: 'Install this app for a better experience',\n          buttonText: 'Install',\n          position: 'bottom'\n        }\n      }\n    })\n  ]\n});\n```\n\n### 2. React Integration\n\n```tsx\n// App.tsx\nimport { useAppBootstrap } from '@basirah/vite-pwa-bootstrap';\n\nfunction App() {\n  const { loadingState, isReady, error, retry } = useAppBootstrap({\n    enableDebug: true\n  });\n\n  if (!isReady) {\n    return (\n      <div className=\"loading-screen\">\n        <div className=\"spinner\" />\n        <p>Loading... {loadingState.progress}%</p>\n        {error && (\n          <div className=\"error\">\n            <p>Error: {error}</p>\n            <button onClick={retry}>Retry</button>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return <div>Your app is ready! 🎉</div>;\n}\n```\n\n### 3. PWA Initialization\n\n```typescript\n// main.ts\nimport { initializePWA } from '@basirah/vite-pwa-bootstrap';\n\n// Initialize PWA functionality\nconst pwaManager = initializePWA({\n  enablePWA: true,\n  manifest: {\n    name: 'My PWA',\n    theme_color: '#667eea'\n  },\n  serviceWorker: {\n    enabled: true,\n    src: '/sw.js'\n  },\n  installPrompt: {\n    enabled: true,\n    text: 'Install this app for a better experience'\n  }\n});\n\n// Check PWA status\nconst status = pwaManager.getStatus();\nconsole.log('PWA Status:', status);\n```\n\n## 📚 API Reference\n\n### Vite Plugin Configuration\n\n```typescript\ninterface PWAAppBootstrapOptions {\n  // Basic configuration\n  appName?: string;\n  loadingTheme?: 'gradient' | 'minimal' | 'custom';\n  customTheme?: string;\n  debugMode?: boolean;\n\n  // Asset optimization\n  enableGzip?: boolean;\n  enableProgress?: boolean;\n  enableFallback?: boolean;\n  assetPrefix?: string;\n  bootstrapFileName?: string;\n\n  // Chunk configuration\n  customChunks?: Record<string, string[]>;\n  chunkPriorities?: Record<string, number>;\n\n  // PWA configuration\n  pwa?: PWAConfig;\n\n  // Workbox configuration\n  workbox?: WorkboxOptions;\n}\n```\n\n### PWA Configuration\n\n```typescript\ninterface PWAConfig {\n  /** Enable/disable PWA functionality */\n  enablePWA?: boolean;\n\n  /** PWA manifest configuration */\n  manifest?: {\n    name: string;\n    short_name?: string;\n    description?: string;\n    theme_color?: string;\n    background_color?: string;\n    display?: 'standalone' | 'fullscreen' | 'minimal-ui' | 'browser';\n    orientation?: 'portrait' | 'landscape' | 'any';\n    scope?: string;\n    start_url?: string;\n    icons?: Array<{\n      src: string;\n      sizes: string;\n      type?: string;\n      purpose?: string;\n    }>;\n  };\n\n  /** Service worker configuration */\n  serviceWorker?: {\n    enabled?: boolean;\n    src?: string;\n    scope?: string;\n    updateStrategy?: 'all' | 'hierarchical' | 'minimal';\n    skipWaiting?: boolean;\n    clientsClaim?: boolean;\n  };\n\n  /** Install prompt configuration */\n  installPrompt?: {\n    enabled?: boolean;\n    text?: string;\n    buttonText?: string;\n    position?: 'top' | 'bottom' | 'center';\n  };\n}\n```\n\n### React Hooks\n\n#### useAppBootstrap\n\n```typescript\nconst {\n  loadingState,      // Current loading state\n  assetManifest,     // Asset manifest data\n  isReady,          // Whether app is ready\n  error,            // Loading error if any\n  retry,            // Retry function\n  getChunkProgress, // Get progress for specific chunk\n  getOverallProgress // Get overall progress\n} = useAppBootstrap({\n  enableDebug: true  // Enable debug logging\n});\n```\n\n#### useAppBootstrapStatus\n\n```typescript\nconst {\n  isReady,\n  isLoading,\n  isLoaded,\n  progress,\n  error,\n  currentChunk\n} = useAppBootstrapStatus();\n```\n\n### Cache Manager\n\n```typescript\nimport { AppCacheManager } from '@basirah/vite-pwa-bootstrap';\n\nconst manager = new AppCacheManager({\n  cacheName: 'my-pwa-v1',\n  appVersion: '1.0.0',\n  enableServiceWorker: true,\n  loadingScreen: {\n    theme: 'gradient',\n    customHTML: '<div>Custom loading...</div>'\n  }\n});\n\nawait manager.init();\nmanager.updateLoadingText('Loading...');\nmanager.hideLoadingScreen();\nmanager.showError('Something went wrong');\nmanager.retry();\n```\n\n### PWA Manager\n\n```typescript\nimport { PWAManager } from '@basirah/vite-pwa-bootstrap';\n\nconst pwaManager = new PWAManager({\n  enablePWA: true,\n  manifest: {\n    name: 'My PWA',\n    theme_color: '#667eea'\n  },\n  serviceWorker: {\n    enabled: true,\n    src: '/sw.js'\n  },\n  installPrompt: {\n    enabled: true,\n    text: 'Install this app for a better experience'\n  }\n});\n\nawait pwaManager.init();\n\n// Check if app is installed\nconst isInstalled = pwaManager.isInstalled();\n\n// Get PWA status\nconst status = pwaManager.getStatus();\n```\n\n## 🎨 Themes\n\n### Gradient Theme (Default)\n```typescript\nappBootstrapPlugin({\n  loadingTheme: 'gradient',\n  appName: 'My App'\n})\n```\n\n### Minimal Theme\n```typescript\nappBootstrapPlugin({\n  loadingTheme: 'minimal',\n  appName: 'My App'\n})\n```\n\n### Custom Theme\n```typescript\nappBootstrapPlugin({\n  loadingTheme: 'custom',\n  customTheme: `\n    .loading-screen {\n      background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);\n      color: white;\n      font-family: 'Arial', sans-serif;\n    }\n    .spinner {\n      border: 3px solid rgba(255,255,255,0.3);\n      border-top: 3px solid white;\n      border-radius: 50%;\n      width: 40px;\n      height: 40px;\n      animation: spin 1s linear infinite;\n    }\n  `\n})\n```\n\n## 🔧 Advanced Configuration\n\n### Disable PWA Functionality\n\n```typescript\n// Disable PWA from project config\nappBootstrapPlugin({\n  appName: 'My App',\n  pwa: {\n    enablePWA: false // This disables all PWA functionality\n  }\n})\n```\n\n### Custom Chunk Priorities\n\n```typescript\nappBootstrapPlugin({\n  appName: 'My App',\n  chunkPriorities: {\n    'vendor': 1,\n    'main': 2,\n    'app': 3,\n    'chunk': 4\n  }\n})\n```\n\n### Workbox Integration\n\n```typescript\nappBootstrapPlugin({\n  appName: 'My App',\n  workbox: {\n    enabled: true,\n    cacheNamePrefix: 'my-app',\n    strategies: {\n      js: 'cache-first',\n      css: 'stale-while-revalidate',\n      images: 'cache-first',\n      html: 'network-first',\n      api: 'network-first'\n    },\n    expiration: {\n      maxEntries: 100,\n      maxAgeSeconds: 86400 // 24 hours\n    },\n    precache: true,\n    backgroundSync: true\n  }\n})\n```\n\n## 📁 File Structure\n\n```\npwa-bootstrap-kit/\n├── src/\n│   ├── index.ts           # Main entry point\n│   ├── types.ts           # TypeScript types\n│   ├── vite.ts            # Vite plugin\n│   ├── react.ts           # React hooks\n│   ├── cache.ts           # Cache manager\n│   ├── pwa.ts             # PWA functionality\n│   ├── workbox.ts         # Workbox integration\n│   ├── asset-manifest.ts  # Asset manifest generator\n│   └── build-time.ts      # Build-time utilities\n├── dist/                  # Built files\n├── package.json\n├── tsconfig.json\n├── tsup.config.ts\n└── README.md\n```\n\n## 🔄 Migration Guide\n\n### From @basirah/app-bootstrap-lib\n\n```typescript\n// Old\nimport { appBootstrapPlugin } from '@basirah/app-bootstrap-lib';\n\n// New\nimport { appBootstrapPlugin } from '@basirah/vite-pwa-bootstrap';\n```\n\n### From vite-plugin-app-bootstrap\n\n```typescript\n// Old\nimport appBootstrapPlugin from 'vite-plugin-app-bootstrap';\n\n// New\nimport { appBootstrapPlugin } from '@basirah/vite-pwa-bootstrap';\n```\n\n## 🧪 Examples\n\n### Complete PWA Setup\n\n```typescript\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport { appBootstrapPlugin } from '@basirah/vite-pwa-bootstrap';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    appBootstrapPlugin({\n      appName: 'My Complete PWA',\n      loadingTheme: 'gradient',\n      debugMode: true,\n      enableGzip: true,\n      pwa: {\n        enablePWA: true,\n        manifest: {\n          name: 'My Complete PWA',\n          short_name: 'MyPWA',\n          description: 'A complete Progressive Web App example',\n          theme_color: '#667eea',\n          background_color: '#ffffff',\n          display: 'standalone',\n          icons: [\n            {\n              src: '/icon-192x192.png',\n              sizes: '192x192',\n              type: 'image/png'\n            },\n            {\n              src: '/icon-512x512.png',\n              sizes: '512x512',\n              type: 'image/png',\n              purpose: 'maskable'\n            }\n          ]\n        },\n        serviceWorker: {\n          enabled: true,\n          src: '/sw.js',\n          scope: '/',\n          updateStrategy: 'all'\n        },\n        installPrompt: {\n          enabled: true,\n          text: 'Install this app for a better experience',\n          buttonText: 'Install',\n          position: 'bottom'\n        }\n      },\n      workbox: {\n        enabled: true,\n        cacheNamePrefix: 'my-pwa',\n        strategies: {\n          js: 'cache-first',\n          css: 'stale-while-revalidate',\n          images: 'cache-first',\n          html: 'network-first',\n          api: 'network-first'\n        },\n        expiration: {\n          maxEntries: 100,\n          maxAgeSeconds: 86400\n        },\n        precache: true,\n        backgroundSync: true\n      }\n    })\n  ]\n});\n```\n\n### React Component with Loading\n\n```tsx\nimport React from 'react';\nimport { useAppBootstrap } from '@basirah/vite-pwa-bootstrap';\n\nfunction LoadingScreen() {\n  const { loadingState, error, retry } = useAppBootstrap();\n\n  return (\n    <div className=\"loading-screen\">\n      <div className=\"spinner\" />\n      <div className=\"loading-content\">\n        <h2>Loading Your App</h2>\n        <p>Progress: {loadingState.progress}%</p>\n        <div className=\"progress-bar\">\n          <div\n            className=\"progress-fill\"\n            style={{ width: `${loadingState.progress}%` }}\n          />\n        </div>\n        {error && (\n          <div className=\"error-message\">\n            <p>Error: {error}</p>\n            <button onClick={retry} className=\"retry-button\">\n              Retry\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport default LoadingScreen;\n```\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🆘 Support\n\n- 📧 Email: support@basirah.com\n- 🐛 Issues: [GitHub Issues](https://github.com/BaserahThing/pwa-bootstrap-kit/issues)\n- 📖 Documentation: [GitHub Wiki](https://github.com/BaserahThing/pwa-bootstrap-kit/wiki)\n\n---\n\nMade with ❤️ by the Basirah Team\n","readmeFilename":"README.md","_rev":"1-8dadc2467f229567b012bc02bb301252"}