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 sur Preact

Preact : une bibliothèque javascript React-Like de seulement 3 ko !

Preact est souvent considérée comme une version miniature de React
Si l’on peut lire régulièrement ce raccourci c’est tout simplement parce que ces deux bibliothèques javascripts partagent beaucoup de similitudes.
Cependant Preact se distingue de son paronyme de plusieurs façons, notamment en se focalisant sur la manipulation du DOM.
Si vous ne connaissez pas encore Preact, on vous propose une définition en trois points juste en dessous. Tout d’abord nous aborderons l’ADN de Preact, ensuite il sera question d’étudier sa différence avec React, et enfin nous verrons comment intégrer Preact à un projet 😉.

vignette de l'article portant sur la différence entre un framework et une bibliothèque

Quelle est la différence entre un framework et une bibliothèque ?

Avec l’engouement lié à React, Symfony, Vue JS etc… on entend souvent parler de framework ou même de bibliothèque. Que ce soit en front ou même en back, vous pouvez trouver ces termes pour presque tous les langages.
Alors que désignent réellement ces dénominations ? Quelle est la différence entre un framework et une bibliothèque ? On vous propose une définition à la portée de tous de ces termes parfois mal compris 😉

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