Progressive Web App

{
  "name": "Mon Application",
  "short_name": "MonApp",          // nom sur l'écran d'accueil
  "description": "Description de l'app",
  "start_url": "/",                   // page ouverte au lancement
  "scope": "/",
  "display": "standalone",          // sans barre de navigateur
  "orientation": "portrait",

  "theme_color": "#7c3aed",         // couleur barre de statut
  "background_color": "#f0f4f8", // écran de démarrage

  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png",
      "purpose": "any maskable" }  // maskable = icône adaptative Android
  ],

  "screenshots": [               // miniatures dans le prompt d'installation
    { "src": "/screens/desktop.png", "sizes": "1280x800", "form_factor": "wide" },
    { "src": "/screens/mobile.png",  "sizes": "390x844",  "form_factor": "narrow" }
  ],

  "shortcuts": [               // raccourcis depuis l'icône (appui long Android)
    { "name": "Nouveau document", "url": "/new" }
  ],

  "share_target": {           // recevoir des fichiers partagés depuis d'autres apps
    "action": "/share", "method": "POST",
    "enctype": "multipart/form-data",
    "params": { "files": [{ "name": "fichiers", "accept": ["image/*"] }] }
  }
}

<head>
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#7c3aed">
  <!-- iOS (Safari ne lit pas le manifest pour ces tags) -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
</head>

const CACHE_NAME = 'monapp-v1'
const ASSETS = ['/', '/index.html', '/app.css', '/app.js', '/icons/icon-192.png']

// Installation : mise en cache des assets statiques
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
  )
})

// Activation : nettoyage des anciens caches
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k))
    ))
  )
})

// Fetch : Cache-First avec fallback réseau
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      return cached || fetch(event.request).then(response => {
        const clone = response.clone()
        caches.open(CACHE_NAME).then(c => c.put(event.request, clone))
        return response
      })
    }).catch(() => caches.match('/offline.html'))
  )
})

let installPrompt = null

// Capturer l'événement avant qu'il s'affiche automatiquement
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault()
  installPrompt = e
  document.getElementById('btn-install').style.display = 'block'
})

// Déclencher manuellement depuis un bouton "Installer l'app"
document.getElementById('btn-install').addEventListener('click', async () => {
  if (!installPrompt) return
  installPrompt.prompt()
  const { outcome } = await installPrompt.userChoice
  console.log(outcome === 'accepted' ? 'App installée !' : 'Refusé')
  installPrompt = null
})