iOS ouvre ses portes aux Progressive Web Apps

Ecrit par le Jeudi 12 Avril 2018

iOS ouvre ses portes aux Progressive Web Apps
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, et dont le comportement et l'expérience sont comparables à ceux des apps natives. 

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 sous 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 système 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?

iOS ouvre ses portes aux Progressive Web Apps

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 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é, 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.



Entrez votre adresse email