Documentation en ligne

Progressive Web App (PWA)

La Progressive Web App désigne une application mobile qui se différencie des applications dites « natives » par le fait qu'elle n'est pas présente dans les stores d'Apple et Google. Il s'agit d'une fonctionnalité native de Publik qui permet un usage mobile optimisé. Elle nécessite que le thème graphique utilisé soit compatible avec cet usage mobile et il est même préférable que ce thème ait été pensé dans une logique « mobile first », afin d'optimiser les ressorts de l'applications.
Entre autres avantages, elle permet :

  • Aucun code spécifique à maintenir/développer alors que les applications natives nécessitent le développement et la maintenance d'une version différente pour chaque store
  • l'ajout d’une icône sur l’écran d’accueil du smartphone, à la première consultation
  • la présentation d’un écran de lancement lorsque la PWA est lancée
  • un look and feel « appli like », notamment avec suppression de la barre de navigation
  • l‘affichage d’un menu mobile
  • les pages accessibles en mode déconnecté
  • les notifications sur mobile (nécessite que l'usager les active explicitement)
  • Utilisation du GPS et de l'appareil photo du mobile

Activation du mode PWA de Publik

L’activation du mode PWA doit être faite par un administrateur technique.
La vérification de l’activation de la PWA se fait par la présence de «  Application Mobile (PWA) » dans le menu burger du portail usager.

Pour que le mode PWA soit actif, le premier paramétrage à faire est d’ajouter l’icône de l’application.

Navigation

La PWA peut intégrer un menu dédié. La configuration du menu est faite en ajoutant, dans l'écran de configuration,  des entrées à la navigation. Chaque entrée doit définir : un libellé, un lien interne ou url externe, et éventuellement des options graphiques :

  • Afficher le nombre de notifications : Si des notifications sont envoyées au demandeur, un indicateur du nombre de notifications apparaît sur l’entrée
  • Utiliser le nom de l’usager comme libellé : lorsque l’usager est connecté, le libellé de l’entrée sera remplacé par le nom de l’usager

Paramétrage

Les paramètres de la PWA permettent de:

  • choisir le nom de l’application ou nom de l’icône sur l’écran d’accueil
  • définir l’icône
  • définir le texte d’information si non-connecté
  • d’inclure un bouton pour ressayer la connexion
  • d’activer la possibilité de s’abonner à des notifications « push »

L'icône doit être carrée et faire au moins 512x512 pixels.

Si l'option "Icône Adaptative" est activée, celle-ci pourra être recadrée de différente manières selon les appareils. Dans ce cas, une zone sûre, garantie visible, est définie. Elle correspond à un cercle centré au milieu de l'icône et de rayon égal aux 40% de la taille de l'icône. Tout ce qui en sort sera potentiellement rogné, en fonction l'appareil sur lequel elle est affichée.

Différences de comportement

La PWA peut avoir des comportements ou fonctionnalités un peu différents en fonction des smartphones utilisés. Google, Microsoft, Apple, et autres ont une intégration hétérogéne des fonctionnalités PWA.

Ajout de l'icone sur IOS

IOS ne propose pas encore l'ajout automatique de l'icone de la PWA sur le bureau d'accueil. L'opération doit être faite manuellement par:

  1. Touchez  en bas de l’écran.

  2. Appuyez « Sur l’écran d’accueil ». Il est possible que vous deviez balayer vers la gauche pour trouver le bouton « Sur l’écran d’accueil ». L'icône apparait sur l'écran d'accueil, comme une application mobile.

 

 

 

 

 

 

 

Dernière mise à jour le 12 août 2022 11:09 — Éditer