Progressive web app

[bastyen]

• [x] Pouvoir utiliser le widget dans un site en mode PWA
• [x] Gérer les contenus hors ligne
• [x] Ajout d'un bouton pour choisir les contenus à mettre en hors ligne
• [x] Documenter la procédure pour mettre en oeuvre un site PWA incluant un widget

[camillemonchicourt]

Pour les cartes hors-ligne il est prévu d'utiliser Leaflet-offline pour les tuiles (comme dans Geotrek-rando-v3). Pour l'instant, tout passe par les services workers. Il reste à créer un bouton afin de mettre en hors-ligne explicitement une randonnée et les données globales de l'application comme la carte générale.

A voir si il faut limiter et définir les niveaux de zoom d'une randonnée embarqués hors-ligne, comme sur Geotrek-rando-v3.

[babastienne]

• [x] Styler le bouton téléchargement / supprimer
• [x] Prendre en compte l'itinérance
• [x] Terminer de gérer les POIs / éléments associés
• [x] Ajouter un loader de téléchargement
• [x] Avoir un logo / une pastille pour distinguer les objets téléchargés ou non
• [x] Tester sous plusieurs navigateurs / téléphones pour vérifier que ça fonctionne correctement
• [x] Pouvoir switcher entre les contenus accessibles hors ligne ou non
• [ ] Avoir un bouton 'mettre à jour le contenu" lorsque les données téléchargées ne sont plus à jour (Priorité moindre)

[bruhnild]

Recette suite à mes tests du hors ligne

• [x] L'icone du menu des couches supplémentaires n'apparait pas systématiquement

• [x] L'icone des lieux de renseignement (couche supplémentaire) sur la carte n'est pas téléchargée

• [ ] Utiliser la même icone de téléchargement que celle présente dans la fiche détail

• [x] Le switch en ligne / hors ligne ne fonctionne pas très bien (comportement aléatoire difficile à reproduire)

• [x] Augmenter le niveau de zoom max (17) pour télécharger les tuiles de la carte globale

A faire si tu as du temps (bonus)

• [ ] Mettre une barre de progression au téléchargement de l'application (utile pour les itinérances par exemple)
• [ ] Lorsque l'utilisateur veut accéder à un contenu non disponible, afficher un message (ex : Ce contenu n'est pas disponible hors ligne)
• [ ] Lorsque l'utilisateur veut accéder à la liste des randonnées en hors ligne et qu'il n'y a pas de donnée, afficher un message (ex : Aucune donnée téléchargée ou problème de connexion)
• [x] Ne pas afficher une image cassée dans la liste lorsqu'une randonnée n'a pas été téléchargée (utiliser l'image par défaut)

[bruhnild]

Recette n°2 suite à mes tests du hors ligne

• [ ] Ne pas afficher la météo en mode hors ligne (préconisé dans rando)
• [x] Il y a toujours un problème avec le switch (il s'inverse lorsqu'il y a une erreur ou qu'on fait un retour en arrière depuis un contenu/évènement touristique
• [ ] Certains pictos ne sont pas gérés (exemple sur descente ou Règlementation)

A faire si tu as du temps (bonus)

• [ ] Remplacer les fonts par de vraies images (exemple dénivelé) pour éviter que les labels ne s'affichent avant le picto

[camillemonchicourt]

Quelques éléments techniques et fonctionnels sur les développements réalisés sur la partie OFFLINE :

• Quand on configure le widget, on peut activer le paramètre enableOffline (défini à false) par défaut
• Dans ce cas, on a alors un bouton "Rendre disponible hors ligne" sur la fiche de chaque rando :
• Avec un message de confirmation :
• Et la possibilité de le supprimer du mode Hors-ligne ensuite si on le souhaite :
• Si on revient sur la liste des randos, les randos disponibles hors-ligne sont identifiées par une petite coche sur leur photo, et un filtre permet de limiter la liste aux randos disponibles hors-ligne :
• Pour les contenus hors-ligne on n'embarque pas toutes les photos, mais seulement une photo par rando, une photo par POI, une photo par service... pour ne pas trop alourdir le téléchargement hors-ligne
• Au premier téléchargement d'une rando, on télécharge les tuiles globales à échelle large (zooms 0 à 11), ainsi que les tuiles autour de la rando à des zooms plus précis (12 à 16). Ces niveaux de zoom sont paramétrables :

  globalTilesMinZoomOffline = 0;
  globalTilesMaxZoomOffline = 11;
  trekTilesMinZoomOffline = 12;
  trekTilesMaxZoomOffline = 16;

• Les tuiles carto téléchargées ont une taille d'environ 0.5 Mo pour zoom 15, et environ 1 Mo pour zoom 16

Au niveau technique :

• Utiliser au minimum le service worker pour stocker des données
• Le service worker s'occupe de stocker les fichiers nécessaires minimum à l'ouverture de l'application
• Ces données d'une rando téléchargées à la demande sont stockées dans indexdb (ce qu'utilise le plugin leaflet.offline qu'on utilise, utilisé aussi dans Geotrek-rando-v3)