Manage progressive webapp

[alexisbohns]

• HTTPS
• Manifest
• Service worker

Manifest.json

<link rel="manifest" href="/manifest.json">

{
  "name": "Melogram",
  "short_name": "Melogram",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#231818",
  "theme_color": "#231818",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

⚠️ iOS, toutes les tailles ne sont pas prises → 192x192 et 512x512

Service Worker

Un service worker est requis pour que Safari considère le site comme “installable”.

// public/sw.js
self.addEventListener("install", event => {
  console.log("Service worker installed");
});

Côté client

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js")
    .then(() => console.log("SW registered"));
}

Meta tags spécifiques iOS

Apple n’utilise pas manifest.json pour certains paramètres.
Il faut les ajouter en :

⚠️ Contrairement à Android, iOS demande apple-touch-icon → sinon l'icône d’app est un screenshot flou

🔹 5. Installation sur iPhone

Il n’y a pas de bouton “Installer” automatique dans Safari iOS.
L’utilisateur doit :
1. Ouvrir ton site dans Safari
2. Cliquer sur Partager (le carré avec flèche)
3. Choisir “Ajouter à l’écran d’accueil”