Configurer une application Web progressive

Une application Web progressive (PWA) est une application Web qui offre une expérience similaire à celle d’une application sur appareils mobiles. Elle permet aux utilisateurs d’ajouter le Web Shop directement à leur écran d’accueil, offrant ainsi un accès rapide sans avoir à ouvrir un navigateur et à naviguer manuellement vers le magasin.

Pour les plateformes avec des restrictions de redirection, la PWA propose un moyen plus direct et pratique d’accéder au magasin, réduisant les étapes inutiles et favorisant l’engagement. En simplifiant l’accès, la PWA améliore la fidélisation des utilisateurs et incite à des achats plus fréquents.

Flux utilisateur pour l'installation de la PWA

• Sur les appareils iOS
• Sur les appareils Android

1. L’utilisateur ouvre le Web Shop sur son appareil mobile.

2. Web Shop affiche une bannière invitant à installer l’application en bas de l’écran.

3. L’utilisateur clique sur Install.

4. Web Shop affiche les instructions d’installation de la PWA.

5. L’utilisateur suit les instructions. La PWA est alors ajoutée à l’écran d’accueil de l’appareil de l’utilisateur.

1. L’utilisateur ouvre le Web Shop sur son appareil mobile.

2. Web Shop affiche une bannière invitant à installer l’application en bas de l’écran.

3. L’utilisateur clique sur Install.

4. L’utilisateur confirme l’installation dans la fenêtre de dialogue du système.

5. La PWA s’installe automatiquement et apparaît sur l’écran d’accueil ainsi que dans le tiroir des applications.

Comment configurer

1. Dans votre projet, dans le Compte éditeur, accédez à la section Site Builder.
2. Dans le volet de votre Web Shop, cliquez sur Open Site Builder.
3. Accédez à Web App settings.
4. Activez l’option Enable Web App.

5. Personnalisez la bannière invitant à installer l’application (facultatif) :
   • Modifiez le texte de l’en-tête de la bannière ;
   • Modifiez le texte secondaire de la bannière ;
   • Définissez un arrière-plan personnalisé ;
   • Changez le style du bouton.

6. Personnalisez les instructions d’installation (facultatif).

7. Configurez l’apparence de la PWA sur l’appareil de l’utilisateur :
   1. Spécifiez le nom de votre PWA. Elle sera affichée sur l’écran d’accueil ou dans le tiroir d’applications de l’appareil de l’utilisateur ;
   2. Téléchargez une icône PWA.

Note

Si la PWA utilise la même icône que votre jeu, nous vous recommandons d’activer l’option Show icon frame. Cela ajoutera un cadre autour de l’icône du magasin, ce qui permettra aux utilisateurs de le distinguer plus facilement du jeu.

8. Pour appliquer les modifications, publiez votre site.