Une PWA est le navigateur Web

UN application web progressive (PWA) est une application Web qui utilise des technologies Web modernes pour offrir une expérience utilisateur égale à n’importe quelle application mobile. Une communauté open source active, en collaboration avec des leaders technologiques comme Google et Microsoft, fait avancer l’agenda PWA dans le but de “combler le fossé des applications”.

Fondamentalement, un PWA exécute votre application dans un navigateur Web. Parce qu’il y a essentiellement un système bipartite des magasins Play et App, l’accent est mis sur deux navigateurs : Google Chrome et Apple Safari (construits sur le chrome open source et WebKit, respectivement).

Je ne couvrirai pas la création d’applications de bureau. Pour plus d’informations sur ce sujet, consultez Électron.

Les PWA sont construites de la même manière que n’importe quel site Web ou application Web. Ils utilisent les dernières technologies mobiles et mettent en œuvre les meilleures pratiques UX. Les PWA peuvent également connecter le navigateur avec du code natif pour améliorer l’expérience.

Si vous tapez “Qu’est-ce qu’une PWA” dans votre moteur de recherche préféré, vous obtiendrez probablement une réponse similaire à “Les PWA sont conçues pour être rapides, fiables et attrayantes, avec la possibilité de fonctionner hors ligne et d’être installées sur un appareil. écran d’accueil.” Bien que cela soit en partie vrai, ce n’est que la pointe de l’iceberg pour ce qu’une PWA a le potentiel d’être et vers quoi elle évolue, même au moment où j’écris cet article.

Qu’est-ce que ne pas une PWA

Vous trouverez ci-dessous des frameworks d’applications multiplateformes vous permettant de développer à partir d’une seule base de code. Ils n’utilisent pas le navigateur comme plate-forme.

Flutter utilise un langage appelé Dart, qui se compile en packages iOS, Android et Web. React Native fait la même chose mais compile JavaScript sur le backend.

Qu’est-ce qu’une PWA par définition ?

Une PWA, selon sa définition d’origine, doit répondre à ces trois exigences :

• Employé de service : Fournit des fonctionnalités hors ligne.
• Manifeste Web : Balisage JSON pour configurer l’écran d’accueil et les icônes d’application.
• Sécurité: HTTPS est appliqué, car un service worker s’exécute en arrière-plan.

Ces composants vous permettent de passer le Audit Google Lighthouse PWA et obtenez la coche verte sur votre score.

Une fois que vous avez satisfait à ces exigences, l’invite “ajouter à l’écran d’accueil” de Chrome est également automatiquement activée.

PWA Builder (un service gratuit fourni par Microsoft) possède une excellente interface utilisateur pour créer une PWA et visualiser les exigences de base. Voir l’exemple suivant basé sur developers.google.com. Vous pouvez faire une démonstration de cette fonctionnalité ici fourni par le Module PWA J’en ai parlé dans mon article précédent.

Les exigences de base d’un PWA permettent un comportement hors ligne via le service worker, et le manifest.json permet le comportement “ajouter à l’écran d’accueil” sur Android, où votre site Web est ajouté sous forme d’icône à l’écran d’accueil et s’ouvre sans navigateur Chrome (en plein écran) avec une page de garde d’application. Ce sont les exigences minimales pour une PWA et, en plus de fournir une augmentation des performances grâce à la mise en cache hors ligne, elles donnent principalement l’illusion que le site Web est une application. C’est une lacune psychologique à la base où l’utilisateur final cessera de considérer le navigateur comme de simples “sites Web” et le regardera plutôt pour ce qu’il est réellement… une plate-forme d’application. Google a semblé en faire une priorité pour ouvrir la voie au développement d’un nombre infini de fonctionnalités, de fonctionnalités et d’améliorations UX/UI qui offrent réellement une “expérience de type application” améliorée.

Une PWA est en réalité un ensemble de technologies de navigateur et de techniques et technologies de développement Web qui rendent un site Web plus “ressemblant à une application”. Je les ai répartis dans les catégories suivantes.

Expérience de type application améliorée

• Expérience UX/UI améliorée sur un appareil mobile
• Accès natif aux appareils et capacités Web améliorées
• Vitesse et performances

Ce qu’une PWA peut être aujourd’hui au-delà de la définition

Voici plus de détails sur les trois descriptions d’expérience ci-dessus.

Améliorations UX/UI

L’UX/UI et la résolution de problèmes visuels sont essentielles pour que votre site Web ressemble à une application. Cela se manifeste souvent par une attention aux détails tels que les animations, les tailles d’entrée/de police, les problèmes de défilement ou d’autres bogues CSS. Il est important qu’il y ait une équipe de développement frontend solide pour qu’ils puissent créer cette UX. Dans la catégorie de la conception et de l’UX se trouvent les améliorations que nous pouvons mettre en œuvre avec les blocs de construction d’un document Web (HTML/JSS/JS). Voici deux exemples :

• Hotwire Turbo: Un framework open source utilisant HTML sur le fil pour recharger uniquement les zones de votre page qui changent en utilisant AJAX ou WebSockets. Cela offre les améliorations de performances que les SPA s’efforcent d’obtenir en utilisant uniquement un JavaScript limité. Cette approche est parfaite pour votre application monolithique ou votre système de rendu de modèle ; pas besoin d’investir dans la complexité supplémentaire du découplage de votre front-end et de votre back-end.
• Frameworks SPA spécifiques aux mobiles : Il existe plusieurs frameworks découplés qui peuvent donner à votre site Web une expérience utilisateur semblable à celle d’une application. Onsen UI et Framework 7 sont deux excellentes options qui vous aident à créer une interface utilisateur rapide et réactive pour votre site Web. Cependant, vous n’avez pas besoin de vous fier à ces frameworks. Comme indiqué ci-dessus, une bonne équipe frontend peut créer l’interface utilisateur que vous recherchez en mettant en œuvre les dernières techniques de conception mobile de type application.

Cette diapositive explique plus en détail comment rester à jour avec HTML/CSS/JS dans votre PWA.

Capacités Web

L’équipe Chromium améliore constamment l’expérience du navigateur. Vous pouvez suivre cette progression dans Projet Fugu, le projet global de capacités Web. WebKit s’efforce également en permanence d’améliorer l’expérience et les capacités de son navigateur.

L’API Swift peut également interagir avec WKWebView pour améliorer l’expérience native.

Google propose un service appelé Bubblewrap, qui fonctionne avec Trusted Web Activity (TWA). Tout cela ne fait qu’envelopper votre site Web compatible PWA dans un ensemble APK natif afin que vous puissiez le soumettre à l’App Store. C’est ainsi que fonctionne le lien du constructeur PWA mentionné ci-dessus pour Android. Vous pouvez tout savoir sur WKWebView et TWA dans mon article précédent.

Vitesse et performances

Il existe d’innombrables façons d’améliorer les performances de votre application. Vérifiez Outils Google PageSpeed commencer.

Les avantages de l’utilisation d’une PWA sont les suivants :

• Augmentation du score Lighthouse et du référencement.
• Une seule base de code.
• Test sans frottement.
• Boucle de rétroaction instantanée pour les cycles de développement.
• Utilisation de workflows de déploiement Web PaaS gérés.
• Les technologies Web sont un ensemble de compétences pour un large éventail de développeurs.
• La seule solution de développement multiplateforme qui offre une expérience Web complète.
• Options illimitées pour personnaliser une conception sans compter sur les composants d’interface utilisateur limités d’un framework multiplateforme.
• Atteignez les utilisateurs avec une connexion Internet limitée (ou inexistante).

L’utilisation d’une PWA présente certains inconvénients/mises en garde, notamment :

• Fonctionnalité limitée: Il existe toujours un “écart d’application” avec les PWA par rapport à l’accès aux appareils natifs. Cependant, les navigateurs ont fait de grands progrès pour fermer cela. En savoir plus sur l’approche de Project Fugu pour combler le fossé des applications de Thomas Steinneret visitez Ce que le web peut faire pour voir les capacités de votre navigateur. Lors du choix de votre technologie, il y a de fortes chances que votre projet PWA se trouve dans la majorité des applications qui ne connaissent pas de restrictions concernant les capacités/fonctionnalités.
• Manque de standardisation: L’interview de Thomas Steiner ci-dessus traite d’une “norme PWA”, qui fait actuellement défaut. À mon avis, c’est la raison d’une grande partie de la confusion autour du sujet et de la difficulté des développeurs à passer ce premier “moment aha”. Cette confusion a conduit à un élan technologique plus lent qu’il ne devrait l’être. De plus, à cause de ce manque de clarté, le marketing ou la direction peuvent même ne pas savoir demander une PWA parce qu’ils ne comprennent pas ce que c’est.
• Boutique d’applications iOS: Les magasins d’applications ne répertorient pas actuellement les PWA, ils sont donc plus difficiles à trouver que les applications natives. Il existe des moyens de le faire. Cependant, la clé est de rendre votre application Web aussi bonne ou meilleure que la native. Faites-le bien, et les dieux Apple vous souriront, car la chose la plus importante dans les critiques semble être que vous offriez une bonne expérience mobile. Ionic, un framework utilisant WKWebView dans les applications iOS natives avant même que PWA ne soit un terme, a des informations intéressantes dans leurs forums. Si vous savez ce que vous faites, ce ne sera pas un problème. Vous pouvez consulter la section “obtenir votre application Web dans les magasins d’applications” de mon précédent article Opensource.com pour plus d’informations.
• Problèmes de sécurité potentiels dans certains cas: Le navigateur utilise des cookies comme authentification. Une méthode de navigateur éprouvée pour maintenir l’état depuis sa création, cela peut ne pas répondre aux besoins de votre projet. Le navigateur dispose d’une excellente gestion des mots de passe et évolue constamment et met en œuvre d’autres méthodes d’authentification, telles que Webauthn. L’utilisation de domaines associés fournit une autre couche de sécurité.

Je crois que par rapport aux alternatives, “le Web est gagnant”, et les progrès futurs minimiseront ces inconvénients car le Web offre de nouvelles fonctionnalités. Je ne pense pas que le développement natif va disparaître, mais il y aura des intégrations plus transparentes entre WebView et le code natif.

Emballer

Bien que les PWA en soient encore à leurs premiers stades de développement, elles ont le potentiel de révolutionner la façon dont nous utilisons le Web. Chaque jour, je vois un nouveau site Web repousser les limites de ce que peut être une PWA. Que la direction sache ou non qu’elle construit une PWA, je rencontre souvent des applications Web et des équipes de développement qui me surprennent par la façon dont elles élargissent l’utilisation des technologies Web ou transmettent une application native au lieu d’un site Web mobile bien optimisé.