Ce site est maintenant une « Progressive web App » (PWA). Je me suis dit que c’était l’occasion d’expliquer ce que c’est et pourquoi je pense que les PWA annoncent la probable mort d’une grande majorité (aller on va dire 80-90%) des applications natives !
Avant ça, peut être que ce n’est pas bien clair ce qu’est une application native pour vous. Pour faire simple, c’est n’importe quel programme que vous installez sur un ordinateur ou smartphone. Par exemple Word ou Whatsapp. Et une PWA c’est quoi alors ?
Qu’est-ce qu’une Progressive Web App ?
Le terme PWA désigne un concept (ou une norme) spécifique d’applications web, poussé par Google. A l’origine, la légende dit que Steve Jobs est le premier à en avoir eu l’idée peu après l’apparition de l’IPhone en 2007, mais c’est bien un concept poussé par Google de nos jours avant tout, à travers Chrome (en réalité Chromium évidemment). C’est encore très récent mais ça monte de plus en plus, Firefox et Safari implémentent donc les mêmes fonctionnalités pour suivre.
Une PWA, c’est un site web installable qui peut fonctionner en hors ligne
Concrètement, c’est un site web qu’il est possible d’installer sur le bureau d’un PC ou d’un smartphone (comme toute application normale), tout en étant capable de fonctionner en hors ligne. Alors évidemment quand je dis qu’il fonctionne en hors ligne, il faut avoir accédé au site au préalable (avec une connexion) pour qu’il soit mis en cache, ce n’est pas de la magie non plus ! La différence majeure c’est qu’il n’est pas installé lui et ainsi ne prend pas 100Mo d’espace ou plus rien que pour son fonctionnement, ainsi que de nombreuses de vos précieuses minutes pour le processus d’installation. Il n’a pas besoin d’être téléchargé ou maintenu à jour, tout ce que vous faîtes c’est mettre une icône qui pointe vers le site.
Lancé depuis cette icône il donne l’impression à l’utilisation que c’est une application native, alors qu’en réalité il fonctionne toujours à travers votre navigateur (l’interface de ce dernier est cachée). Enfin, un site qui implémente la norme PWA a l’autre particularité de pouvoir accéder aux commandes « natives » de votre système d’exploitation, comme la caméra sur smartphone ou le stockage, ou encore les notifications (évidemment si vous donnez l’autorisation, c’est complètement sans danger pour l’utilisateur par rapport à une application native).
Vous aurez peut-être remarqué que je parle d’applications tout comme de sites web. En effet, alors qu’en général on différencie les sites Web des applications Web, j’insiste ici sur le fait que le concept de PWA, même s’il comprend le terme « app » (pour application) peut tout aussi bien s’appliquer sur un site Web basique, comme celui sur lequel vous êtes en train de lire ces lignes.
La différence entre les 2 types ? Les premiers ne font que de la communication par exemple, ou sont de simples blogs comme celui-ci, les seconds sont plus là pour répondre à un besoin utilisateur comme un service mail ou Facebook. En fait on pourrait définir la différence de manière plus simple : un site web est unidirectionnel, vous ne pouvez pas interagir avec (à part écrire des commentaires en gros), une application est bidirectionnelle et est conçue pour l’interaction.
Je me suis dit qu’il serait intéressant de pouvoir « sauvegarder » un article ou un dossier pour y accéder en hors ligne, si on souhaite le lire dans le métro par exemple ou à certains endroits en montagne/campagne (vous savez, là où on est content si on a de la 3G). C’est donc maintenant possible sur ce site grâce à la puissance des PWA !
Exemple concret avec Support-Vision
Puisque ce site vient de devenir une PWA, ça va nous permettre d’imager ce que l’on vient de voir avec des exemples concrets tout de suite.
Première connexion sur le site : ce qu’il se passe dans les coulisses pour les intéressés
La première fois que vous accédez au site, il est chargé normalement comme tout autre site Web. Cependant à la fin de ce chargement initial, un fichier spécial appelé « service-worker » va être téléchargé et activé dans votre navigateur. C’est ce fichier qui opère la « magie » pour que les PWA soient possibles.
Lorsque vous faîtes le 3e rafraîchissement de l’exemple précédent, en plus de ce que j’ai écrit, dans les coulisses et toujours de manière transparente le service-worker va effectuer les vraies requêtes sur mon serveur pour récupérer d’éventuels changements et mettre à jour son cache le cas échéant. Parce que l’exemple précédent peut très bien avoir lieu sur plusieurs semaines d’intervalle donc il peut y avoir des modifications. Si le site est modifié il va vous afficher un message comme quoi une mise à jour est disponible, vous n’aurez alors qu’à rafraîchir pour la récupérer. Et voilà ! A noter que le contenu des articles en lui-même et la recherche en page d’accueil passent directement par mon serveur, pour que vous ayez les dernières modifications immédiatement sans ce processus de mise à jour (mais ils sont mis en cache tout de même, voir le paragraphe suivant).
Maintenant que les fichiers sont mis en cache, si vous perdez la connexion ou revenez un jour où vous n’en avez pas, la page sera toujours accessible même si vous la rafraîchissez encore ou si vous avez fermé l’onglet et le rouvrez. Vous pouvez essayer vous-même maintenant en déconnectant volontairement votre ordinateur/smartphone (mode avion par exemple). Là où la magie opère, c’est que si vous avez parcouru plusieurs articles du site ainsi que la page d’accueil, vous pourrez alors les parcourir de même hors connexion, y compris en ayant fermé le navigateur entre temps !
Chaque article que vous parcourez au préalable est mis en cache et accessible en hors ligne
Vous pouvez donc utiliser cette fonctionnalité à votre avantage : vous pouvez parcourir les articles que vous souhaitez lire plus tard, chargez juste leur page et ils seront accessibles en hors ligne. J’ai d’ailleurs ajouté un bouton au niveau des dossiers pour charger tous leurs articles automatiquement sans avoir besoin de les parcourir à la main. Bien entendu le cache a une limite de taille (je ne veux pas remplir votre ordinateur avec mes articles) donc si jamais il vous en manque un, c’est que vous en avez parcouru trop depuis et qu’il a été écrasé. Il y a aussi une limite de temps de 30 jours, au-delà les enregistrements sont supprimés.
A noter d’ailleurs la limite d’expiration est de 60 jours pour les images mais il ne peut y en avoir que 30 stockées en même temps au maximum (vu que les images pèsent lourd). Donc vous saurez pourquoi si jamais un jour vous vous retrouvez en hors ligne sur un article sans image. Le texte est plus important que les images mais est extrêmement moins lourd, c’est pour ça que j’ai mis cette limitation.
N’hésitez pas à « l’installer » sur votre appareil !
Comme je disais les PWA sont installables, c’est d’ailleurs la fonctionnalité qui les distingue des sites qui utilisent les service-worker seuls. Sur Chrome et ses dérivés sur PC (Opéra, Brave, Edge etc), vous avez une petite icône à cet effet à droite de la barre d’url. Vous n’avez qu’à cliquer dessus et hop, voilà le site avec une icône séparée sur votre barre des tâches
Pour la désinstaller il suffit d’aller dans les paramètres de cette fenêtre, vous ne pouvez pas le faire depuis Windows cependant (pour l’instant en tout cas).
Pourquoi il y a de bonnes chances pour que les « Progressives Web Apps » fassent une hécatombe chez les applications natives ?
Cette partie est plus subjective, je suis en effet convaincu que les PWA sont le futur de l’informatique au sens large. En effet qu’est-ce que l’informatique, si ce n’est l’utilisation d’applications ? Avec cette définition j’englobe évidemment les smartphones et tablettes ainsi que le Web en général. De toute façon dans la réalité les smartphones ne sont que des ordinateurs optimisés pour petit écran sous une base Linux, cette définition fait donc sens en soit.
Je vais donner mon point de vue en listant simplement les avantages face aux inconvénients des PWA face aux applications natives.
Les inconvénients des applications natives compensés par les PWA :
- Le défaut principal des applis natives c’est qu’elles demandent d’être téléchargées et installées, or la capacité de stockage peut être rapidement limitée, sur smartphone notamment… les Messengers qui font 500Mo merci mais pas cool quoi. Qui n’a jamais eu de problème de stockage sur son smartphone ? A moins d’acheter du haut de gamme. Pas ce problème avec les PWA bien conçues.
- Elles demandent à être mises à jour manuellement (et jusqu’à peu encore sur Android ça demandait de re-télécharger l’entièreté de l’application à chaque fois, je ne sais pas pour iOS), c’est laborieux et ça consomme de la data (gênant surtout sur mobile encore une fois, vous l’aurez compris, les PWA sont quand même orientées mobile avant tout).
- Les applications natives posent de nombreux problèmes pour les développeurs ou les entreprises qui les créent, puisqu’il faut quasiment les développer en autant de fois qu’il n’y a de systèmes d’exploitation (Android, iOS, Windows, Mac etc). C’est le gros avantage du Web sur le reste ça, au niveau technique, et la tendance naturelle est au remplacement justement à cause de ces contraintes économiques.
Quelques inconvénients des PWA tout de même :
- Les PWA restent conçues pour être en mode connecté par défaut, elles peuvent maintenant fonctionner en hors ligne mais restent plutôt orientées pour des choses connectées (cette innovation vient du Web ce n’est pas pour rien). Il faut être déjà allé dessus avec une connexion pour que le mode offline fonctionne. Ça peut être une limitation pour l’installation depuis un « store », mais bon il faut être connecté pour télécharger une app donc en soit rien de vraiment problématique et il y a des solutions techniques à ça (le « précaching »).
- Elles ne sont pas encore entièrement implémentées comme il faut partout d’un point de vue des API natives (la caméra etc) surtout sur iOS, et aussi sur les navigateurs autres que Chrome et ses dérivés. Pour l’instant c’est risqué pour une entreprise de se lancer sur une PWA en souhaitant toutes les fonctionnalités d’une application native. Mais ce point ne sera évidemment plus d’actualité dans un futur assez proche, et le problème ne se pose que si on souhaite faire appel à des fonctionnalités avancées (sms, bluetooth, détection de mouvement etc).
Conclusion
Depuis quelques années on a notamment constaté l’apparition d’outils éditeurs de texte en ligne. A travers Google drive, puis maintenant la suite Office entièrement accessible elle aussi en ligne (à travers Office 365). Ces outils, en plus d’être accessibles très rapidement au lieu de demander une installation spécifique, sont gratuits et sont déjà en train de tuer la suite office classique. En effet, je prends peut-être un peu trop exemple pour mon cas mais dans mon entreprise nous ne les utilisons plus, tout passe par ces outils sur le Web.
C’est pour moi une preuve de plus que les PWA vont prendre le dessus sur les applications natives, car en fait c’est le Web qui prend le dessus tout court sur l’informatique grand public, les PWA ne sont qu’un moyen de plus pour cela (notamment à travers le fonctionnement en hors-ligne). C’est évidemment une prédiction type boule de cristal, je peux complètement me tromper. Nous verrons bien !
Enfin, dernier argument en leur faveur, depuis Mai 2019 environ il est possible d’ajouter une PWA sur le Google Store après quelques manips assez simples, sur l’Apple Store de même (après des manips un peu plus complexes cependant) et c’est aussi le cas sur le Store Microsoft depuis quelques temps déjà (pour Windows 10). Et depuis le début de cette année, bing, le moteur de recherche de Microsoft, indexe tout seul les PWA pour pouvoir les ajouter automatiquement dans le store dans un futur proche. Que demander de plus ?
Alors qu’en pensez-vous ? La tendance, depuis 20 ans environ, du Web qui prend le dessus sur le reste va-t-elle s’arrêter ? N’hésitez pas à donner votre avis dans les commentaires.