Offline support for large amount of searches

[sraikimaxime]

Problem

The offline behavior of the web application is handled by the progressive web app engine "service worker" cache. We provided limits to the service worker concerning the number of pages it had to store in cache (see cache.js file).

We observed that making a search operation was triggering several requests and therefore occupying a significant space on the cache (can sometimes reach up to 3MB), the natural limit imposed by apple for pwa cache is 50MB meaning we should have an acceptable behavior for the canonical use we anticipated.

Stil, this behavior is not scalable and if future developers start adding requests during other operations we could see the offline behavior starting to get flaky (randomly working).

Proposed solutions

Solutions that could secure this behavior would be:

• Reduce the number of peripheral calls made during the search
• Use the local storage to store resources that specifically need to be accessed offline

[camillemonchicourt]

See caching documentation for more details: https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/docs/knowledge/caching.md

The offline strategy is actually a first basic step.
When browsing some pages, contents are kept in local cache with a certain limit, to be available offline.

But the user don't know which contents are available offline or not.
It is actually limited to 32 objects (pages).
The offline maps are actually limited to 256 entries which can be reached fast with map tiles.
Another actual problem is that the search is based on several API calls which will not work anymore when offline.

In a second version, it would deserve to go further.
I would rather add a clear action to download some objects manually.
And when being offline, I would desactivate the search and just list objects that are available offline.

En français : Fonctionnement offline - Pouvoir télécharger une rando, ses médias et sa carto de manière explicite et la retrouver facilement

[camillemonchicourt]

On part donc sur le fait d'avoir un contenu OFFLINE en mobile beaucoup plus explicite, se rapprochant de ce qui est fait sur Geotrek-mobile.

Quand on est sur la fiche d'un contenu, on peut le télécharger pour en disposer en offline :

On peut ensuite accéder à la liste de ses contenus téléchargés, consultables sans réseau :

On ne peut pas lancer une recherche OFFLINE car sans réseau on n'accède pas l'API de Geotrek-admin.

Si je n'ai pas de réseau (ou si je n'en ai pas), je ne peux pas non plus accéder à "Mes favoris" ?

[camillemonchicourt]

Voici les zip des tuiles de quelques randos utilisées par Geotrek-mobile :

• Un fichier global avec l'ensemble du territoire à échelle très large pour avoir une base : https://geotrek-admin.ecrins-parcnational.fr/www/test-tiles/global.zip
• Et quelques randos : https://geotrek-admin.ecrins-parcnational.fr/www/test-tiles/955585.zip
• https://geotrek-admin.ecrins-parcnational.fr/www/test-tiles/959466.zip
• https://geotrek-admin.ecrins-parcnational.fr/www/test-tiles/956786.zip
• https://geotrek-admin.ecrins-parcnational.fr/www/test-tiles/955589.zip

Ainsi qu'un aperçu du fonctionnement de notre application Geotrek-mobile actuelle :
geotrek-rando-v3-exemples-mobiles.pdf

Et voici le fonctionnement offline de l'application Geotrek-mobile actuelle :

Pour commencer, un développement a été réalisé pour pouvoir générer les tuiles des fonds de carte autour d’une randonnée.

• Le téléchargement initial de l’appli est volontairement le plus léger possible (sans données intégrées).
• Au premier lancement de l’application, le contenu minimal est téléchargé et stocké sur le mobile (textes et localisation des randonnées et patrimoines + 3 premiers niveaux de zoom du fond carto). Ainsi ces contenus sont ensuite consultables même si l’appareil n’est pas connecté à internet.
• Si l’appareil est connecté à internet, il accède aux contenus complémentaires par le réseau (photos des randonnées et patrimoines + fonds de carte précis).
• Il peut alors choisir de télécharger sur son mobile ces contenus complémentaires (photos et carto précise) randonnée par randonnée pour pouvoir y accéder ensuite sans réseau internet.

[Sylchauf]

Choix technologique retenu:

• Amélioration du cache next-pwa déjà existant avec la possibilité de mettre en cache des page manuellement
• Utilisation de l'api CacheStorage pour manipuler les pages existantes en cache
• Mise en place de clé-valeur dans le local storage pour stocker les metadata liées à ces pages (id, nom, image, teaser)
• Utilisation de leaflet-offline pour la mise en cache de la map

[camillemonchicourt]

Première PR intégrant les développements du nouveau mode offline : https://github.com/GeotrekCE/Geotrek-rando-v3/pull/490/files
Testable sur : https://gtr3demo.ecrins-parcnational.fr/trek/2-Col-de-Font-Froide

[camillemonchicourt]

Le mode OFFLINE a été revu dans la version 3.4.0.
Le design est un peu différent de celui imaginé, pour rendre encore plus visible le fait que l'on peut Embarquer un contenu hors-ligne :

En version mobile, un message indique la possibilité d'embarquer le contenu :

Une fois téléchargée, la fiche de l'objet est accessible même sans connexion internet (texte, photo et carte avec fonds embarqués aux niveaux de zoom définis en paramètre). En mode offline, on n'affiche qu'une seule photo par objet (le slideshow est désactivé) :

En recliquant sur le bouton, on peut supprimer le contenu du téléphone.

Les contenus hors-ligne sont accessibles depuis le MENU. Quand on est déconnecté et que l'on clique sur une page qui n'est pas accessible, une page indiquant qu'elle n'est pas disponible s'affiche, avec un bouton permettant d'accéder directement à la liste des contenus disponibles hors-ligne (https://gtr3demo.ecrins-parcnational.fr/_offline) :

[camillemonchicourt]

On avait prévu dans la 3.4.0 de pouvoir utiliser des tuiles différentes pour la version OFFLINE, en pouvant spécifier un paramètre de tuiles dédié aux tuiles offline (mapClassicLayerUrlOffline)
Mais actuellement le plugin utilisé leaflet-offline ne peut pas changer dynamiquement de fond de carte utilisé, il prend celui affiché au moment où l'utilisateur demande de télécharger les tuiles en offline.
Il a donc fallu supprimer ce paramètre dans la 3.5.0 car il ne fonctionnait pas : 7b1d2e8

D'autres petites corrections ont été réalisés dans la version 3.5.0 à venir, ainsi que l'extension du fonctionnement OFFLINE aux sites et parcours Outdoor.

[camillemonchicourt]

En complément les galeries photo ont été désactivés dans la 3.5.0 quand on n'a pas de réseau internet, car les photos des galeries ne sont pas préchargées, et donc ne s'affichaient pas quand on n'a pas de réseau.
Seul la première galerie s'affiche et les boutons des slideshows sont masqués.

Améliorations envisagées du mode OFFLINE :

• Creuser la possibilité d'avoir un fond différent pour les fonds offline (nécessiterait certainement une PR sur Leaflet-offline
• Afficher espace utilisé / disponible sur la page listant les contenus hors-ligne
• Ajouter un bouton pour supprimer TOUS les contenus offline
• Pré-charger les pages statiques

[AudreyRemy]

Bonjour,
Que ce soit avec les applications Mozilla ou Chrome j'ai bien réussi à ajouter un contenu hors ligne mais lorsque je suis hors ligne et que je tente d'ouvrir la fiche via le menu hors ligne, j'obtiens une page "Aucune connexion internet". Y a-t-il un paramétrage à faire ?
Merci et bonne journée.

[camillemonchicourt]

Non la fonctionnalité est active par défaut.
Par contre il est possible qu'il faille que le Geotrek-rando-v3 soit en HTTPS.
As-tu une URL pour que je puisse tester chez toi ?

[AudreyRemy]

geotrek-rando-test[.]le64[.]fr (comme il s'agit d'un portail test, pour éviter que les moteurs de recherches indexent ce site de test j'ai modifié l'url)

il y a encore beaucoup de modifications à faire mais c'est juste pour essayer la fonctionnalité.
Merci @camillemonchicourt

[camillemonchicourt]

OK, toujours intéressant de voir des nouveaux Geotrek-rando-v3.
Tu pourrais déjà le mettre à jour en lançant simplement la commande docker-compose pull && docker-compose down && docker-compose up -d depuis le dossier de ton Geotrek-rando-v3, car il y a eu différentes évolutions et corrections depuis la version que tu as.

Sinon j'ai testé le offline sur ton serveur de test et ça fonctionne bien.
J'ai juste un soucis au premier chargement de la page "Contenus hors-ligne", qu'il faut rafraichir, à creuser. Mais ce n'est pas le soucis que tu as remonté il me semble.

[AudreyRemy]

@camillemonchicourt merci pour tes conseils la commande a été lancée. Penses-tu qu'il serait intéressant d’avoir une tâche planifiée quotidienne qui lance cette commande ?

[camillemonchicourt]

On peut automatiser les mises à jour, mais je trouve ça un peu risqué.
Il vaut mieux le faire en connaissance de cause selon moi en sachant en quelle version on est actuellement, et toutes les nouveautés développées avant de faire une mise à jour.
Pour cela, voir https://github.com/GeotrekCE/Geotrek-rando-v3/releases.
Sinon vous pouvez avoir des nouvelles fonctionnalités qui apparaissent sans que vous sachiez quand ni comment.
Il est aussi possible qu'une nouvelle fonctionnalité ajoutée dans une nouvelle version, nécessite de la paramétrer pour l'adapter à votre contexte, donc je conseille plutôt de faire les mises à jour manuellement, en regardant bien avant toutes les nouveautés des versions entre sa version installée et la dernière version.

Il est par contre possible de s'abonner à un Github pour être notifié des tickets, pull requests et nouvelles versions. Et il est possible d'indiquer d'être notifié seulement en cas de nouvelle version (release). En haut à droite dans WATCHING.

Concernant le fait de ne pas indexer dans les moteurs de recherche, il y a mieux, il y a un paramètre dédié à cela : https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/global.json#L19
En le passant à false les moteurs de recherche ne pourront pas indexer le site.
Il faut penser à bien le repenser à true quand on passe le site en production ! :-)

[camillemonchicourt]

Le fait de pouvoir définir un fond différent pour la version Offline est de retour avec cette PR : #719 et le paramètre optionnel mapOfflineLayer.