Mettre en place Progressive Web App (PWA)

Donnez à vos visiteurs un accès rapide et sans faille à votre site internet depuis des appareils mobiles, même quand ils sont hors ligne. 

Progressive Web Apps (PWA) est une technologie qui fait le lien entre les sites internet traditionnels et les applications mobiles. Ajouter le site internet à l’écran d’accueil de l’appareil mobile d’un visiteur lui permet d’interagir avec le site en hors ligne et sans l’interface du navigateur de l’utilisateur (la barre d’adresse) visible pour une expérience d’application mobile presque native, en plein écran.

Les visiteurs n’ont pas besoin d’installer ou de télécharger quoi que ce soit sur leur appareil mobile pour pouvoir utiliser cette fonctionnalité.

Mettre en place PWA dans l’Éditeur

Mettez en place PWA depuis l’Éditeur en cliquant sur les trois points dans l’angle en haut à droite de l’interface et sélectionnez Paramètres.

Sélectionnez Progressive Web App (PWA) dans le menu de gauche.

Le principal bénéfice de PWA est la possibilité pour les visiteurs de naviguer sur votre site, même quand ils n’ont pas accès à internet. Si vous cochez Activer la mise en cache hors ligne du site internet, le contenu de votre site internet sera stocké localement dans la mémoire du dispositif mobile de votre visiteur, lui permettant de naviguer sur votre site tout en étant hors ligne. 

Cocher Activer le prompteur pour les visiteurs 'Ajouter à l’écran d’accueil'encouragera le visiteur à ajouter votre site internet à son écran d’accueil quand il navigue dessus depuis un appareil mobile. Une barre apparaîtra sur son dispositif mobile quand il naviguera sur votre site, l’incitant à l’ajouter à son écran d’accueil. Veuillez noter que cette fonctionnalité n’est pour l’instant pas pris en charge par iOS.

Si le visiteur confirme, votre site internet sera mis en signet sur l’écran d’accueil de son appareil, aux côtés de ses autres applications. 

Si vous laissez cette option décochée, aucun prompteur ne s’affichera quand les visiteurs navigueront sur votre site, mais ils auront toujours la possibilité d’ajouter votre site internet sur leur écran d’accueil en l’épinglant manuellement via le navigateur du dispositif mobile.   

Personnaliser la fenêtre d’attente

La fenêtre d’attente est un élément graphique qui s’affiche entre le moment où un utilisateur clique sur une application et le moment où elle a fini de charger. Les écrans d’attente ne sont pour le moment pas pris en charge sur iOS. Vous pouvez personnaliser l’apparence de cette "fenêtre de chargement" en saisissant un nom (maximum 60 caractères, espaces compris), en ajoutant un logo au format .png (taille minimum de 512 x 512 pixels), et en choisissant une couleur d’arrière-plan. Le nom apparaîtra sous votre logo dans une couleur de police blanche.

Personnaliser le titre de l’application sur l’écran d’accueil

Vous pouvez définir un titre pour votre site internet, et donc déterminer comment il doit apparaître une fois qu’il est ajouté en tant qu’application sur l’écran d’accueil de l’utilisateur. Gardez en tête le fait que le titre doit faire au maximum 12 caractères, espaces inclus. Le logo utilisé pour afficher l’application sur l’écran d’accueil est le même que pour la fenêtre d’attente.

Petites choses à savoir quand on utilise PWA

Veuillez prendre note de ce qui suit si vous mettez en place PWA:

• Votre site internet doit avoir un certificat SSL (HTTPS) ajouté pour que PWA fonctionne.
• Tous les systèmes d’exploitation et navigateurs mobiles ne prennent pas en charge la totalité des fonctionnalités PWA. Assurez-vous de vérifier la compatibilité dans les documentations techniques des systèmes d’exploitation ou navigateurs spécifiques. 
• Seules les pages qui ont été visitées en naviguant sur le site internet en ligne seront mises en cache et rendues disponibles à la navigation hors ligne. Si, par exemple, un site internet contient les pages Accueil, À propos et Contact et que seule la page d’Accueil a été visitée en ligne, les pages À propos et Contact n’auront pas été mise en cache et seront inaccessibles hors ligne avec PWA quand on cliquera dessus. Aussi, le dispositif mobile ouvrira ces pages dans le navigateur et y accèdera en tant que pages web classiques.
• Les appareils qui fonctionnent avec Chrome pour Android n’afficheront la fenêtre d’attente que si votre logo mesure au minimum 512 x 512 pixels et a été chargé au format .png.
• Les notifications push aux utilisateurs ne sont pas prises en charge dans la version actuelle de PWA.
• PWA ne fonctionne pas sur les pages protégées par un mot de passe.