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
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.
Dans les dernières versions, un web manifest est généré automatiquement à l'installation du module (lors du redémarrage).
Type de contenu Web Manifest PWA
Le module contient un nouveau type de contenu "Web Manifest PWA" à activer dans votre plateforme.
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 |
Fournit un nom pour l'application, lisible pour un humain, car il est destiné à être affiché à l'utilisateur, par exemple parmi une liste d'autres applications ou comme étiquette d'une icône. |
| Nom court | Un nom court pour l'application web, compréhensible pour un humain. Il est destiné à être utilisé quand il n'y a pas suffisamment de place disponible pour afficher le nom complet de l'application. |
| Description | Fournit une description générale de ce que fait l'application web. 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 | Restreint l'application PWA à une branche de catégories. Permet de proposer plusieurs applications PWA et de proposer à l'utilisateur la PWA correspondant à la navigation courante (ex: PWA rubique A, PWA rubrique B). 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 | Definit le "scope" de navigation du contexte applicatif de cette application web. Ceci limite essentiellement les pages Web pouvant être visualisées pendant que le manifeste est appliqué. Si l'utilisateur navigue en dehors du "scope" de l'application, il revient à une page Web normale. Si le "scope" est une URL relative, l'URL de base est celle du manifeste. |
| Mode d'affichage | Définit le mode d'affichage préféré du développeur pour l'application web.
Les valeurs valides sont :
|
| Orientation | Définit l'orientation par défaut pour tout le premier niveau d'applications web browsing contexts. L'orientation peut être l'une des valeurs suivantes:
|
| Couleur de fond | Définit la couleur de fond attendue pour l'application web. Cette valeur répète ce qui est déjà disponible dans la feuille de style de l'application, mais peut être utilisée par le navigateur pour dessiner le fond de l'application web quand le manifeste est disponible avant que la feuille de style ne soit chargée. Cela permet une transition douce pendant le lancement de l'application web et le chargement du contenu de l'application. |
| Couleur du thème | Définit la couleur du thème par défaut pour une application. Cela affecte parfois la façon dont l'application est affichée par le système d'exploitation (par exemple, sur le commutateur de tâches d'Android, la couleur du thème entoure l'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). |
| Bannière d'installation | Propose l'installation de l'application au travers d'un bandeau affiché par dessus la page. Si l'installation est déclinée via la fermeture du bandeau, celui-ci ne sera plus reproposé durant la session. |
| Screenshots (bureau) | Définit une série de captures d'écran destinées à mettre en valeur l'application lors d'une installation sur ordinateurs de bureau. 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. |
| 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. |
| Préférer applications liées | Dans le cas ou les deux installations sont possibles (PWA et application native), le navigateur ouvrira directement l'invite d'installation de l'application native si ce paramètre est actif. Attention, l'application native doit obligatoirement être accessible au visiteur à défaut aucune invite d'installation se sera proposée. |
| Applications natives (platformes) | Par exemple une application Android native est disponible via le Google Play Store. |
| Applications natives (id) | Identifiant de l'application sur la plate-forme native (ex: app.cosi.www) |
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.
Pour la majorité des terminaux, il n'est pas nécessaire d'installer l'application pour le bon fonctionnement des notifications push. Nonobstant, il existe une limitation sur iOS (et macOs) pour lequel les notifications push ne sont disponibles que sur Safari et il est nécessaire d'installer l'application dans l'écran d'accueil.
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 personnaliser la couleur de fond de la modale d'installation de l'application sur iOS.
- 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.
- Description Si Non, l'icône d'activation des notifications push est affiché dans l'onglet notification. Si Oui, elle est déplacée en topbar.
Corrections
- Paramétrage du scope par défaut et clarification dans la documentation module
Corrections
- Accessibilité du manisfest des sites privés (cross-origin)
Corrections
- Retrait de l'affichage de la popup sur l'impression pdf des JGuide
Evolutions
- Gestion du texte mobile/desktop de la modale d'activation des notifications
- Blocage de l'affichage de la popup sur mobile
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
