Pwa iOS : créer et installer une application web progressive sur iPhone

Une application web qui s’installe sur l’écran d’accueil, s’ouvre sans barre d’adresse et peut fonctionner hors ligne : voilà la promesse d’une PWA. Sur iPhone, le principe est séduisant, mais il vient avec une particularité bien connue des développeurs : iOS a ses propres règles du jeu. Bonne nouvelle, elles sont aujourd’hui assez claires pour construire une expérience convaincante, à condition de savoir où regarder.

Voici comment créer une PWA compatible avec iOS, l’installer sur un iPhone et éviter les pièges les plus courants. Pas besoin de transformer votre site en fusée spatiale : quelques briques web bien choisies font déjà beaucoup.

Une PWA, c’est quoi exactement ?

Une Progressive Web App est un site web conçu pour offrir certaines caractéristiques d’une application mobile. Elle reste accessible par une adresse web, mais peut aussi être ajoutée à l’écran d’accueil. Selon sa conception et les fonctions prises en charge par le navigateur, elle peut s’ouvrir en plein écran, fonctionner hors ligne ou envoyer des notifications.

La PWA n’est donc pas une application iOS classique publiée sur l’App Store. Elle repose sur des technologies web, notamment HTML, CSS et JavaScript. Imaginez un site qui aurait préparé un petit sac pour sortir de chez lui : son icône, son nom, son apparence et quelques ressources utiles l’accompagnent sur l’écran d’accueil.

Sur iPhone, les principales briques sont prises en charge par Safari, mais pas toujours de la même façon que sur Android. C’est précisément ce qui rend les tests sur appareil réel indispensables.

Les éléments nécessaires pour une PWA sur iPhone

Une PWA repose généralement sur trois éléments : un site servi en HTTPS, un manifeste décrivant l’application et un service worker chargé de certaines tâches en arrière-plan, comme la mise en cache. Pour une expérience iOS soignée, on ajoute aussi des métadonnées spécifiques à Apple et des icônes adaptées.

HTTPS : le site doit être servi de manière sécurisée. En développement local, les environnements locaux sont généralement traités comme des contextes sécurisés, mais votre site en production doit disposer d’un certificat valide.
Un manifeste web : il indique notamment le nom de l’application, son icône, sa couleur de thème et son mode d’affichage.
Un service worker : ce script peut intercepter des requêtes et mettre en cache des ressources pour améliorer la résilience ou permettre certains usages hors ligne.
Des métadonnées iOS : elles aident Safari à afficher correctement l’application lorsqu’elle est ajoutée à l’écran d’accueil.

Une précision utile : le manifeste seul ne rend pas votre site hors ligne. C’est le service worker, associé à une stratégie de cache réfléchie, qui peut fournir cette capacité. Mettre en cache toute la planète sans réfléchir n’est pas une stratégie ; c’est une façon élégante de servir des informations périmées.

Lire No code app builders : comparatif des meilleurs outils pour créer une application sans coder

Créer le manifeste web

Le manifeste est un fichier JSON, souvent nommé manifest.webmanifest. Il décrit la façon dont la PWA doit se présenter quand elle est lancée depuis l’écran d’accueil.

{  "name": "Mon application",  "short_name": "Mon app",  "start_url": "/",  "scope": "/",  "display": "standalone",  "background_color": "#ffffff",  "theme_color": "#2457d6",  "icons": [    {      "src": "/icons/icon-192.png",      "sizes": "192x192",      "type": "image/png"    },    {      "src": "/icons/icon-512.png",      "sizes": "512x512",      "type": "image/png"    }  ]}

La propriété display: "standalone" demande une ouverture sans l’interface habituelle du navigateur. start_url définit la page de départ et scope délimite les pages considérées comme faisant partie de l’application. Gardez ces valeurs cohérentes avec l’emplacement réel de votre site : un manifeste qui promet la mauvaise porte d’entrée n’est pas très accueillant.

Reliez ensuite le fichier dans l’en-tête HTML :

<link rel="manifest" href="/manifest.webmanifest"><meta name="theme-color" content="#2457d6">

Prévoyez des icônes nettes et reconnaissables, y compris à petite taille. Une icône complexe qui ressemble à une photo de groupe prise de loin n’aidera personne à retrouver votre application.

Ajouter les métadonnées utiles à iOS

Le manifeste est important, mais pour soigner le comportement sur iPhone, ajoutez aussi les balises Apple dans la section <head> :

<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="Mon app"><meta name="apple-mobile-web-app-status-bar-style" content="default"><link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">

apple-mobile-web-app-capable indique que le site peut être lancé en mode application après son ajout à l’écran d’accueil. apple-touch-icon fournit l’icône utilisée par iOS. Préparez une image adaptée, généralement au format PNG, plutôt que de compter sur une icône générique recadrée à la volée.

Les détails d’affichage peuvent varier selon les versions d’iOS. Vérifiez notamment la barre d’état, les zones de sécurité et l’apparence de l’écran de lancement sur plusieurs modèles si votre public utilise des iPhone variés.

Installer une PWA sur iPhone

Sur iPhone, l’installation se fait depuis Safari. Il n’y a pas de bouton universel « Installer » intégré à la page comme dans certains navigateurs Android. Pour ajouter votre PWA à l’écran d’accueil :

Ouvrez le site dans Safari.
Appuyez sur le bouton de partage, représenté par un carré avec une flèche vers le haut.
Faites défiler les options, puis choisissez Sur l’écran d’accueil.
Vérifiez le nom proposé et appuyez sur Ajouter.

L’icône apparaît alors sur l’écran d’accueil. En l’ouvrant, l’utilisateur accède à la version web de l’application. Si le manifeste et les métadonnées sont correctement configurés, l’expérience peut s’afficher en mode autonome, sans la barre d’adresse classique.

Lire alternative wordpress : quelle plateforme de blogging utiliser en 2023

Cette étape mérite d’être expliquée dans votre interface. Un petit message « Pour installer l’application : Partager, puis Sur l’écran d’accueil » peut éviter bien des abandons. Sur iOS, les pages ouvertes dans certains navigateurs tiers ou dans des navigateurs intégrés à une autre application n’offrent pas toujours le même parcours. Pour une installation fiable, indiquez clairement à l’utilisateur qu’il doit ouvrir le site dans Safari.

Le service worker et le mode hors ligne

Le service worker est un fichier JavaScript enregistré par le navigateur. Il peut intercepter des requêtes et servir des ressources mises en cache, par exemple une page d’accueil, une feuille de style ou une icône. Il doit être servi en HTTPS et se trouve généralement à la racine du site pour contrôler les pages de son périmètre.

Un enregistrement minimal ressemble à ceci :

if ("serviceWorker" in navigator) {  window.addEventListener("load", () => {    navigator.serviceWorker.register("/service-worker.js")      .catch((error) => console.error("Échec du service worker :", error));  });}

La stratégie de cache dépend de votre application. Pour des fichiers statiques qui changent rarement, le cache peut accélérer le chargement. Pour des données personnelles ou très récentes, mieux vaut définir précisément ce qui peut être conservé et quand le rafraîchir. Un écran hors ligne utile peut afficher les dernières informations disponibles et expliquer clairement que la connexion est absente.

Testez aussi les mises à jour : un ancien cache peut laisser certains utilisateurs avec une version périmée. Versionner les ressources et prévoir une stratégie de renouvellement évite le classique « chez moi, pourtant, ça marche » — phrase qui a déjà fait perdre beaucoup trop de cafés aux équipes techniques.

Notifications push : ce qu’il faut savoir

Les notifications web push sont disponibles pour les applications web ajoutées à l’écran d’accueil sur les versions récentes d’iOS, à partir d’iOS 16.4. Le contexte compte : l’utilisateur doit avoir ajouté le site à son écran d’accueil et accepter explicitement la demande de notification. Il ne suffit donc pas d’ouvrir une page dans Safari pour déclencher une permission comme par magie.

Pour les mettre en place, il faut notamment un service worker, une infrastructure de push côté serveur et une demande d’autorisation déclenchée à la suite d’une action compréhensible de l’utilisateur. Évitez de demander l’autorisation dès la première seconde. Proposez plutôt les notifications au moment où elles ont du sens : par exemple, après l’inscription à une alerte de disponibilité.

Lire Créer une application android avec python : méthodes, outils et conseils pratiques

Et surtout, prévoyez une vraie valeur d’usage. Une notification pour annoncer que votre application existe encore n’est pas une fonctionnalité ; c’est une invitation à la désactivation.

Les limites à anticiper

Une PWA peut couvrir beaucoup de besoins, mais elle ne remplace pas automatiquement une application native. L’accès à certaines fonctions de l’appareil et le comportement de certaines API peuvent varier selon iOS et Safari. Si votre produit dépend d’une capacité matérielle précise, vérifiez sa disponibilité réelle sur les versions ciblées avant de bâtir toute l’architecture autour.

Autre différence importante : iOS ne propose pas le même événement d’installation beforeinstallprompt que certains navigateurs Chromium. Votre site ne peut donc pas toujours afficher un bouton qui déclenche directement l’ajout à l’écran d’accueil. Il faut guider l’utilisateur avec des instructions adaptées.

Enfin, ne confondez pas « installé » et « disponible quoi qu’il arrive ». Les données stockées dans le navigateur restent soumises aux règles de stockage et de gestion de l’appareil. Si certaines informations sont critiques, prévoyez une synchronisation côté serveur et une gestion explicite des erreurs de connexion.

Tester avant de publier

Une PWA peut sembler impeccable dans l’inspecteur de votre ordinateur et se comporter autrement sur un iPhone. Testez le parcours complet sur un appareil réel : ouverture dans Safari, ajout à l’écran d’accueil, lancement depuis l’icône, navigation hors ligne, retour en ligne et mise à jour après une nouvelle version.

Vérifiez que le manifeste est accessible et que les icônes s’affichent correctement.
Contrôlez que le service worker s’enregistre et qu’il met uniquement en cache les ressources prévues.
Testez les petits écrans, les différentes orientations et les zones de sécurité autour de l’encoche.
Essayez le site avec une connexion lente ou interrompue, pas seulement avec le Wi-Fi idéal du bureau.
Si vous utilisez les notifications, vérifiez le parcours d’autorisation sur une version d’iOS compatible.

Une PWA iOS bien conçue n’est pas une application native déguisée. C’est une application web qui assume ses forces : une URL partageable, des mises à jour rapides et une installation légère. En soignant le manifeste, les icônes, le service worker et les explications d’installation, vous pouvez proposer une expérience mobile solide sans demander à vos utilisateurs de faire un détour par l’App Store. Et parfois, ne pas ajouter une étape de plus, c’est déjà une belle amélioration produit.