Désormais, les sites WordPress sont responsives (ajustement automatique à la taille de l’écran de l’utilisateur : ordinateur, tablette ou smartphone) et sont de plus en plus consultés à partir d’appareils mobiles.
Il devient donc intéressant d’offrir aux utilisateurs la possibilité de consulter un site sur leur mobile comme s’ils utilisaient une appli native. C’est possible en créant une PWA (Progressive web app ou application web progressive en français) qui permet de consulter son site comme si c’était une application mobile.
Une PWA est donc une application Web universelle (indépendante des stores, fiable, rapide, légère) offrant l’expérience d’une application native.
Etape 1 : Installation d’une extension
Pour transformer votre site en application mobile, nous allons utiliser l’extension PWA for WP & AMP. C’est une extension fremium dont la version gratuite permet de créer une PWA.
Pour installer cette extension :
- allez le tableau de bord de WordPress puis extension puis ajouter
- faite la recherche PWA for WP puis cliquez sur Installer et enfin Activer
A savoir : Vous pouvez mettre cette extension en français en installant par FTP le contenu du fichier Zip ci-dessous dans le dossier « wp-content/languages/plugins » de votre site :
Etape 2 : Paramétrage de l’extension
Une fois l'extension installée, dans le menu de votre tableau de bord, vous cliquez sur PWA puis Paramètres (ou Settings si vous n'avez pas la version française). Vous arrivez alors sur le Tableau de bord de PWA. Si tout est correct, vous devez avoir un écran identique à celui ci-dessous (ne rien changer).
Vous allez ensuite à l'onglet Setup.
Dans l'onglet Setup, vous allez saisir les principales informations de votre application :
- Nom de l'application : vous saisissez le nom complet de votre application.
- Nom court de l'application : c'est le nom qui va s’afficher sous l’icône de votre application sur votre mobile.
- Description de l'application : une courte description de votre application
- Icône de l'application : PNG en 192x192
- Icône de l'écran de démarrage de l'application : PNG en 512x512
- Copie d'écran de votre application : PNG en 512x512
- Page hors ligne : vous pouvez laisser celle indiquée par défaut
- Page 404 : si vous en avez une
- Page de démarrage : vous pouvez laisser celle indiquée par défaut
- Orientation : Auto
- Display : Standalone
- iOS APP Status Bar : Défaut
Une fois ces réglages réalisés, vous cliquer sur Design en haut à gauche à côté de General. Là, vous allez pouvoir changer les couleurs par défaut de votre application.
Vous allez ensuite à l'onglet Features.
Dans l'onglet Features, vous avez plusieurs options accessibles dans cette version gratuite. Vous activez l'option Bannière personnalisée d'ajout à l'accueil puis vous cliquez sur l'icône paramètres à côté du bouton d'activation.
Dans ces paramètres, vous allez pouvoir personnaliser ce qui va s’afficher à l’écran quand des utilisateurs viendront sur votre site pour leur dire d’installer l’application.
Vous cochez la 1ére et 3ème case, modifiez le contenu de Title et Button Text et enfin les couleurs si vous voulez les mettre en accord avec celles de votre site.
Vous allez ensuite à l'onglet Tools.
Dans l'onglet Tools, vous cliquez sur Compatibility puis vous cochez OneSignal.
Vous allez ensuite à l'onglet Advance.
Dans l'onglet Advance, vous cochez la case Compatibilité CDN et vous laissez tout le reste par défaut. Je vous conseille de consulter la documentation (accessible à l'onglet Aide) avant de modifier les autres paramètres.
Vous allez ensuite à l'onglet Aide car l'onglet Premium Features est pour la version Pro.
Les options de cet onglet sont réservés à la version Pro (version payante).
C'est dans cet onglet que vous pourrez :
- consulter la documentation (tout en anglais mais si vous la consultez avec Chrome, elle sera automatiquement traduite en français)
- poser une question au support technique si vous n'avez pas trouvé la réponse dans la documentation.
Etape 3 : Installation de l’appli sur smartphone
Votre application est maintenant configurée.
Sur votre smartphone, vous allez sur votre site avec votre navigateur. Une fois sur la page d’accueil de votre site, une bannière doit s’afficher en bas de l’écran (cf. image ci-contre à gauche).
Cette bannière vous invite à ajouter votre site comme une appli. Pour cela, vous cliquez sur le bouton Ajouter.
Vous cliquez sur Ajouter et une copie d’écran de votre site s’affiche avec le bouton Installer. Vous n’avez plus qu’à cliquer sur Installer. L’appli s’installe et ajoute l’icône sur votre écran.
Vous pouvez désormais consulter votre site comme une appli.
