Prérequis pour rendre l'application vMap fonctionnelle en hors ligne

Pour fonctionner en version hors ligne et ainsi avoir la possibilité d'ouvrir l'application web vMap sans avoir de connexion internet, il est nécessaire que certains fichiers de l'application soient gardés en cache par votre soft (téléphone portable, tablette). Pour cela, plusieurs sollutions s'offre à l'administrateur :

• Créer une application mobile

• Créer une PWA (Progressive Web App ou Application Web Progressive)

Afin d'apporter la meilleure expérience utilisateur et administrateur, Veremes a choisit de travailler avec la PWA pour combiner le meilleur des sites web et des applications mobiles. Cette fonctionnalité permet de générer un fichier APK, ce qui vous permettra d'installer et d'utiliser vMap sous forme d'application sur votre téléphone ou tablette, même lorsque vous êtes en déplacement.

Une Progressive Web App (PWA) est une application web qui offre une expérience utilisateur semblable à celle des applications natives. Elle est rapide, fonctionne hors ligne et peut être installée sur l'écran d'accueil de votre appareil. Voici comment vous pouvez créer votre PWA à partir de votre application.

Caractéristiques principales d'une PWA

• Installation facile : Il n'y a pas besoin de passer par un app store. Elle peut être ajoutée directement depuis le navigateur de votre navigateur.

• Fonctionne hors ligne : Même sans connexion Internet, il est possible d'utiliser certaines parties de l'application.

Besoins principaux d'une PWA

• Publication à une adresse URL publique : Pour que votre PWA soit accessible à tous les utilisateurs, elle doit être hébergée sur une adresse URL publique. Cela garantit que toute personne disposant du lien peut accéder à l'application sans restrictions.

• Manifeste web complet : Un manifeste web est un fichier JSON qui fournit des informations essentielles sur l'application, telles que son nom, ses icônes, sa couleur de thème et son point d'entrée. Un manifeste complet est crucial pour permettre à la PWA de fonctionner correctement et d'être installée sur les appareils des utilisateurs. De plus amples explications sont fournies ci-dessous concernant ce fichier.

• Sécurisation par HTTPS : La sécurité est primordiale pour les applications web modernes. Votre PWA doit être servie via HTTPS, garantissant ainsi que toutes les communications entre le serveur et le client sont chiffrées et sécurisées. Cela renforce la confiance des utilisateurs et protège contre les attaques potentielles.

Cette liste permet de s'assurer que votre application respecte les standards PWA requis pour offrir une expérience utilisateur optimale et sécurisée.

---

Créer un fichier manifeste.

À quoi sert le manifest.

Un manifeste d’application web (souvent abrégé en manifeste web, ou simplement manifeste) est un fichier qui indique au navigateur que votre application web est une application web progressive et qu’elle peut être installée sur votre appareil portable.

Pensez au manifest comme à la carte d'identité d'une application. Tout comme une carte d'identité contient des informations importantes sur une personne (nom, date de naissance, photo, etc.), le manifest contient des informations essentielles sur l'application.

Le manifeste contient également d’autres informations sur votre application, telles que le titre, les couleurs du thème et la description. Votre manifeste peut même activer certaines fonctionnalités de l’application, telles que les raccourcis et les modes d’affichage.

Le manifest permet aux utilisateurs d'ajouter l'application à leur écran d'accueil avec une icône personnalisée, un nom clair et une expérience utilisateur similaire à celle d'une application native. Il contribue à rendre l'application plus intégrée et accessible sur les appareils mobiles et permet de bénéficier pleinement des fonctionnalités des PWA, telles que l'installation facile, les notifications push et le fonctionnement hors ligne.

En résumé, le manifest est un élément clé qui aide à transformer une simple application web en une expérience utilisateur riche et immersive, comparable à une application native.

Comment générer le manifest.

Dans le contexte des applications web progressives (PWA), le manifest joue un rôle crucial. C'est un fichier de configuration en JSON (JavaScript Object Notation) qui fournit des informations importantes sur l'application pour le navigateur et les appareils mobiles. Certaines informations sont obligatoires à fournir lors de la création du fichier.

1. Noms :

   • name : Le nom complet de l'application, tel qu'il apparaîtra à l'utilisateur (ex : "Super Application de Recettes").

   • short_name : Un nom plus court pour l'icône de l'application sur l'écran d'accueil (ex : "Recettes").

2. Icônes :

   • icons : Une liste d'icônes de différentes tailles que l'application utilisera sur l'écran d'accueil et ailleurs. Ces icônes permettent de reconnaître facilement l'application.

3. Page de démarrage :

   • start_url : L'URL qui s'ouvre lorsque l'application est lancée à partir de l'écran d'accueil. Cela peut être la page d'accueil de l'application ou une page spécifique.

4. Affichage :

   • display : Indique comment l'application doit être affichée. Les options incluent fullscreen (plein écran), standalone (comme une application native sans barre d'adresse), minimal-ui (avec un minimum d'éléments de l'interface utilisateur du navigateur), et browser (comme un site web normal).

5. Orientation :

   • orientation : La préférence d'orientation pour l'application, comme portrait (vertical) ou landscape (horizontal).

6. Couleurs :

   • background_color : La couleur de fond de l'écran de démarrage de l'application.

   • theme_color : La couleur de thème de l'application, utilisée dans la barre de titre et d'autres éléments de l'interface utilisateur.

Pour plus de détails et d'informations sur les attributs, consultez le lien suivant :

Customisation supplémentaire du manifest

Pour obtenir plus d'information sur le document manifest voici une documentation complète :

Documentation générale du manifest

Exemple d'un fichier JSON manifest :

{
  "name": "vMap",
  "short_name": "vMap",
  "theme_color": "#1fa6bf",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ],
  "id": "vmap",
  "description": "Vmap",
  "display_override": [
    "window-controls-overlay"
  ],
  "orientation": "natural"
}

Déployer le manifest.

Pour déployer le fichier manifest.webmanifest que vous venez de créer :

• Dans un premier temps le fichier va devoir être déposé sur le serveur, généralement dans le répertoire : /var/www/vmap/client/dist/vitis

• Ensuite, pour que celui-ci soit actif et utilisé, vous devez l'inclure dans le fichier HTML principal de votre application. Ce fichier HTML est généralement la page d'accueil et/ou le point d'entrée de votre application web, souvent nommé index.html.

Ce fichier se trouve dans le même répertoire dans lequel le fichier manifest a était déposé.

Ajoutez le lien vers le manifest dans le <head> de votre fichier index.html principal, utilisez la balise ci-dessous pour indiquer le chemin vers votre fichier manifest.json.

<link rel="manifest" href="manifest.webmanifest">

• Enfin, les fichiers utilisés pour produire une ou des icônes seront à déposer à l'endroit spécifier dans le fichier manifest, si on reprend notre exemple les fichiers vont être déposés à cet endroit : /var/www/vmap/client/dist/vitis/assets/icons

Création de l'application.

Mise en garde

Notez que cette application ne sera pas une véritable application téléchargeable sur Google Play Store ou Apple App Store.

Astuces

Lorsque vous accédez au site web pour la première fois depuis votre téléphone ou tablette, une pop-up peu apparaître vous proposant d'installer directement l'application sur votre appareil. Si aucune action par rapport à cette notification n'est entrepris de votre part, cela sera considéré comme un refus de l'installé de la part de votre navigateur et il faudra alors suivre les procédures ci-dessous pour l'installer.

Celle-ci peut apparaitre à nouveau si toutes les données en caches, cookies ou autre données stockées par votre navigateur ou en local sont supprimées de votre téléphone.

Comment générer l'application.

Il existe plusieurs méthodes pour générer une application vMap pour les utilisateurs, afin qu'ils puissent l'installer sur leurs appareils mobiles et y accéder en ligne ou hors ligne. Voici différentes méthodes et les étapes nécessaires pour créer votre application vMap.

1- Depuis le téléphone (ce que nous préconisons).

Dans le navigateur Google, si les étapes décrites précédemment sont respectées, vous pourrez effectuer une installation directe de l'application sur votre téléphone.

Tapez sur les trois points verticaux en haut à droite pour ouvrir le menu, vous pouvez accéder à la fonctionnalité "Ajouter à l'écran d'accueil".

Cela va vous proposer deux options :

Ici, celle qui nous intéresse, c'est "Installer".

Cette option va procéder de manière autonome à l'installation de l'application sur votre téléphone ou tablette. Vous retrouverez ainsi une nouvelle application parmi toutes celles déjà présentes sur votre appareil.

Cette méthode part du postulat que votre fichier manifest correspond parfaitement à ce que vous souhaitez obtenir. Vous ne pourrez pas effectuer de modification sur ce fichier lors de la génération, si vous souhaitez pouvoir effectuer des modifications à la volée veuillez vous referez au point ci-dessous.

2- Depuis le site web officiel

Si l'administrateur veut pouvoir modifier son manifest à la volée et le garder avec le minimum d'information requise sur le serveur, puis effectuer des modifications lors de la génération de l'application que l'utilisateur installera ultérieurement, il peut utiliser le site suivant : PWA Builder.

Renseigner l'URL de base qui vous permet d'accéder à l'application généralement : https://{nom_de_dommaine}/{allias_application}/

Cliquez sur le bouton, "Start", à partir de là il va lire fichier manifest disponible sur le serveur.

Après lecture du fichier, vous obtiendrez l'interface suivante.

L'onglet Action Items vous permets de savoir s'il y a des erreurs ou des manques par rapport à votre application pour utiliser le PWA.

Également en dessous de cet onglet se trouve un autre onglet important et qui vous permet de modifier, votre fichier manifest à la volée.

Une fois votre configuration terminée il ne vous reste plus qu'à cliquer sur Package For Stores.

Obtention d'un dossier zippé

Le dossier zippé contient plusieurs fichiers, mais celui qui nous intéresse est le fichier xxxx.apk.

Transférez ce fichier sur votre appareil (via USB ou un service de transfert de fichiers tiers).

Récupérez ce fichier sur votre appareil, puis accédez-y via l'explorateur de fichiers.

Cliquez sur le fichier ; il vous proposera de l'installer.

Attention

Attention : comme il s'agit d'une application qui ne provient pas d'un app store officiel, votre téléphone vous demandera une confirmation, car la source est inconnue. L'application provenant de votre administrateur, vous pouvez faire confiance et activer l'installation d'applications de sources inconnues. Cette option pourra être désactivée une fois l'installation effectuée. Cependant, si un jour votre administrateur produit une nouvelle version de l'application vMap, il faudra réactiver cette option pour procéder à la mise à jour sur votre téléphone.

Une fois tout cela fait, votre appareil procédera à l'installation de vMap. Vous pourrez ensuite accéder à l'application et vérifier que les options du manifeste sont correctes. Sinon, vous pouvez recommencer la procédure en effectuant des modifications sur le manifeste, soit à la volée dans l'onglet correspondant sur PWA Builder, soit directement sur le serveur.

Ouvrir l'application une première fois

Une fois l'une des procédures ci-dessus réalisées vous obtiendrez le résultat ci-dessous (Le logo et/ou le nom peuvent changer en fonction du manifest que vous avez mis en place).

Vous pouvez ouvrir celle ci et vous accèderez à votre application vmap sans problème.

Test de l'application en hors ligne

Pour vérifier que l'application fonctionne en hors ligne rien de plus simple, connectez-vous sur l'appli, zoomer sur votre carte à différentes échelles. Cela va charger dans le cache et en mémoire des dalles de votre carte.

Désactiver votre connexion internet, vous pourrez ainsi naviguer sur les dalles chargées lorsque vous étiez connecté à internet.

Vous êtes désormais dans la capacité d'utiliser le véritable mode hors ligne de vMap, lisez les pages suivante pour plus de détails sur ce mode-là.