Développer une application Web progressive rien en 15 minutes

Google Play a une application développée par Chilango Lab qui a plus d'un million de téléchargements et une cote assez élevée. Cela s'appelle Nothing , qui peut être traduit par «Nothing», et c'est merveilleux en ce qu'il ne fait absolument rien. Certes, un agréable œuf de Pâques y est caché, mais cela ne change rien. Si vous analysez cette application, il s'avère que sa taille est de 14 Mo, lors de l'installation cela prend 19,24 Mo.


L'auteur du document, dont nous publions la traduction aujourd'hui, dit qu'en examinant cette application, il s'est demandé si elle pouvait être réécrite pour qu'elle prenne moins de place.

Il a réussi. À savoir, il a recréé la fonctionnalité de Nothing en utilisant HTML, CSS et JavaScript, ce qui en fait une application Web progressive ( PWA , Progressive Web App). Il fonctionne sans connexion Internet, vous pouvez l'appeler, comme une application classique, depuis l'écran principal. La principale différence entre une application Android classique et sa copie PWA est la taille. Le premier, rappelez-vous, occupe 19,24 Mo sur l'appareil. Le second - 205 Ko.


Application normale et PWA

Créer des icônes pour rien

Avant de vous parler du code, créez une icône pour PWA Nothing. Pour résoudre ce problème, j'ai utilisé l'excellent outil open source Launcher Icon Generator .


Générateur d'icônes de lanceur

En utilisant le générateur d'icônes du lanceur, j'ai pu créer une icône pour mon option Nothing littéralement instantanément. Le programme génère automatiquement des icônes de différentes tailles.

Pwacompat

Une fois l'icône terminée, je devais créer un manifeste pour l'application Web . Grâce à lui, le navigateur Chrome pour Android affichera un écran de démarrage au démarrage de PWA. Est-il possible de faire apparaître un tel écran dans d'autres navigateurs également? Oui, c'est possible, et pour cela, nous avons besoin de la bibliothèque PWACompat, qui nous permet d'implémenter exactement ce dont nous avons besoin. Il suffit, avec le manifeste, de se connecter dans le code PWA:

<link rel="manifest" href="manifest.json" /> <script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js"    integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"    crossorigin="anonymous"></script> 

Voici à quoi ressemble l'écran de démarrage dans Safari (iOS).


Écran de démarrage Safari

Mais cela ne se limite pas aux capacités de PWACompat. En particulier, cette bibliothèque vous permet de créer des balises META pour différents navigateurs qui décrivent comment PWA doit s'ouvrir, et définit également la couleur du thème en fonction du manifeste de l'application Web.

Ajout d'une application à l'écran d'accueil

L'une de mes fonctionnalités PWA préférées s'appelle A2HS (Ajouter à l'écran d'accueil), grâce à elle, vous pouvez ajouter une icône pour lancer l'application sur l'écran principal. Cependant, à partir de Chrome 68 sur Android, au lieu d'une grande bannière A2HS, un petit panneau d'informations avec une proposition appropriée s'affiche désormais.


Au revoir la bannière A2HS (Chrome 67 et versions antérieures)

Dans tous les cas, le tableau de bord est une solution intermédiaire, une fois cette fonctionnalité supprimée de Chrome. Je devais donc créer une interface A2HS plus agréable pour PWA Nothing.


Bouton Installer (gauche), bouton Installer et panneau A2HS (centre), boîte de dialogue Ajouter à l'écran d'accueil (droite)

Dans ce cas, si le navigateur prend en charge la possibilité d'ajouter une application à l'écran principal, il affichera, en haut de la page, le bouton Installer. Lorsque l'utilisateur clique sur ce bouton, la boîte de dialogue Ajouter à l'écran d'accueil est appelée.

Voici le code pertinent.

 var installPromptEvent; var btnInstall = document.querySelector('#install'); window.addEventListener('beforeinstallprompt', function (event) {   event.preventDefault();   installPromptEvent = event;   btnInstall.removeAttribute('disabled'); }); btnInstall.addEventListener('click', function () {   btnInstall.setAttribute('disabled', '');   installPromptEvent.prompt();   installPromptEvent.userChoice.then((choice) => {       if (choice.outcome === 'accepted') {           console.log('User accepted the A2HS prompt');       } else {           console.log('User dismissed the A2HS prompt');       }       installPromptEvent = null;   }); }); 

Si le site répond aux critères A2HS, le navigateur beforeinstallprompt événement beforeinstallprompt .

Oeuf de Pâques

Attention, il y aura un spoiler!


À strictement parler, le PWA Nothing Easter Egg est un code Konami et une vidéo de 10 heures sur YouTube .


Appel d'oeuf de Pâques (haut, haut, bas, bas, gauche, droite, gauche, droite et deux touches)

Une fois que l'utilisateur a terminé le code, PWA ouvrira cette vidéo .

Pour ajouter la prise en charge du code Konami à mon application, j'ai utilisé la bibliothèque Konami-JS . Il est petit, facile à utiliser et, entre autres, il prend en charge les appareils mobiles. C'est là que réside la seule différence entre mon PWA et l'application Android d'origine. En particulier, lorsque j'ai besoin, lors de la saisie du code, d'appuyer deux fois, dans l'application d'origine, vous devez utiliser le panneau avec des boutons.

Désactiver l'actualisation de la page lors de l'extraction

En cours de travail sur l'application, j'ai eu un petit problème. Lorsqu'un utilisateur essaie d'étirer une page vers le bas sur un appareil mobile, cela provoque une actualisation de la page (pull-to-refresh). Je n'en ai pas besoin.


Actualisation de page indésirable

Heureusement, traiter ce problème est facile. Tout ce dont vous avez besoin est d' une ligne de code CSS :

 overscroll-behavior-y: contain 

Hébergement

Netlify a été choisi comme hébergeur pour PWA Nothing. Il s'agit d'une plate-forme universelle pour les projets Web modernes. La raison pour laquelle j'ai décidé d'héberger mon application sur Netlify est que tout est très facile à configurer ici. De plus, tout cela est gratuit.


Panneau de configuration Netlify

Pour déployer un projet sur Netlify, vous pouvez utiliser l'une des trois méthodes. Nous parlons d'outils de ligne de commande, de déploiement manuel et de déploiement continu.

▍ Outils de ligne de commande Netlify

Il s'agit d'une manière classique de déployer des projets Web. Pour l'utiliser, vous devez installer la CLI Netlify, vous connecter à votre compte, initialiser le projet et le déployer. Cela ressemble à ceci:

 > brew tap netlify/netlifyctl > brew install netlifyctl > netlifyctl login > netlifyctl init > netlifyctl deploy 

▍Déploiement manuel

Cette méthode est peut-être la plus simple, le déploiement d'applications s'effectue en quelques mouvements de souris.


Déploiement manuel

J'ai tellement aimé cette fonctionnalité que j'aimerais que quelque chose comme ça apparaisse dans Firebase. En fait, le déploiement d'un projet se résume à glisser-déposer son dossier sur une page Web.

▍ Déploiement continu

Maintenant, j'utilise cette méthode particulière. Après avoir lié mon référentiel GitHub à Netlify, lorsque j'y envoie le code, Netlify crée et déploie automatiquement le projet. Magique, pas autrement.

▍HTTPS

Étant donné que les PWA doivent être servis via HTTPS à partir d'une source sécurisée, je devais m'assurer que HTTPS était activé sur mon site. Certes, je n'ai pas eu à faire beaucoup d'efforts dans ce domaine, car Netlify fournit gratuitement HTTPS pour tous les domaines, y compris ses propres domaines utilisateur.


Https

De plus, à partir du panneau de configuration Netlify, vous pouvez activer la transition forcée vers HTTPS ( HSTS ). Cela assurera une protection continue du site.

Analyse de projet avec phare

Lighthouse est un outil automatisé open source pour améliorer la qualité des pages Web. Avec son aide, vous pouvez analyser n'importe quelle page - publique ou nécessitant une authentification. Il vous permet entre autres d'analyser les performances et l'accessibilité des pages, d'explorer des applications web progressives.


Phare

Ma candidature a réussi à marquer 97 points en termes de performances et 100 points dans d'autres indicateurs. Voici le rapport complet.

Résumé

Comme vous pouvez le voir, une application Web progressive qui ne fait rien se révèle être beaucoup plus petite qu'une application Android avec des fonctionnalités tout aussi riches. Ici, vous pouvez découvrir PWA Nothing. Et ici, vous pouvez trouver son code source.

Chers lecteurs! Que pensez-vous des applications Android que vous souhaitez recréer sous forme PWA?