Application PWA
Rendez votre site accessible au travers d'application(s) PWA sur différents supports : mobile, tablette et desktop.
Les bénéfices
Ce module apporte le support des applications web progressives, ou PWA (Progessive Web Applications) en anglais, dans JPlatform.
Il vous permet de générer une application (mobile, tablette ou desktop) calquée sur la visualisation adaptative de votre plateforme (Responsive Web Design). Ainsi votre site devient également une application à part entière permettant la consultation, la gestion des notifications (notifications push) et bien plus encore.
L'application PWA est installable directement depuis les navigateurs à l'aide d'un lien de téléchargement ou déclenchable directement par les navigateurs. Vous pouvez également déployer l'application via les différents magasins d'application (Apple, Google, Microsoft...).
Créer autant d'applications que vous le souhaitez
Il est également possible de déployer plusieurs applications pour une même plateforme : une application différente par service, par région ou encore pour des fonctionnalités dédiées (espace adhérent, page d'inscription, etc.).
Utilisation des notifications push
Les notifications push permettent la réception des notifications liées à votre plateforme au travers de votre application PWA.
Ainsi après activation du service, les utilisateurs peuvent recevoir les notifications sur smartphone, tablette, mais aussi sur ordinateur (Windows 10, macOS/iOS, Android et tous les navigateurs).
Mode hors ligne
Pour chaque application créée, vous pourrez définir un contenu accessible en mode hors ligne.
Profitez de ces applications sur vos différents supports
Que vous soyez sur smartphone, tablette ou desktop, vous pouvez installer ces applications où cela vous semble cohérent.
Vous pourrez par exemple avoir votre plateforme intranet ou extranet accessible directement depuis une application sur votre ordinateur sans l'avoir ouverte quelque part dans vos différents onglets de navigateur.
Optimisation sur Smartphone
Si vous souhaitez utiliser cette application sur des supports mobile et que vous avez refondu graphiquement la plateforme Jalios, il est nécessaire que l'intégration graphique soit responsive.
Notez que d'autres solutions permettent un usage de votre plateforme sur mobile (Module JMobile, application native dédié, RWD) dont le choix est dépendant de vos besoins.
Pour vous aider dans ce choix, n'hésitez pas à consulter notre article décrivant ces différentes solutions dans les grandes lignes.
Ci-dessous un rapide comparatif des usages mobile entre une application PWA et l'application JMobile vous permettant de mieux comprendre la différence entre ces 2 modules :
En somme, le module PWA sera plus adapté pour de la simple consultation, peu importe le support utilisé, avec la prise en compte de votre personnalisation graphique. Il permettra en complément de recevoir les notifications de la platforme sur n'importe quel support et système d'exploitation (notifications windows, IOS, Android...) à partir du moment où le système d'exploitation installé autorise les service workers (le support des notifications push étant récent sur IOS, nous vous conseillons de surveiller de près l'actualité).
JMobile, quant à lui répondra mieux à une utilisation intensive du mobile, notamment pour de la contribution et de la collaboration.
Attention, certaines fonctions Jalios standards sont pour le moment limitées pour un usage dédié mobile sur une application PWA.
Afin de pallier ces limitations, nous fournissons (inclus dans l'acquisition de ce module) un module RWD optimisant la consultation sur mobile de votre plateforme Jalios.
Notez que ce module influt sur les gabarits d'affichage standards Jalios. Si vous avez personnalisé votre plateforme (intégration graphique non responsive), une revue approfondie sera éventuellement nécessaire.
Les fonctionnalités
- Déployer des applications mobiles pour tout le site ou différentes pages du site
- Transmettre les notifications de la plateforme via les supports mobiles des utilisateurs (notifications push)
- Possibilité de pousser les notifications sur les différents systèmes d'exploitations (Android, Windows, IOS/macOS) et navigateurs
- Personnalisation du format des applications (icône, titre, description) et possibilité de les déployer sur les différents magasins d'application (App Store, Play Store...)
- Gestion d'un mode hors ligne
Captures d'écran
Les clients aiment
Informations détaillées
Prérequis techniques
Installation et paramétrage du module
Ajouter ce module via le gestionnaire de modules depuis l’administration technique et redémarrer JPlatform.
Une fois le module installé, assurez-vous que les propriétés du module sont correctement paramétrées pour votre plateforme.
Activation du type de contenu Web Manifest PWA
Le module contient un nouveau type de contenu "Web Manifest PWA" à activer dans votre plateforme.
Type de contenu Web Manifest PWA
Ce contenu permet de cibler une page / rubrique cible pour le téléchargement d'une application. Chaque Manifest créé va donc permettre le téléchargement d'une application dédiée à cette page (définie par une catégorie cible).
Les applications sont téléchargeables sur les pages concernées et installables directement depuis les navigateurs.
Ce contenu pemet également de définir le type d'ouverture et les informations de vos applications.
Libellé du champ |
Description |
Nom |
Nom de l'application affiché dans l'application lorsqu'elle est lancée. |
| Nom court | Nom de l'application affiché sur l'écran d'accueil, dans le lanceur d'applications ou à tout autre endroit où l'espace est limité. |
| Description | Permet de décrire la finalité de votre application. Dans Chrome, la description ne doit pas dépasser 300 caractères sur toutes les plates-formes. Si la description est plus longue, le navigateur la tronque avec des points de suspension. Sur Android, la description ne doit pas dépasser sept lignes de texte. |
| Catégorie | Permet de cibler une rubrique de votre application qui sera encapsuler cette application. Chaque manifeste peut être positionné sur une catégorie du site et le service worker dans toutes les pages front-office où la catégorie courante correspond à cette catégorie ou une sous-catégorie. Vous pouvez ainsi générer différentes applications selon chaque page de votre site. Si vous souhaitez utiliser une application globale pour votre site, ne sélectionnez pas de catégorie mais déclarez le dans les propriétés du module de sorte que le manifeste et le service worker soient ajoutés sur toutes les pages front-office du site. |
| URL d'accueil | Spécifie l'URL qui se charge lorsque l'utilisateur lance une application à partir d'un périphérique. Si elle est donnée comme une URL relative, l'URL de base sera celle du manifeste. Nous recommandons d'utiliser une URL absolue. |
| Scope | Le scope de votre application est l'ensemble des URLs que le navigateur considère comme faisant partie de votre application. Il contrôle la structure d'URL qui inclut tous les points d'entrée et de sortie de l'application. Le navigateur l'utilise pour déterminer à quel moment l'utilisateur a quitté l'application. Attention : Si l'utilisateur clique sur un lien dans votre application qui sort de ce scope, le lien s'ouvre et s'affiche dans la fenêtre de la PWA existante. Si vous souhaitez que le lien s'ouvre dans un onglet de navigateur, ajoutez |
| Mode d'affichage | Vous pouvez personnaliser l'interface utilisateur du navigateur à afficher au lancement de votre application. Par exemple, vous pouvez masquer la barre d'adresse et les éléments de l'interface utilisateur du navigateur. Il est même possible de lancer des jeux en plein écran. |
| Orientation | Permet de définir l'orientation souhaitée de l'application. Si vous ne sélectionnez rien, l'application s'adaptera à l'orientation de l'écran. |
| Couleur de fond | Permet de dfinir une couleur de fond spécifique dans votre application. |
| Couleur du thème | Permet de définir la couleur d'en-tête de votre application. |
| Image | Image source d'au moins 144x144px utlisée pour générer un ensemble d'images qui peuvent servir d'icônes pour l'application dans différents contextes. Par exemple, elles peuvent être utilisées pour réprésenter l'application web dans une liste d'autres applications, ou pour intégrer l'application web dans les tâches d'un OS et/ou dans les préférences du système. |
| Taille des images | Taille des images proposées par l'application (eg. toutes les tailles inféreures ou égales à l'image source de l'application). |
| Screenshots (mobiles) | Définit une série de captures d'écran destinées à mettre en valeur l'application lors d'une installation sur appareils mobiles. Ces images sont destinées à être utilisées par les magasins d'applications Web progressives. Les captures doivent toutes êtres exactement de la même taille. |
Notifications Push
Les notifications Push fonctionnent :
- A partir de la version 16.4 de IOS
- Sur la majorité des navigateurs pour Android et Windows (https://caniuse.com/push-api)
L'activation des notifications sur IOS nécessite une activation manuelle de l'utilisateur sur son smartphone. Un lien d'activation devra lui être transmis ou accessible depuis votre plateforme afin qu'il puisse l'activer.
Publication sur les magasins d'application
Pour publier une application sur les magasins d'application, veuillez suivre les procédures indiquée par chacun des magasins d'application (Apple Store, Play Store, Microsoft Store...).
Voici un site qui peut vous aider dans cette démarche : https://www.pwabuilder.com/
Informations techniques complémentaires
Ce module utilise la librairie Workbox développée par Google.
Votre plateforme doit proposer une version adaptée sur mobile (Responsive Web Design).
- Description Permet de cibler le contenu Web Manifest PWA dans le cas d'une application qui concerne tout un site.
- Description Permet de définir la valeur par défaut pour l'option de persistance dans les formulaires d'identification lors d'un accès depuis un mobile.
- Description Permet de personnaliser le contenu affiché dans l'application lorsqu'elle est ouverte en mode hors ligne.
Evolutions
- Prise en charge des applications liées
- Distinction mobile/desktop sur l'aide à l'activation des notifications
- Présence du bandeau d'installation surgissant selon l'os/client
- Bandeau d'installation activable/désactivable par PWA
- Amélioration du principe de calcul des URLs des notifications
Corrections
- Meilleur support des liens des notifications (PublicLink, ...)
- Exclus les images générées des sources packagées
Evolutions
- Page d'aide à l'installation selon os/client
- Ajout d'un bandeau d'installation surgissant et refusable
- Statut abonnement push en topbar (option)
- Mise en valeur alerte ouverte depuis notification
Corrections
- Evite le clignotement du statut abonnement push en initialisant la page avec le dernier statut connu
Evolutions
- Statut abonnement push immédiatement à jour (Désabonnement hors parcours : 410 GONE, Désinscrire tous les clients, ...)
- Statut abonnement push visible en BO
- Support des screenshots bureau & mobile
Évolutions
- Réabonnement automatique à l'expiration de la subscription (subscriptionchange)
- Suppression de l'abonnement push si expiré (lors de l'envoi d'une notification)
- Support des screenshots
- Icônes spécifiques IOS et Microsoft
- Authentification persistante par défaut sur mobile
Évolution
- Mise à jour librairie Workbox vers 7.1.0
Correction
- Correction chemin de page hors ligne
Évolution
- Ajout d'un champt "URL d'accueil" au manifest pour permettre de spécifié la page d'accueil de l'application
Corrections
- Problème de gestion de cache du webmanifest
- Résolution d'un problème d'unicité lors de la déclaration de plusieurs manifest
- Champs requis incorrecte du contenu Webmanifest
Correction
- Résout un problème d'accès au manifest sur les sites privés
Évolutions
- Initialisation d'une PWA principale au premier démarrage
- Mise en place d'un cache serveur pour le manifest
- Ajout d'une notification immédiate à l'activation PUSH (si aucun canal PUSH actif)
Corrections
- Résout un problème de compatibilité du service worker avec Edge
- Ajout des infos d'aide sur les champs du contenu Webmanifest
- Suppression des sauts de lignes inutiles du manifest
- Libellés des champs du contenu Webmanifest en Fr
Correction
- Désinscription unitaire des subscriptions
Évolutions
- Intégration du Système d'abonnement / désabonnement dans la cloche
- Icône de l'auteur dans les messages (si dispo)
Corrections
- Suppression des espaces en surnombre dans les notifications
Évolutions
- Ajout des notifications push aux canaux des notifications (ex-alertes)
- Service d'inscriptions des clients aux notifications webpush
Correction
- Correction du chargement du manifest lorsque des droits spécifiques sont positionnés sur le contenu
Evolution
- Ajout d'un champ URL racine pour déclarer des web-manifest sur des URL différentes de l'URL du site (multi-domaine)
Initialisation du module
