L'auteur du document, dont nous publions la traduction aujourd'hui, dit qu'il est peut-être pressé, mais ce dont il veut parler est au moins une nouvelle très intéressante. Nous parlons d'applications Web progressives de bureau, qui pourraient très bien déplacer la position des applications basées sur Electron.
Innovations Chrome v70
La dernière version de Chrome (v70) prend en charge Desktop Progressive Web Apps (PWA) sur les plates-formes Linux et Windows.
Prise en charge PWA de bureau dans ChromeSi vous regardez la liste des systèmes pris en charge, il devient immédiatement apparent l'absence de MacOS en elle. Cependant, ce n'est que jusqu'à la sortie de Chrome v72.
Prise en charge PWA de bureau sur MacOSIl est important de noter que bien que cette fonctionnalité ne soit pas activée par défaut sur MacOS, elle peut être activée à l'aide de l'indicateur approprié. Pour ce faire, ouvrez Chrome, accédez à
chrome: // flags et trouvez ce flag là-bas. Vous pouvez également accéder directement au drapeau en utilisant le lien
chrome: // flags / # enable-desktop-pwas .
Que sont les applications Web progressives?
Nous n'entrerons pas dans les détails spécifiques concernant PWA ici.
Voici la section de documentation de Google où vous pouvez en savoir plus. Pour voir et essayer PWA de vos propres yeux, ouvrez Chrome pour Android ou Safari dans iOS (ici, cependant, toutes les fonctionnalités PWA ne sont pas prises en charge) et voyez
ces exemples. Et
voici un discours sur ce sujet avec Google I / O '18.
Qu'est-ce qu'Electron?
Electron est une plate-forme qui permet aux développeurs de créer des applications de bureau multiplateformes en utilisant JavaScript, HTML et CSS. Quelques grandes bibliothèques et frameworks JavaScript sont également utilisés ici. Cela permet aux programmeurs Web d'entrer plus facilement dans le développement d'applications de bureau. Les applications à base d'électrons ont acquis une immense popularité ces dernières années. Dans le cadre de projets tels que Slack, VS Code, Atom, Discord, des efforts considérables ont été investis dans le développement d'applications utilisant Electron. Si vous n'êtes pas familier avec ces projets, alors vous devriez certainement regarder les applications et services correspondants. Les applications de bureau traditionnelles semblaient souvent maladroites, leurs éléments d'interface ressemblaient à quelque chose de dépassé. Electron a définitivement apporté beauté et grâce au monde des applications de bureau.
Qu'est-ce que PWA a à voir avec cela?
Bien que les applications Electron soient un phénomène croissant et évolutif et que leur mise en œuvre soit proche de la mise en œuvre des applications Web, elles présentent encore certains inconvénients. Tout d'abord, ces applications utilisent leurs propres instances du navigateur Chromium. Beaucoup de gens savent combien de RAM est nécessaire pour que Chrome fonctionne. Maintenant, afin d'évaluer la situation qui se produit dans le système lorsque plusieurs applications Electron sont lancées simultanément, vous devez prendre leur nombre et multiplier par cette quantité de mémoire. Si vous êtes intéressé, ouvrez quelques applications Electron et regardez combien de mémoire elles consomment.
Une utilisation excessive de la mémoire n'est pas très bonne en soi, et nous devons ajouter ici que de nombreuses applications Electron interagissent de manière spécifique avec Node.js, sans nécessairement le faire de la même manière que les applications Web correspondantes.
L'utilisation d'Electron ajoute aux difficultés associées à la prise en charge des anciennes versions des programmes et à la configuration du processus de mise à jour des applications.
Parlons maintenant du PWA de bureau. Imaginez des applications qui ressemblent à celles écrites en Electron, qui sont également pratiques à utiliser, mais en même temps, les installer est simple, elles sont également mises à jour sans problème, lors du transfert de matériaux vers un client à partir d'une seule application Web. Il semble que Chrome établit la norme pour un scénario de comportement similaire dans les PWA de bureau. Lorsqu'un utilisateur travaillant dans Chrome visite une certaine page Web et que l'application qui lui est présentée répond à
cet ensemble de critères, le développeur de l'application pourra proposer à l'utilisateur d'installer l'application sur son ordinateur. L'invite ressemble à celle ci-dessous.
Invitation à l'installation de PWALe développeur peut afficher cette invite uniquement après que le navigateur a
beforeinstallprompt événement
beforeinstallprompt de l'objet
beforeinstallprompt . Après avoir installé l'application, l'icône correspondante apparaît sur le bureau.
Icône du lanceur PWAAprès avoir démarré une telle application, elle s'ouvre dans une fenêtre de navigateur qui n'est pas équipée de commandes conventionnelles. Une telle application est perçue comme une véritable application de bureau.
Lancement de PWAExemple PWA
Voici un exemple de PWA de bureau dont les captures d'écran ont été utilisées comme illustrations ci-dessus.
Voici son référentiel sur GitHub. Pour installer cette application, vous devez activer le drapeau correspondant dans Chrome et passer au moins 30 secondes sur le site.
Comme déjà mentionné, une application Web, pour être considérée comme un PWA de bureau, doit répondre à un certain ensemble d'
exigences . Si vous souhaitez créer et tester votre propre PWA de bureau, vous pouvez prendre
ce référentiel comme base et prendre en compte les exigences. Si vous en faites un bref résumé, vous obtenez ce qui suit:
- L'application doit être servie via HTTPS.
- Il doit avoir un technicien de service installé avec au moins un gestionnaire d'
fetch . - Il doit contenir un fichier
manifest.json correctement formaté. - Ses pages doivent être conçues à l'aide de techniques de conception réactives.
Exemples supplémentaires
Si vous travaillez sur MacOS, PWA peut considérer que vous ne pouvez pas les installer et ils ne vous montreront pas d'invitation à les installer. Si vous activez les indicateurs et le bricolage appropriés avec la console du développeur, vous pouvez obtenir le PWA pour afficher une invite d'installation. Voici quelques-uns des PWA existants qui ont été installés sur le Mac.
▍Starbucks
Starbucks a beaucoup investi dans le développement d'une excellente PWA. Leur application de bureau était vraiment impressionnante.
PWA Starbucks▍Google Maps
Ceci est juste une excellente application. Il fait son travail et ne charge pas particulièrement le système, ce qui diffère par son travail rapide et sa conception réactive. Pour installer cette application, vous devez créer et télécharger le site mobile de Google Maps.
PWA Google Maps▍Twitter
Twitter a essayé de développer un PWA mobile, et la version de bureau peut être considérée comme un ajout digne à l'application mobile.
Twitter PWARésumé
Malgré le fait que beaucoup de bruit a été généré autour des PWA de bureau, vous devez être conscient que cette technologie est encore à ses balbutiements. En particulier, les directions de développement suivantes pour les PWA de bureau peuvent être notées:
- Liens profonds: les liens ouverts depuis Chrome invoquent l'application installée.
- Notifications sur les icônes d'application: affichez les notifications sur les icônes du lanceur d'applications de bureau, tout comme sur les icônes d'applications mobiles.
- Prise en charge des raccourcis clavier: possibilité d'écouter les événements du clavier à utiliser dans les applications de raccourcis clavier.
Une fois que les technologies de développement de bureau de PWA auront suffisamment développé, ces applications deviendront de sérieux concurrents des projets actuels basés sur Electron.
Chers lecteurs! Envisagez-vous de développer des PWA de bureau?
