Site web installable : Android, iOS, Windows

23 July 2025

HTML

image de l'article

Adaptez votre site web pour Android, iOS et Windows
Rendez votre site installable sur tous les appareils ! Grâce aux technologies modernes comme les Progressive Web Apps (PWA), transformez facilement votre site en application accessible sur smartphone, tablette ou ordinateur. Simplifiez l'expérience utilisateur tout en restant visible sur toutes les plateformes.




1. Rendre le site responsive


  • Utilise HTML5 et CSS3 avec des unités relatives (em, %, vh, etc.).

  • Intègre le meta viewport dans ton <head>

    • <meta name="viewport" content="width=device-width, initial-scale=1">



    2. Ajouter un fichier manifest.json


    Ce fichier décrit ton application (nom, icône, couleurs, etc.).

    Exemple :
    {
    
  "name": "Mon Super Site",
    
  "short_name": "SuperSite",
    
  "start_url": "/",
    
  "display": "standalone",
    
  "background_color": "#ffffff",
    
  "theme_color": "#007bff",
    
  "icons": [
    
    {
    
      "src": "/icons/icon-192.png",
    
      "sizes": "192x192",
    
      "type": "image/png"
    
    },
    
    {
    
      "src": "/icons/icon-512.png",
    
      "sizes": "512x512",
    
      "type": "image/png"
    
    }
    
  ]
    
}


    Puis ajoute ce lien dans ton <head>
    <link rel="manifest" href="/manifest.json">



    3. Le site doit être en HTTPS


    Les PWA nécessitent obligatoirement un site sécurisé par HTTPS.
    Si ce n’est pas encore le cas, utilise un certificat Let’s Encrypt (gratuit).

    Tuto ici Certificat Let’s Encrypt



    4. Ajouter un Service Worker


    C’est le cœur de la PWA, qui permet le fonctionnement hors-ligne et l’installation.

    Exemple de fichier sw.js :

    self.addEventListener("install", e => {
    
  e.waitUntil(
    
    caches.open("static").then(cache => {
    
      return cache.addAll(["./", "./index.html", "./style.css"]);
    
    })
    
  );
    
});
    

    
self.addEventListener("fetch", e => {
    
  e.respondWith(
    
    caches.match(e.request).then(response => {
    
      return response || fetch(e.request);
    
    })
    
  );
    
});

    Et dans ton index.html, ajoute ce script :
    <script>

  if ("serviceWorker" in navigator) {

    navigator.serviceWorker.register("/sw.js");

  }

</script>



    5. Teste l'installation