Front-end, Mobile

Un sujet différent cette semaine puisque l’on vous parle des PWA : des applications combinant web apps et mobile. Est-ce l’avenir du développement d’applications web/mobile ? Est-ce réellement une révolution ? La réponse dans cet article.

A savoir : les Progressive Web App sont désormais accessibles depuis le Google play store !

Qu’est-ce qu’une progressive web app ?

Une progressive WebApp est le mélange parfait entre la Webapp et le site web mobile : elle est développée en langage web (html, css, javascript), est accessible sur mobile/desktop, mais ne s’utilise que sur navigateur pour l’instant.

Pourquoi utiliser une PWA ?

La principale raison d’utiliser une PWA est le gain de temps : lorsque vous téléchargez une application sur un store, vous suivez les étapes suivantes :

– Ouvrir le store
– Trouver l’application dans le store
– Installer l’application
– Attendre le téléchargement
– Ouvrir l’application

Avec les Progressive web app, la seule étape à effectuer est la dernière. Ce qui fait gagner beaucoup de temps. De plus, une PWA se charge rapidement, et une fois ouverte, la navigation est fluide.

Comme le dit son nom, une PWA est progressive, ce qui signifie qu’elle fonctionne sur tous les périphériques en intégrants les composants du navigateur/device utilisé.

Un autre avantage pour les PWA est le référencement naturel : étant donné qu’elles sont développées en HTML à même titre que n’importe quel site, il est donc possible d’y inclure des métadonnées, et donc de les référencer.

Depuis plusieurs mois, les PWA sont devenues très populaires : on retrouve par exemple des applications développées par Google, Wikipédia et même Facebook !

Mais alors, comment ça marche ?

Utilisation d’un Service worker et gestion de notifications push

Un service worker est un bout de code qui s’exécute à côté de votre site. Il n’est donc pas exécuté en même temps que le JavaScript. Cette méthode permet d’effectuer des actions sur le site même quand l’utilisateur n’est pas sur l’application, comme par exemple des notifications push.
Le fait d’exécuter certaines actions par le biais de services workers plutôt que par JavaScript permet de charger moins de code, et donc d’accéder à l’application plus vite.

Pour insérer un service worker dans votre code, rien de plus simple, il s’implante comme un fichier js : en premier lieu, vous devez déclarer votre script js dans le HTML, puis le service worker (au format js).

Exemple :

<script src=«script.js»></script>
<script src=«service-worker.js»></script>

Etant donné que les services workers sont actifs même pendant l’absence de l’utilisateur sur le site, il est possible de créer des notifications push. Par exemple pour Chrome, il suffit d’utiliser les gabarits de codes proposés par Google pour ensuite personnaliser vos pushs (exemple : abonner l’utilisateur aux notifications, en envoyer si l’utilisateur effectue certaines actions, etc).

Exemple de notification affichant “Yay it works” (source : developers.google.com) :

(source de l’image : developers.google.com)

Le cache storage et le mode offline

Autre avantage et fonctionnalité importante d’une PWA : la mise en cache du contenu. Lorsque l’utilisateur n’est pas connecté à internet, il pourra quand même accéder à l’application grâce aux données mises en cache. Selon le navigateur utilisé, vous pourrez mettre plus ou moins de données en cache : cela va de 50 mo pour Safari à 10% de l’espace libre de votre disque dur sur Firefox.

Pour installer le mode offline sur votre PWA, il suffit d’utiliser l’API de cache de votre navigateur. Elle est généralement accessible au même endroit que les services worker.

offline

Activation du mode offline sur Chrome. (source : developers.google.com)

Comment puis-je développer une Progressive web app ?

Il n’est pas nécessaire d’avoir de grandes compétences en programmation pour développer votre PWA. Il faut connaître les langages web tel que HTML/CSS/JavaScript et connaître le principe d’une page en « app shell ». Selon plusieurs communautés de développeurs, avoir des compétences en React.js ou React Native sont des atouts supplémentaires qui vous aideront à développer votre application plus facilement.

Si vous êtes intéressé par le développement mobile, nous proposons d’autres articles sur notre blog dédié à ce sujet.

Partager

Twitter Linkedin

Vous serez peut-être aussi intéressé par :

vignette de l'article portant sur la balise des pages AMP

du javascript personnalisé dans les pages AMP ?

Lors de la conférence AMP 2019 qui s’est déroulée le 17 avril dernier à Tokyo, Google a dévoilé plusieurs nouveautés au sujet de son format de page mobile AMP (Accelerated Mobile Page), dont trois majeures. La première concerne la technologie signed HTTP exchange qui permet d’afficher l’url canonique d’une page sur une page AMP. La deuxième quant à elle concerne la mise en place d’un carrousel dédié aux AMP stories dans la page de résultat du moteur de recherche. Et la troisième, qui constitue le sujet de cet article concerne la révélation d’une balise permettant d’insérer du javascript personnalisé (custom javascript) dans une page AMP.
Avant de parler du custom javascript dans AMP, nous aborderons également les nouvelles fonctionnalités en terme d’UI apportées à AMP.

#GEN : l’événement numérique du Grand Est

Cet événement est une initiative de l’association Grand Est Numérique ! Pour la 6ème édition de 2018, nous aurons droit à des sujets liés au « Business & Tech ». Entre conférences, workshops et village startup, le #GEN est très prometteur. Voyons ce qu’il propose en détail !

HyperApp : une bibliothèque JavaScript de seulement 1 KB ?

Annoncé en fin d’année 2017, HyperApp est une bibliothèque JavaScript proposant de nombreuses fonctionnalités, le tout pour un poids de seulement 1KB ! Ce qui est relativement peu comparé à Jquery par exemple, qui pèse une trentaine de KB. Malgré ce côté insolite, cette bibliothèque est-elle quand même performante ? La réponse dans cet article !

Centre de préférences de confidentialité

    Cookies Fonctionnels

    gdpr[allowed_cookies], gdpr[consent_types], wfvt_2000878799, wordfence_verifiedHuman

    Advertising

    Cookies Satistiques

    _ga, _gat, _gid

    Cookies externes

    PREF, VISITOR_INFO1_LIVE, YSC, GPS, s_gl, CONSENT
    CONSENT, 1P_JAR