GeotrekCE / Geotrek-rando-v3

Geotrek public data website (version 3)
https://geotrek.fr/produit.html#rando
MIT License
16 stars 15 forks source link

Conversion de la PWA en app mobile #1091

Open babastienne opened 7 months ago

babastienne commented 7 months ago

Ce ticket a pour objectif de lister les éléments permettant d'y voir plus clair sur les implications associées à la conversion de la PWA en apk / app mobile.

Il nous faudrait un rapport d'analyse sur les problématiques suivantes :

@camillemonchicourt n'hésite pas à compléter avec certaines interrogations supplémentaires si besoin.

babastienne commented 7 months ago

Ressources complémentaires :

Analyse effectuée en 2022

Afin de proposer une Application à Google Play ou Apple Store, il est possible de convertir la PWA en APP grâce à Capacitor https://capacitorjs.com/blog/mobile-apps-with-tailwind-css-nextjs-ionic-and-capacitor. Pour cela, la première étape consiste à réaliser un export de la PWA ( = générer un dossier de fichiers HTML pouvant fonctionner seuls sans l'utilisation d'un serveur NodeJS). La base du framework de Geotrek Rando est NextJS et celui-ci permet de faire un export sous certaines conditions : https://nextjs.org/docs/advanced-features/static-html-export Et dans la section "unsupported features" il y a ces 3 fonctionnalités largement utilisées dans notre application : Image Optimization (default loader) Internationalized Routing getServerSideProps - Image Optimization (default loader) n'est pas très problématique et on pourrait se débrouiller pour l'adapter. - getServerSideProps permet de récupérer toutes les informations nécessaires (appel API) pour la page courante et distribuer une page sans avoir besoin de JavaScript. NodeJS est nécessaire pour traiter les demandes. - Internationalized Routing qui permet les traductions des pages. Nous avons fait des recherches pour contourner ces freins : - SSR: une grande discussion est échangée ici https://github.com/vercel/next.js/discussions/15674. Il est expliqué que NextJS refuse de faire un export dès qu'il voit du SSR et l'utilisation de getServerSideProps. Mais avec getInitialProps qui gère aussi du SSR c'est ok pour export sauf que ce dernier est considéré comme anti performance et la docuentation de NextJS recommande de le purger du code si possible. Le plugin https://github.com/erzr/next-babel-conditional-ssg-ssr permet de lever le blocage de NextJS par rapport à getServerSideProps, cependant j'ai vu qu'il y avait déjà des problèmes de compatiblité avec la version 12 de NextJS et pas trop de réaction de la part du créateur du dépot. Une idée serait de transformer l'approche architecturale de l'application en passant de SSR+Cache (Server-Side Rendering) à SSG+ISR (Static Site Generation + Incremental Static Regeneration). Il est noté que l'ISR est également un frein pour la génération d'un export toutefois les contraintes sont moins compliquées à contourner. ⚠ NB: Il s'agit de changer vraiment toute l'architecture/philosophie de l'application, il ne s'agit pas là d'un développement trivial. - Internationalized : Le problème sous-jacent de l'internationalisation c'est que cela utilise également du SSR pour générer les traductions des pages avant rendu. J'ai regardé https://www.npmjs.com/package/next-export-i18n compatible avec un export NextJS. Et cela implique de changer complètement l'architecture i18n (i18n = internationalisation) pour appeler les méthodes de ce plugin au lieu de react-intl (le plugin utilisé actuellement). De plus on aura une régression au niveau de la PWA car next-export-i18n ne fera pas les traductions pour la partie SSR, uniquement en hydratation; ce qui est dramatique pour le SEO (référencement) et l'a11y (accessibilité). Pour conclure, aujourd'hui selon moi, Geotrek Rando n'est pas encore adapté pour l'encapsuler dans une application.

Travail effectué par @Sylchauf en 2022

Code Github : https://github.com/Sylchauf/Geotrek-rando-pwa APK du POC : https://cloud.ecrins-parcnational.fr/index.php/s/3H63Fjix2qjmFeJ Commentaire associé : ``` Nous avions évoqué il y a plusieurs mois un essai que j'avais fait sur l'application pour encapsuler ta PWA dans une «coquille» React Native. Concrètement, cela permet d'être présent sur les stores sans développer une deuxième version en parallèle. Ce Proof Of Concept a plusieurs limitations, qui peuvent être résolues en y passant plus de temps, à savoir : - Le démarrage à froid offline ne fonctionne pas (cad qu'on peut lancer l'application uniquement si on est connecté à internet. Si internet est perdu après le lancement, ce n'est plus un problème) - la version iOS n'est pas cablée - Il n'y a pas de bridge notifications natives / utilisateur connecté etc ... - Il y a un système de cache assez agressif, une fois qu'une page est téléchargée sur le mobile il n'est plus jamais mis à jour De mémoire j'avais quand même cablé le GPS, mais je ne suis pas sûr de l'avoir testé. Toutes ces limitations sont essentiellement dues au temps passé dessus et pourraient être corrigées pour une version de production. A noter que je n'ai pas creusé la partie «Une application pour tous [les Geotrek]» mais c'est également possible. Évidemment, il y a quelques bugs présents, mais l'objectif de démontrer si c'est possible ou pas me semble convaincant. ```

camillemonchicourt commented 7 months ago

OK merci. Voici des éléments sur le contexte et les objectifs identifiés par la communauté Geotrek sur le sujet :