@julien-lin/universal-pwa-cli 1.3.0 → 1.3.2

package/README.fr.md

@@ -92,6 +92,84 @@ universal-pwa init \
   --theme-color "#2c3e50"
 ```
 
+### Bouton d'Installation PWA
+
+Le CLI injecte automatiquement un gestionnaire d'installation PWA dans votre HTML. Pour afficher un bouton d'installation dans votre application, utilisez les fonctions globales exposées :
+
+#### Fonctions Globales Disponibles
+
+- `window.installPWA()` : Déclenche la prompt d'installation
+- `window.isPWAInstalled()` : Vérifie si l'app est déjà installée
+- `window.isPWAInstallable()` : Vérifie si l'app est installable
+
+#### Exemple Vanilla JavaScript
+
+```javascript
+// Vérifier si installable et afficher un bouton
+if (window.isPWAInstallable && window.isPWAInstallable()) {
+  const installButton = document.createElement('button')
+  installButton.textContent = 'Installer l\'app'
+  installButton.onclick = () => {
+    window.installPWA().catch(console.error)
+  }
+  document.body.appendChild(installButton)
+}
+```
+
+#### Exemple React
+
+```tsx
+import { useState, useEffect } from 'react'
+
+function InstallButton() {
+  const [isInstallable, setIsInstallable] = useState(false)
+  const [isInstalled, setIsInstalled] = useState(false)
+
+  useEffect(() => {
+    // Vérifier l'état initial
+    if (window.isPWAInstalled) {
+      setIsInstalled(window.isPWAInstalled())
+    }
+    if (window.isPWAInstallable) {
+      setIsInstallable(window.isPWAInstallable())
+    }
+
+    // Écouter les événements personnalisés
+    const handleInstallable = () => setIsInstallable(true)
+    const handleInstalled = () => {
+      setIsInstalled(true)
+      setIsInstallable(false)
+    }
+
+    window.addEventListener('pwa-installable', handleInstallable)
+    window.addEventListener('pwa-installed', handleInstalled)
+
+    return () => {
+      window.removeEventListener('pwa-installable', handleInstallable)
+      window.removeEventListener('pwa-installed', handleInstalled)
+    }
+  }, [])
+
+  if (isInstalled || !isInstallable) {
+    return null
+  }
+
+  return (
+    <button onClick={() => window.installPWA?.()}>
+      Installer l'app
+    </button>
+  )
+}
+```
+
+#### Événements Personnalisés
+
+Le script injecté émet des événements personnalisés que vous pouvez écouter :
+
+- `pwa-installable` : Émis quand l'app devient installable
+- `pwa-installed` : Émis après l'installation réussie
+- `pwa-install-choice` : Émis avec le choix de l'utilisateur (`{ detail: { outcome: 'accepted' | 'dismissed' } }`)
+
 ### Commande `scan`
 
 Scanne un projet et détecte le framework, l'architecture et les assets.

package/README.md

@@ -37,13 +37,23 @@ pnpm build
 # or
 yarn build
 
-# 2. Then initialize PWA (CLI will auto-detect dist/ directory)
+# 2. Then initialize PWA
+# In interactive mode, select "Production" when prompted
+# The CLI will auto-detect dist/ directory and suggest it
+universal-pwa init
+
+# Or explicitly specify output directory
 universal-pwa init --output-dir dist
 ```
 
 **Why?** The service worker needs to precache all your built assets (JS/CSS with hashes). If you initialize before building, the service worker won't know about the hashed filenames.
 
-The CLI automatically detects `dist/` directory for React/Vite projects if it exists. You can also explicitly specify it with `--output-dir dist`.
+**Environment Detection:**
+- The CLI automatically detects your environment:
+  - **Production**: If `dist/` or `build/` exists with recent files (< 24h)
+  - **Local**: Otherwise, defaults to `public/`
+- Detection indicators are displayed during interactive prompts
+- You can override the detection by explicitly choosing Local or Production
 
 #### Interactive Mode (Recommended)
 
@@ -53,13 +63,22 @@ Simply run without arguments to launch interactive prompts:
 universal-pwa init
 ```
 
-The CLI will guide you through:
+The CLI will guide you through a 2-phase workflow:
+
+**Phase 1: Environment Selection**
+- Choose between **Local** (development) or **Production** (build)
+- The CLI automatically detects your environment based on the presence of `dist/` or `build/` directories
+- Displays detection indicators (e.g., "dist/ directory exists with 15 built files")
+
+**Phase 2: Application Configuration**
 - App name (auto-detected from `package.json`)
-- Short name (max 12 characters)
+- Short name (max 12 characters, auto-generated from app name)
 - Icon source path (auto-detected from common locations)
-- Theme and background colors
+- Theme and background colors (suggested based on detected framework)
 - Icon generation options
 
+All prompts include smart defaults, validation, and contextual suggestions!
+
 #### Command Line Mode
 
 ```bash
@@ -94,6 +113,84 @@ universal-pwa init \
   --theme-color "#2c3e50"
 ```
 
+### PWA Install Button
+
+The CLI automatically injects a PWA install handler into your HTML. To display an install button in your application, use the exposed global functions:
+
+#### Available Global Functions
+
+- `window.installPWA()` : Triggers the install prompt
+- `window.isPWAInstalled()` : Checks if the app is already installed
+- `window.isPWAInstallable()` : Checks if the app is installable
+
+#### Vanilla JavaScript Example
+
+```javascript
+// Check if installable and show a button
+if (window.isPWAInstallable && window.isPWAInstallable()) {
+  const installButton = document.createElement('button')
+  installButton.textContent = 'Install App'
+  installButton.onclick = () => {
+    window.installPWA().catch(console.error)
+  }
+  document.body.appendChild(installButton)
+}
+```
+
+#### React Example
+
+```tsx
+import { useState, useEffect } from 'react'
+
+function InstallButton() {
+  const [isInstallable, setIsInstallable] = useState(false)
+  const [isInstalled, setIsInstalled] = useState(false)
+
+  useEffect(() => {
+    // Check initial state
+    if (window.isPWAInstalled) {
+      setIsInstalled(window.isPWAInstalled())
+    }
+    if (window.isPWAInstallable) {
+      setIsInstallable(window.isPWAInstallable())
+    }
+
+    // Listen to custom events
+    const handleInstallable = () => setIsInstallable(true)
+    const handleInstalled = () => {
+      setIsInstalled(true)
+      setIsInstallable(false)
+    }
+
+    window.addEventListener('pwa-installable', handleInstallable)
+    window.addEventListener('pwa-installed', handleInstalled)
+
+    return () => {
+      window.removeEventListener('pwa-installable', handleInstallable)
+      window.removeEventListener('pwa-installed', handleInstalled)
+    }
+  }, [])
+
+  if (isInstalled || !isInstallable) {
+    return null
+  }
+
+  return (
+    <button onClick={() => window.installPWA?.()}>
+      Install App
+    </button>
+  )
+}
+```
+
+#### Custom Events
+
+The injected script emits custom events you can listen to:
+
+- `pwa-installable` : Emitted when the app becomes installable
+- `pwa-installed` : Emitted after successful installation
+- `pwa-install-choice` : Emitted with user's choice (`{ detail: { outcome: 'accepted' | 'dismissed' } }`)
+
 ### `scan` Command
 
 Scan a project and detect framework, architecture, and assets.

package/dist/chunk-35T5DDFX.js

@@ -0,0 +1,88 @@
+// src/utils/environment-detector.ts
+import { existsSync, statSync } from "fs";
+import { join } from "path";
+import { glob } from "glob";
+function detectEnvironment(projectPath, framework) {
+  const indicators = [];
+  let environment = "local";
+  let confidence = "low";
+  let suggestedOutputDir = "public";
+  const distDir = join(projectPath, "dist");
+  const publicDir = join(projectPath, "public");
+  const buildDir = join(projectPath, "build");
+  if (existsSync(distDir)) {
+    try {
+      const distFiles = glob.sync("**/*.{js,css,html}", {
+        cwd: distDir,
+        absolute: false,
+        maxDepth: 2
+      });
+      if (distFiles.length > 0) {
+        indicators.push(`dist/ directory exists with ${distFiles.length} built files`);
+        const recentFiles = distFiles.filter((file) => {
+          try {
+            const filePath = join(distDir, file);
+            const stats = statSync(filePath);
+            const ageInHours = (Date.now() - stats.mtimeMs) / (1e3 * 60 * 60);
+            return ageInHours < 24;
+          } catch {
+            return false;
+          }
+        });
+        if (recentFiles.length > 0) {
+          indicators.push(`${recentFiles.length} recent files in dist/ (last 24h)`);
+          environment = "production";
+          confidence = "high";
+          suggestedOutputDir = "dist";
+        } else {
+          indicators.push("dist/ exists but files are old (may be stale)");
+          environment = "production";
+          confidence = "medium";
+          suggestedOutputDir = "dist";
+        }
+      } else {
+        indicators.push("dist/ directory exists but is empty");
+      }
+    } catch {
+    }
+  }
+  if (existsSync(buildDir) && environment === "local") {
+    try {
+      const buildFiles = glob.sync("**/*.{js,css,html}", {
+        cwd: buildDir,
+        absolute: false,
+        maxDepth: 2
+      });
+      if (buildFiles.length > 0) {
+        indicators.push(`build/ directory exists with ${buildFiles.length} built files`);
+        environment = "production";
+        confidence = "high";
+        suggestedOutputDir = "build";
+      }
+    } catch {
+    }
+  }
+  if ((framework === "React" || framework === "Vite") && existsSync(distDir)) {
+    if (environment === "local") {
+      environment = "production";
+      confidence = "medium";
+      suggestedOutputDir = "dist";
+      indicators.push("React/Vite project with dist/ directory (likely production)");
+    }
+  }
+  if (environment === "local" && indicators.length === 0) {
+    indicators.push("No production build detected, using local mode");
+    confidence = "medium";
+    suggestedOutputDir = "public";
+  }
+  return {
+    environment,
+    confidence,
+    indicators,
+    suggestedOutputDir
+  };
+}
+
+export {
+  detectEnvironment
+};

package/dist/chunk-Y2M6FMPR.js

@@ -0,0 +1,87 @@
+// src/utils/environment-detector.ts
+import { existsSync, statSync } from "fs";
+import { join } from "path";
+import { glob } from "glob";
+function detectEnvironment(projectPath, framework) {
+  const indicators = [];
+  let environment = "local";
+  let confidence = "low";
+  let suggestedOutputDir = "public";
+  const distDir = join(projectPath, "dist");
+  const buildDir = join(projectPath, "build");
+  if (existsSync(distDir)) {
+    try {
+      const distFiles = glob.sync("**/*.{js,css,html}", {
+        cwd: distDir,
+        absolute: false,
+        maxDepth: 2
+      });
+      if (distFiles.length > 0) {
+        indicators.push(`dist/ directory exists with ${distFiles.length} built files`);
+        const recentFiles = distFiles.filter((file) => {
+          try {
+            const filePath = join(distDir, file);
+            const stats = statSync(filePath);
+            const ageInHours = (Date.now() - stats.mtimeMs) / (1e3 * 60 * 60);
+            return ageInHours < 24;
+          } catch {
+            return false;
+          }
+        });
+        if (recentFiles.length > 0) {
+          indicators.push(`${recentFiles.length} recent files in dist/ (last 24h)`);
+          environment = "production";
+          confidence = "high";
+          suggestedOutputDir = "dist";
+        } else {
+          indicators.push("dist/ exists but files are old (may be stale)");
+          environment = "production";
+          confidence = "medium";
+          suggestedOutputDir = "dist";
+        }
+      } else {
+        indicators.push("dist/ directory exists but is empty");
+      }
+    } catch {
+    }
+  }
+  if (existsSync(buildDir) && environment === "local") {
+    try {
+      const buildFiles = glob.sync("**/*.{js,css,html}", {
+        cwd: buildDir,
+        absolute: false,
+        maxDepth: 2
+      });
+      if (buildFiles.length > 0) {
+        indicators.push(`build/ directory exists with ${buildFiles.length} built files`);
+        environment = "production";
+        confidence = "high";
+        suggestedOutputDir = "build";
+      }
+    } catch {
+    }
+  }
+  if ((framework === "React" || framework === "Vite") && existsSync(distDir)) {
+    if (environment === "local") {
+      environment = "production";
+      confidence = "medium";
+      suggestedOutputDir = "dist";
+      indicators.push("React/Vite project with dist/ directory (likely production)");
+    }
+  }
+  if (environment === "local" && indicators.length === 0) {
+    indicators.push("No production build detected, using local mode");
+    confidence = "medium";
+    suggestedOutputDir = "public";
+  }
+  return {
+    environment,
+    confidence,
+    indicators,
+    suggestedOutputDir
+  };
+}
+
+export {
+  detectEnvironment
+};

package/dist/environment-detector-7AC3BRDB.js

@@ -0,0 +1,6 @@
+import {
+  detectEnvironment
+} from "./chunk-Y2M6FMPR.js";
+export {
+  detectEnvironment
+};

package/dist/environment-detector-SV7DMPWT.js

@@ -0,0 +1,6 @@
+import {
+  detectEnvironment
+} from "./chunk-35T5DDFX.js";
+export {
+  detectEnvironment
+};