iOS ouvre ses portes aux Progressive Web Apps

Ecrit par Muriel Santoni le Jeudi 12 Avril 2018

Grande nouvelle pour ceux qui se sont déjà tournés vers les Progressive Web Apps , et ceux qui y réfléchissent encore!

Vous connaissez déjà tout le potentiel des Progressive Web Apps, ces applications web qui offrent des fonctionnalités inédites dans des navigateurs tels que Chrome, et dont le comportement et l'expérience sont comparables à ceux des apps natives. La différence majeure concerne le fait que l'installation de leur icône et leur téléchargement sur iPhone sont différents de ceux d'une app native.

Si les Progressive Web Apps ont fait du chemin depuis l'année dernière, leur principal frein était l'absence de certaines de leur fonctionnalités clés sur les devices iOS.

Nous vous présentions dans un article précédent la clé de voûte des Progressive Web Apps, ou autrement dit un élément clé qui leur permet de proposer une telle expérience utilisateur: les Service Workers . Ils représentent la base technique qui distinguent les PWAs des sites web classiques.
Ce script, exécuté en arrière plan du navigateurs, offre de nombreuse possibilités de développement, permettant de fortement modifier le comportement d'une app. Sans Service Workers, impossible pour les Progressive Web Apps de tenir l'ensemble de leurs promesses, d'où le frein représenté par l'incompatibilité entre les Service Workers et iOS.

Avec la mise à jour d'iOS 11.3, Apple semble officiellement se lancer dans le grand bain des Progressive Web Apps, puisque vous l'aurez compris, les Service Workers sont désormais compatibles avec iOS !

Quelles fonctionnalités sont accessibles sur iOS grâce aux Services Worker?

Depuis la mise à jour iOS 11.3, nous sommes plus que ravis de vous annoncer que les utilisateurs de votre PWA qui ont procédé à son installation et son téléchargement sur leur iPhone iOS pourront désormais profiter des fonctionnalités suivantes:

Fonctionnement hors ligne
Correction d'un bug lors de l'utilisation de l'appareil photo

Ces fonctionnalités sont accessible si la PWA est exécutée dans Safari, ou directement depuis l'écran d'accueil de l'appareil (mode full screen).

Les Services Workers ne sont pas supportés dans les Web Views, c'est à dire dans les navigateurs autre que Safari (dans Chrome iOS ou dans le navigateur intégré de Facebook par exemple).

J'ai déjà une PWA, comment profiter de ces nouvelles fonctionnalités?

De votre coté, vous devez vous assurez que la date de génération de votre PWA est postérieure au 6 avril. Pour le vérifier, rendez-vous dans le menu Publication > Mise à jour > Moteur Progressive Web App. Re-lancer la génération de votre PWA si la date indiquée est plus ancienne que le 6 avril.

Du coté de vos utilisateurs, il faut que leur appareil fonctionne avec iOS 11.3 (ou une version ultérieure). Une fois la mise à jour iOS 11.3 installée, votre PWA bénéficiera de tous les avantages apportés par l'utilisation des Service Workers.

Y a t-il des différences entre les PWAs sur Android et sur iOS?

Malgré l'énorme pas en avant que représente cette mise à jour sur iOS, il existe plusieurs différences de fonctionnement des PWAs sur iOS et Android. Voici les différences de fonctionnent majeures entre les deux OS:

- Gestion du cache: le fonctionnement hors-ligne des PWAs est permis grace à un système de gestion du cache. Sur iOS, le stockage de données est limité à 50Mo, pas sur Android.
Sur Android , les fichiers stockés sont supprimés si l'espace de stockage est saturé; sur iOS en revanche, si la PWA n'est pas sollicitée par l'utilisateur pendant plusieurs semaines, les fichiers en cache sont supprimés. Les données sont re-télechargées à l'ouverture de la PWA.

- Synchronisation en arrière plan: elle est possible sur Android, mais pas sur iOS.

- Notification push: Elles ne sont pas encore supportées sur iOS. Apple reste encore très silencieux sur un éventuel support des notifications push dans Safari. En tout cas, aucune possibilité pour le moment avec iOS 11.3

- Sur Android les PWAs peuvent accéder au Bluetooth, ce qui n'est pas le cas sur iOS.

Les prochaines mises à jours d'iOS vont-elles apporter de nouvelles fonctionnalités?

Au jour d'aujourd'hui, des développements favorables aux PWAs sont d'ores et déjà en cours du côté d'Apple.

En effet, après les Service Workers, il semblerait qu'Apple travaille sur le support du Web App Manifest par son navigateur. Il s'agit d'un composant majeur des PWA. Ce fichier descriptif permet de définir les éléments utilisés lors du fonctionnement de la PWA en mode full screen, tel que défini par le W3C. La prise en compte du Web App Manifest dans Safari permettrait par exemple de :

Forcer l'orientation de l'écran lors de l'utilisation de la PWA en mode full screen (c'est-à-dire lorsqu'elle est lancée depuis son icône sur l'écran d'accueil)
Intégrer dans Safari un processus invitant l'utilisateur à installer la PWA sur son écran d'accueil (sur Android, une pop-up s'affiche automatiquement). Le Web App Manifest contient tous les éléments permettant aux équipe de Webkit de construire un composant de ce type
Construire un écran de lancement pour la PWA. Sur Android, cet écran est construit à partir de l'icone de l'app, son nom et une couleur de fond, ces éléments étant décrit dans le manifeste.

Comment installer ma PWA sur l'écran d'accueil?

How to add a PWA to your iOS home screen

Il est possible d'installer une PWA sur l'écran d'accueil de votre appareil iOS. En revanche, c'est à l'utilisateur de votre réseau de faire la démarche lui même puisqu'aucun message d'invitation n'est affiché automatiquement.
Voici la marche à suivre pour accéder installer une PWA sur l'écran d'accueil:

1. Accédez à la PWA via son URL depuis Safari

2. Cliquez sur le bouton de partage dans Safari

3. Cliquez sur "Ajouter à l'écran d'accueil"

4. Vérifiez que le nom qui apparaitra sur votre écran d'accueil vous convient. Modifiez le si besoin et cliquez sur "Ajouter"

Pourquoi la mise à jour iOS 11.3 est-elle une opportunité pour vous?

Si elles étaient déjà fonctionnelles sur iOS, les Progressive Web Apps sont aujourd'hui en passe de fonctionner pleinement sur les appareil du géant Apple. Le support des Services Workers et les développements en cours sur le Web App Manifest, donnent bon espoir pour la suite de l'histoire entre Apple et les PWAs.

Un des avantages indéniables des Progressive Web Apps est leur accessibilité. Etant exécutées sur le web, elle sont accessible via une simple URL, référencées sur les moteurs de recherche, et surtout, une fois installées sur l'écran d'accueil, elles s'utilisent comme toutes les autres apps.

Les deux premiers points sont plus que positifs pour votre gain en visibilité auprès de votre réseau, le dernier est en fait capital. Un nouveau canal de distribution, différent de l'App Store, s'offre à vous. Le world wide web, ouvert et libre.

POUR ALLER PLUS LOIN :

Vous souhaitez intégrer le milieu des applications mobiles et développer votre présence sur mobiles ? Découvrez comment créer une application mobile en ligne ! Sans savoir coder, vous pourrez créer une application native ou une PWA pour iOS et Android.
Lorsque vous vous lancez dans le développement d'un système pour appareil mobile, vous avez le choix entre plusieurs options : les applications natives et les PWAs. Si vous avez choisi la première option, découvrez les meilleures fonctionnalités pour une application native ! Vous saurez ainsi comment créer des applications mobiles pour les mobiles iOS ou Android qui se démarqueront et plairont à vos utilisateurs.
Notre système de création vous permet de vous lancer dans le développement en ligne d'une PWA en tant que worker. Grâce à l'avancée de la technologie, une application mobile n'est plus nécessairement une application native ! Si vous avez fait ce choix, découvrez la compatibilité des fonctionnalités de votre Progressive Web App en fonction des navigateurs . Contrairement aux applications natives, vous pourrez également retrouver votre app sur votre écran d'ordinateur !
Pour vous permettre un meilleur développement d'applications mobiles en ligne et rendre notre plateforme plus claire à l'écran, nous avons profité de la technologie pour créer le nouveau backoffice GoodBarber . Développer des applications natives ou des PWAs ne vous aura jamais semblé si simple ! Une fois la création de votre application mobile, une application native ou une PWA, terminée, vous pourrez rendre votre travail accessible sur les mobiles iOS ou Android en le publiant sur les stores !
Une fois le développement en ligne de votre Progressive Web App terminé, profitez de ses avantages ! Contrairement à une application native, vous pouvez promouvoir votre PWA grâce à son URL . En plus de pouvoir la publier sur iOS et la retrouver sur votre écran des mobiles de vos utilisateurs, vous pouvez retrouver ce type d'application mobile sur ordinateur !
Pour améliorer le développement de vos applications mobiles, nous avons lancé GoodBarber 3 ! Vous pourrez ainsi bénéficier de nouvelles fonctionnalités lors de la création en ligne de votre application native ou de votre PWA, pour un rendu sur mobiles réussi. Vous pourrez ainsi créer des beautiful applications natives iOS ou Android !
Vous aussi lancez vous ! Découvrez comment élaborer une application mobile, de l'idée au développement en ligne et ainsi avoir une présence sur iOS ou Android !