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, pensée pour permettre 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é créé dans une logique « mobile first ». Les principales caractéristiques de la PWA :

  • 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
La PWA peut avoir des fonctionnalités ou des comportements un peu différents en fonction des smartphones utilisés. Google, Microsoft, Apple, et autres ont une intégration variable dans le temps des fonctionnalités PWA.

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.

Menu de 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, une icône (de l'ordre de 20 pixels de haut dans le cas des intégrations natives) et éventuellement des options graphiques :

  • « Afficher le nombre de notifications » : si une des entrée pointe vers une page contenant une « Cellule Notification », lorsque des notifications sont envoyées au demandeur, un indicateur du nombre de notifications apparaît sur l’entrée concerné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

Notifications « WebPush »

Les notifications « WebPush » sont des notifications que l'usager va recevoir sur son téléphone même s'il n'a pas lancé l'application. C'est un moyen très intéressant d'informer l'usager : la notification est gratuite comme les courriels et presque aussi visible qu'un SMS. Elle est soumise à deux impératifs pour fonctionner correctement :
  • Dans l'écran de configuration de la PWA, l'administrateur fonctionnel doit cocher la case « Activer la possibilité de s’abonner à des notifications « Push » ».
  • L'usager doit explicitement autoriser les notifications dans l'application via un bouton dédié, c'est différent de ce que propose les applications natives. Il est donc nécessaire de l'informer qu'il doit activer ces notifications s'il souhaite en recevoir.
Les notifications sont supportées par tous les navigateurs sauf, provisoirement, Safari (MacOS et iOS). Apple a rejoint tardivement le reste des troupes et permettra l'utilisation des notifications début 2023 : https://pushalert.co/blog/safari-web-push-api-support-browser-notifications/).

Les notifications « WebPush » sont envoyées avec une simple action de notification dans les workflows : dès que la fonctionnalité est activée, l'action de notification envoie à la fois une notification sur le tableau de bord de l'usager et une notification « WebPush ».

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. L'icône doit être carrée et faire au moins 512x512 pixels. « Icône Adaptative » permet d'activer et visualiser (cercle en pointillé sur l'icône) la zone centrale importante qui sera utilisée par certains navigateurs.
  • définir le texte d’information si non-connecté
  • définir un menu mobile flottant
  • d’inclure un bouton pour ressayer la connexion
  • d’activer la possibilité de s’abonner à des notifications « push »

Ajout de l'icône sur le bureau IOS

IOS ne propose pas encore l'ajout automatique de l'icône 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 apparaît sur l'écran d'accueil, comme une application mobile.

 

 

 

 

 

 

 

Dernière mise à jour le 10 février 2023 01:10 — Éditer