Testez les Progressive Web Apps, maintenant qu’iOS 11.3 les prend en charge

Nicolas Furno |

Parmi toutes les nouveautés d’iOS 11.3, on trouve la prise en charge des Progressive Web Apps, ou PWA pour les intimes. Cette fonction rapproche les sites web des apps natives, en permettant de les installer sur l’écran d’accueil d’un smartphone et en leur offrant quelques fonctions réservées normalement aux apps téléchargées sur l'App Store. L’idée n’est pas nouvelle, en fait le tout premier iPhone de 2007 reposait exclusivement sur des web apps faute d’App Store, mais il s’agit de la dernière version, la plus évoluée.

La PWA de Twitter sur un iPhone X. Difficile de la distinguer d’une app native sur ces captures d’écran, même si c’est plus net à l’usage.

Entre les web apps que l’on avait depuis près de onze ans et les PWA, il y a quelques différences importantes. La principale est qu’une web app ne pouvait pas fonctionner sans connexion internet, alors qu’une PWA oui. Le code nécessaire à son interface ainsi qu’une partie du contenu sont stockés en local, comme une app native, ce qui permet de ne pas se retrouver sur une page vide ou une erreur si la connexion est coupée.

Par ailleurs, les PWA accèdent à davantage de fonctions natives. Sur iOS, elles ont accès à la géolocalisation du terminal, à certains capteurs (gyroscope, boussole, etc.), aux appareils photo, aux microphones, à Apple Pay et à des fonctions plus avancées pour les développeurs, notamment en termes de graphismes. Les apps natives gardent l’avantage sur de nombreux points, elles peuvent stocker plus que 50 Mo de contenu, leur interface reste toujours sur l’appareil (les PWA peuvent être purgées si le stockage interne manque), elles ont accès à tous les capteurs (notamment biométriques) et au Bluetooth, elles peuvent lire les données privées stockées sur l’appareil et elles peuvent envoyer des notifications.

Les PWA ne sont pas un concept inventé par Apple, c’est plutôt Google qui a développé l’idée pour Android. Mais cela veut aussi dire que cette fonction existe depuis quelques années et que vous pouvez l’essayer avec plusieurs sites et services. Si vous voulez juger de l’intérêt de cette fonction, vous pouvez essayer avec le site mobile de Twitter qui peut se transformer en PWA sur iOS 11.3. Pour cela, c’est la même processus que pour les web apps traditionnelles : bouton de partage, et option « Sur l’écran d’accueil ».

Pour créer une PWA sur iOS, on passe par le menu de partage et l’option « Sur l’écran d’accueil ».

Si Twitter ne vous intéresse pas, ou si vous voulez en voir davantage, vous trouverez une liste de PWA à cette adresse et d’autres encore à cette adresse. Vous trouverez un convertisseur de monnaie, le fameux Pokédex, un carnet de notes, un lecteur de Wikipedia sans connexion, une version PWA du jeu 2048 et même un accordeur de guitare.

À l’usage, vous noterez aussi quelques restrictions qu’Apple pourrait lever avec une mise à jour d’iOS. Par exemple, les aperçus dans la vue du multitâche sont blancs, alors que les apps natives sont représentées par une capture d’écran qui représente leur dernier état. Par ailleurs, une PWA ne peut pas partager son écran sur l’iPad, elle occupe systématiquement la totalité de l’écran. Ce sont des défauts qui seront peut-être corrigés par une future mise à jour d’iOS, tout comme la barre noire qui s’affiche par défaut en haut de l’écran et qui masque la barre de statut d’iOS (les créateurs de PWA peuvent toutefois corriger ce problème).

À gauche, une PWA avec la barre noire en haut qui empêche de lire les informations affichées normalement à cet endroit. À droite, un carré blanc et vide représente toutes les PWA dans le sélecteur de multitâche d’iOS 11.3.

Il y a aussi des fonctions que les PWA peuvent utiliser sur Android, mais pas sur iOS, sans que l’on sache très bien si ce sont des choix politiques ou techniques. En particulier, l’impossibilité d’afficher des notifications est un handicap pour ces nouvelles web apps améliorées. Est-ce pour économiser la batterie ou laisser aux apps de l’App Store un avantage sur ce point ? Autre point vite gênant à l’usage, les gestes habituels du système, notamment le glissement vers la droite pour revenir en arrière, ne fonctionnent pas. Charge aux sites web d’afficher les boutons nécessaires pour la navigation, ce qui alourdit aussi l’interface.

Pour en savoir plus sur les PWA et leurs limites, cet article a servi de base au nôtre et il vous permettra d’aller plus loin. Et si vous utilisez des PWA sur votre iPhone ou iPad, n’hésitez pas à indiquer lesquelles en commentaire !

avatar Rodri31 | 

Vous avez remarqué que depuis iOS 11, "Handoff" ne marche plus sur l'écran d'accueil? Il me semble que vous ne l'avez jamais relevé. C'est dommage car je l'utilisais beaucoup plus sur l'écran d'accueil que sur le multitâche...

EDIT: écran verrouillé et non écran d'accueil pardon.

avatar Mickaël Bazoge | 

@Rodri31

Comment ça ? Je n’ai rien remarqué.

avatar Rodri31 | 

Je dis ça car votre screenshot m'y fait penser. Avant on pouvait accéder à Handoff sur l'écran verrouillé (avec une petite icône en bas à gauche) en plus de l'écran du multitâche. Maintenant c'est uniquement dans le multitâche.

Voir: https://support.apple.com/fr-fr/HT204681 dans "Utilisation de Handoff" puis "Si vous basculez vers votre iPhone, iPad ou iPod touch"

avatar Mickaël Bazoge | 
Ah je vois. Oui, ça a disparu depuis un petit moment ce truc en effet.
avatar kiddsoso | 

@Rodri31

Ça marche parfaitement pour moi

avatar Rodri31 | 

@kiddsoso

Si ça marche chez toi c'est que tu n'es pas sous iOS 11 car la fonction a bel et bien été supprimé

avatar Alexan37 | 

Les notifications d’actualités (comme pour l’application LCI) sont fonctionnelles ?

avatar JustGeek | 

@Alexan37

Les PWA ne prennent pas en charge les notifications sur iOS, comme l’indique l’article.
Mais LCI a une app iOS directement !

avatar Frodon | 

Ça fait un baille que sous iOS on peut faire en sorte d'avoir un site Web mobile sur l'écran d'accueil avec son propre icône, sa propre place dans le multitâche, en plein écran (sans barre de navigation rien), et accédant à la géo-localisation, au gyroscope, et un certain nombre d'autres fonctions (via des APIs HTML5 spécifiques).

Aujourd'hui la différence avec iOS 11.3 c'est qu'il y a plus de fonction accessibles et c'est plus standardisé (entre iOS et Android). Mais rien de révolutionnaire.

avatar C1rc3@0rc | 

@Frodon

Effectivement, Apple fait "redecouvrir" une fonction existant depuis longtemps mais quasi jamais utilisée... et ce n'est pas un hasard!

Quel est l'interet de ces PWA face aux applications et aux sites "responsive"?

L'idee de la Webapp a ete un echec massif du tout premier iPhone, non pas a cause des limitations technologiques de l'epoque, mais a cause de leur nature.

L'echec de la Webapp c'est l'echec du netbook: inefficacité, dysfonction, instabilité, le principe de consommer plus d'energie que necessaire pour un resultat mediocre, l'exposition a plus de risques, de delocaliser les données...

La Webapp est une idee tordue tres ancienne, elle est meme anterieure au Web paradoxalement. Sur le Web elle en a sutout dénaturé l'essence, avec des immondices qui ont fait la preuve de leurs inefficacité et leurs dangerosités: client Java et l'immonde Flash et autres clones...

L'iPhone original avec ses Webapp theoriques s'est pris une claque magistrale et la scene jailbreak lui en a mis une seconde avec un SDK demontrant l'absence de realité technique a cette limitation. L'echec a ete cuisant et Jobs a vite rectifié le tir, et de la est né l'economie de l'app et l'appstore qui est aujourd'hui une source de revenus importants, et un moteur que pousse Cook dans ses limites...

Pourquoi Apple remet le couvert avec cet echec?
Pourquoi augmenter la confusion entre la nature d'une application et d'un site Web alors que les acteurs commençaient a trouver leurs marques et les utilisateurs comprendre leurs interets?
Aujourd'hui les choses étaient a peu pres clair entre le choix de creer une application native et un site web "responsive". Pourquoi régresser?

avatar reborn | 

@C1rc3@0rc

Encore une fois, tu ne vois que ce que tu veux voir..

Ça n’a pas marché à l’époque car le matos et les infrastructure et l’experience ne suivaient pas.

Je ne dis pas que c’est une bonne chose ces PWA, je suis plutôt contre, mais au final ce sont des webapps avec lesquelles il est possible de réaliser plus de chose (l’appareil photo, les notifications, l’accès au bluetooth)

La prise en charge de ces webapps n’a jamais disparu d’iOS, c’est juste que là dans le contexte actuel il est pertinent d’en améliorer l’experience.

https://www.blogdumoderateur.com/prospective-amp-pwa/

Resumer cela à une énième opposition Jobs- Cook.. ??‍♂️

Fun facts: Gartner projects, by 2020, “progressive web apps will have replaced 50% of general-purpose, consumer-facing mobile apps.”

Forrester estimates “$1 Trillion by 2021 will be spent reinventing mobile experiences” with progressive web technology.

C’est n’est pas la solution à tout, mais dans certain secteur du genre journalisme, tourisme cela peu être interessant.

https://progressive-web-apps.fr/apple-avance-vers-progressive-web-apps

avatar C1rc3@0rc | 

@reborn

Lis ce que j'ai ecris: tu limites ton explication a la Webapp de l'iPhone. Or l'echec de la Webapp c'est d'abord ceux de Java(client) et de trucs vicieux comme Flash, des techno initialement faites pour realiser des "web" applications, en fait plus largement le principe du netcomputer qui a chaque itération - c'est un marronnier comme la 3D pour la TV - fait le buzz et se plante lamentablement, et retombent toujours sur les memes problemes: efficacite energetique, stabilité de connexion, securité des données,...

A quoi on servi Java et Flash? A produire des malware et de la publicité intrusive...

avatar VaVaGe | 

J’utilise de cette façon Facebook, plus d’app super lourde pour rien et une interface bien moins chargée que dans l’app juste le nécessaire, un peu comme avant quoi. ??

avatar Smoky | 

@VaVaGe

C'est une des applications pour lesquelles ça m'intéresse aussi mais dommage pour les notifications...

avatar Mouette03 | 

Moi avec la web app de l’équipe j’ai l’aperçu dans le multitâche !!!!

avatar emgb | 

L'enfer !!

avatar cecile_aelita | 

le 3D Touch n'est pas géré avec les PWA ?
quand j'utilise la version mobile de twitter sur safari, je n'ai aucun pb a visualiser les lien avec 3D touch, mais avec la web app, ca ne fonctionne plus

avatar FrancoBorgo | 

De mémoire, les WebApp existaient dans WebObjects et probablement avant !

avatar heu | 

Je ne vois aucune différence à l'usage entre une webapp sur le springboard avant et après 11.3.

avatar bonnepoire | 

Je l'ai expérimenté cet après-midi sans comprendre ce que je voyais. Le comportement est différent. On n'a pas l'interface de safari et les données de connexion ne sont pas récupérées dans des cookies. Quand on voit que les applications imposent des pubs et des liens vers des sites pourris, cette évolution est bienvenue.
Certes, ce n'est pas une révolution mais c'est franchement un bon point.

J'ai acheté l'app Plex pour le partage familial. Ils sont passé en application gratuite avec achats in-app. Du coup, pour le partage c'est mort! La web app fait le job.

avatar heu | 

@bonnepoire

Mais auparavant non plus il n'y avait pas l'interface de safari.

avatar bonnepoire | 

J'avoue ne plus l'avoir utilisée depuis un bail mais à l'époque où j'utilisais la fonction, ce n'était qu'un lien qui ouvrait safari. Il me semble...

avatar heu | 

@bonnepoire

C'est la méta suivante qui permet de masquer l'interface de safari quand le site est placé sur le springboard : `<meta name="apple-mobile-web-app-capable" content="yes">`

avatar sImPOD | 

Et surtout, les WebApp sont un excellent moyen d'avoir le bloqueur de contenu "partout".
J'ai ainsi viré toutes les app des sites d'actus pour les remplacer par leur pendant WebApp, avec un gros gain au change pour d'allergique aux pubs que je suis.
Genre pourl'Equipe, c'est le jour et la nuit, Nouvelobs et consorts, idem.

Sauf pour MacG (car je suis un gros faillot également) que je visite surtout via l'app idoine.

CONNEXION UTILISATEUR