Application mobile (PWA)
Rendez votre site accessible au travers d'une application mobile et bénéficiez des fonctionnalités natives des smartphones.
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 calquée sur la visualisation adaptative de votre plateforme (Responsive Web Design). Ainsi votre application web devient également une application mobile avec l'usage des fonctions natives des smartphones, notamment les notifications push.
Vous pourrez donc proposer à vos utilisateurs d'installer l'application depuis leurs navigateurs sur leurs supports mobile (smartphone, tablette).
L'usage de ce module nécessite évidemment que votre plateforme ait une version mobile et soit donc accessible sur smartphone et tablette.
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)
-
Personnalisation du format de l'app (icône, titre, description, etc.) et possibilité de déploiement sur les magasins d'application (App Store, Play Store...)
-
Gestion d'un mode hors ligne
- Possibilité de pousser les notifications sur les différents systèmes d'exploitations (Android, Windows, IOS/macOS)
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 |
Name |
Nom de l'application affiché dans l'application lorsqu'elle est lancée. |
| Short name | 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. |
| 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 |
| Display Mode | 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. |
| Background color | Permet de dfinir une couleur de fond spécifique dans votre application. |
| Theme color | Permet de définir la couleur d'en-tête de votre application. |
| App icons | Permet de personnaliser l'icône utilisée pour votre application. |
| App icon size | Permet de définir les différentes tailles d'icône gérées par votre application. |
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 personnaliser le contenu affiché dans l'application lorsqu'elle est ouverte en mode hors ligne.
Corrections
- Correction du chargement du manifest lorsque des droits spécifiques sont positionnés sur le contenu
Evolutions
- Ajout d'un champ URL racine pour déclarer des web-manifest sur des URL différentes de l'URL du site (multi-domaine)
Evolutions
- Support de liens d'installation PWA inpage
