PWA est juste

Le concept des applications Web progressives (PWA) existe depuis longtemps, depuis le printemps 2018, les applications de cette classe sont prises en charge par tous les principaux navigateurs, mais la prévalence des technologies PWA, malgré leurs évidents «avantages», est encore très faible.

Les experts de Google (y compris sur Habré) écrivent de manière très informative et compétente sur PWA, mais leurs recommandations sont plus utiles à ceux qui connaissent déjà le sujet. Cet article est destiné à montrer que Progressive Web Apps n'est pas difficile, et les développeurs de tout site peuvent et doivent utiliser ces technologies maintenant.

Philosophie PWA

Pour commencer, il convient de noter qu'il n'existe pas de définition exacte de l'application PWA. Vous ne pouvez pas dire clairement si ce site est PWA ou non. Il s'agit d'une longue échelle sur laquelle le sophomore Petya, qui a ajouté un manifeste d'application Web, peut créer une icône de page d'accueil sur l'écran d'accueil du téléphone mobile; et extérieurement indiscernable d'un site d'information régulier, dont seuls les utilisateurs peuvent dire qu'il est étonnamment rapide et pratique, et c'est parce que quelque part à l'intérieur il bat le cœur chaleureux d'un travailleur de service (travailleur de service).

La relativité PWA réside dans le nom lui-même - "progressif". Progressif par rapport à quoi et dans quelle mesure? Mais cette relativité est en fait très bonne, car vous pouvez étudier les technologies PWA et les appliquer progressivement dans vos projets en cours, sans remodelage et refactoring global.

D'un autre côté, PWA a une idée, et l'idée est assez claire et puissante. Et la lenteur avec laquelle elle se déroule peut bien indiquer l’ampleur des conséquences.

Architecture PWA

PWA est une application Web créée à l'aide de certaines technologies pour atteindre des cibles spécifiées.



Les cibles sont déchiffrées comme suit:

Fiable - l'application est téléchargée et affichée immédiatement, quels que soient l'état et la qualité de la connexion réseau.
Rapide (rapide) - l'échange de données sur le réseau est rapide, l'interface utilisateur est fluide et réactive.
Attractivité (Engaging) - rend l'expérience utilisateur avec l'application confortable et agréable, l'incitant à vouloir en faire l'expérience encore et encore et encore ...

Du point de vue de Google, c'est exactement ce qui sépare les sites Web des applications natives en termes de look and feel.

En d'autres termes, le développeur se voit proposer des outils (Service Worker, Push Notifications, etc.) et des objectifs sont indiqués (le site / l'application doit être rapide à charger, travailler sur une connexion faible, pas de «lag», travailler hors ligne si nécessaire). Jusqu'où le développeur ira dans cette voie ne dépend que de lui.

PWA et applications natives

Le fait que PWA ressemble aux applications natives est plutôt une solution cosmétique (bien qu'elle soit importante pour l'utilisateur d'un point de vue psychologique). Mais le fait qu'elles soient similaires en interne (toutes les principales ressources de l'application peuvent être stockées sur le client, seul le contenu changeant sera transmis sur le réseau) est une énorme réussite.

Vous pourriez même appeler cela une révolution cachée. En fait, le navigateur est utilisé comme une sorte de machine virtuelle qui stocke et exécute l'application PWA. Comme Android est une machine virtuelle pour les applications Android, le navigateur devient une machine virtuelle pour PWA. Tout comme une application native accède à ses ressources via un système de fichiers, PWA aussi accède à ses ressources - quoique via HTTP, mais stockées localement.

Et pour une fois, tout cela fonctionne de la même manière sur tous les principaux navigateurs et sur toutes les principales plates-formes.


Bien sûr, il existe des différences entre PWA et les applications natives - principalement dans les droits d'accès aux ressources système, mais le travail dans ce sens va même dans le domaine du HTML5 pur, et pour PWA, les privilèges supplémentaires ne seront pas un problème.

La technologie

Examinez brièvement les principaux moteurs de PWA.

Travailleur des services

Le cœur de la PWA est Service Worker. Il s'agit de la couche proxy entre le frontend et le backend, située dans le navigateur. Toutes les demandes du navigateur le traversent. Cette division en deux couches indépendantes nous a permis de rendre la transition d'un site Web régulier vers PWA aussi simple que possible.

Depuis le stockage, Service Worker a accès à Cache Storage pour les ressources Web et à IndexDB pour les données. Mais, plus important encore, une liberté totale de mise en œuvre de la logique métier.

Vous pouvez, par exemple, accepter une demande d'un navigateur, vérifier l'état du réseau, prendre des données du stockage, effectuer des opérations avec eux et renvoyer un certain résultat au navigateur - qui pensera que la réponse est venue du serveur. Ou ce ne sera pas le cas - comme le veut le développeur, il le fera. Deux couches de navigateur (client frontend et Service Worker) vous permettent d'écrire des applications à part entière.

Dans le même temps, pour la plupart des sites, la fonctionnalité de mise en cache du Service Worker sera suffisante pour se transformer en PWA.

PWA ne dépend d'aucun framework, c'est du pur javascript, bien que même les spécialistes de Google sur Habré conseillent pour une raison quelconque d'utiliser des générateurs de code de bibliothèque. Service Worker est magnifiquement écrit à la main, ce qui est nécessaire pour comprendre et contrôler la logique de votre application.

D'un point de vue programmatique, Service Worker est un fichier javascript qui est inclus dans le code html de la page. Dans ce document, le développeur définit la logique de travail avec les demandes provenant du frontal et d'autres fonctionnalités.

Https

PWA requiert que toutes les ressources du site soient transmises via le protocole HTTPS. Vous pouvez obtenir un certificat SSL gratuitement; certains hébergeurs le font pour vous. Mais il est essentiel que le site ne comporte pas de liens vers des ressources non sécurisées - certains navigateurs n'afficheront tout simplement pas le site dans ce cas.

Le principal problème rencontré dans de tels cas est les images. Souvent, les éditeurs ou les commentateurs mettent des liens vers des images provenant d'Internet dans le matériel, parfois ils y arrivent automatiquement (dans le matériel). Il est nécessaire de sauvegarder les images soit pour vous-même, soit pour un service avec accès via HTTPS.

Shell d'application

Le shell de l'application n'est qu'un squelette d'une interface graphique, un modèle. Par exemple, prenez un site moyen avec un en-tête, deux colonnes et plus. En gros, nous avons coupé le contenu de la page actuelle et toutes les informations dynamiques, la statique restante est le shell de l'application.

L'essentiel est que le shell de l'application est stocké sur le client et chargé au démarrage de l'application, puis des informations dynamiques y sont chargées à partir du réseau. Et pendant le chargement, le shell de l'application doit être magnifique ("chargeurs" au sol, etc.)

Cette architecture du site - téléchargement de contenu et autres informations dynamiques via des appels ajax - peut être pensée et implémentée sur le site à l'avance, puis la transition vers PWA sera assez simple.

Un shell d'application est comme un shell de programme natif. Regardez votre PWA comme un programme natif, et beaucoup de choses deviendront plus faciles.

Manifeste d'application Web

Un fichier JSON qui définit de manière déclarative le nom de l'application pour le navigateur, une icône de ce à quoi ressemblera PWA (plein écran, autonome, etc.) et d'autres paramètres. Vous permet «d'installer» PWA en tant qu'application distincte sur l'écran d'accueil de votre smartphone.

Notifications push

Si vous surfez sur Internet avec Chrome DevTools, ouvrez dans l'onglet Application, vous pouvez voir combien peu de sites utilisent la technologie PWA. Et 90% de ceux qui l'utilisent ne le font que pour des notifications push.

Jusqu'à présent, il s'agit de la technologie PWA la plus populaire et la plus utilisée - au cours des derniers mois, le nombre de sites que vous visitez et recherchez le bouton "Bloquer" avec la souris pour obtenir les dernières nouvelles a augmenté, le sentiment a augmenté de nombreuses fois et le désir d'imposer la vôtre Push est comme le spam.

Mais vous pouvez également proposer un abonnement à la deuxième ou troisième visite de l'utilisateur sur le site lorsqu'il est déjà clair qu'il n'est pas là par hasard.