Construire une PWA en utilisant Angular 6

Tout au long de ce didacticiel, nous utiliserons Angular 6 pour créer une application Web progressive, étape par étape, en implémentant les principes fondamentaux des PWA avec Angular CLI v6.

Dans ce didacticiel, nous utiliserons le dernier Angular 6 pour créer une PWA en implémentant les principes fondamentaux qui constituent une PWA. Nous commencerons par créer une application Web frontale utilisant une API JSON. Pour cela, nous utiliserons le module Angular HttpClient pour envoyer des requêtes HTTP à une API JSON statique générée à partir du référentiel JavaScript Jargon simplifié GitHub. Nous utiliserons également la conception matérielle pour construire l’interface utilisateur via le package Angular Material.

Ensuite, nous utiliserons le panneau «Audits» (Lighthouse) de Chrome DevTools pour analyser notre application Web par rapport aux principes fondamentaux des PWA. Enfin, nous expliquerons et ajouterons les fonctionnalités PWA à notre application Web conformément à la section «Progressive Web App» du rapport Lighthouse.

Avant de commencer la mise en œuvre de notre PWA, présentons d'abord les PWA et Lighthouse. Lectures recommandées : Native et PWA: choix, pas des challengers!

Qu'est-ce qu'une PWA?

Une application Web progressive ou PWA est une application Web dotée d'un ensemble de fonctionnalités (similaire à l'application native). applications) qui offrent une expérience similaire à une application pour les utilisateurs. Les PVA doivent répondre à un ensemble d’exigences essentielles que nous verrons ensuite. Les PWA sont similaires aux applications natives, mais sont déployées et accessibles à partir de serveurs Web via des URL. Nous n'avons donc pas besoin de passer par des magasins d'applications.

Une PWA doit être

• ] Travaillez pour tous les utilisateurs, quel que soit le choix du navigateur, car ils constituent un principe fondamental de l'amélioration progressive.
• Responsive
  S'adapte à tout facteur de forme, bureau, mobile, tablette ou autre. independent
  Amélioré avec les opérateurs de service pour travailler hors connexion ou sur des réseaux de faible qualité.
• App-like
  Utilisez le modèle app-shell pour fournir une navigation et des interactions de style application.
• Fresh
  Always mis à jour grâce au processus de mise à jour du travailleur du service.
• Sécurisé
  Servi via HTTPS pour empêcher la surveillance et garantir que le contenu n'a pas été falsifié.
• Détectable
  W3C manifeste et l’étendue de l’inscription de l’employé de service permettant aux moteurs de recherche de
• Réengagez-vous facilement
  Installez
  Autorisez les utilisateurs à «garder» les applications qu'ils trouvent les plus utiles sur leur écran d'accueil sans avoir à se soucier de app store.
• Linkable
  Partage facile via URL et ne nécessite aucune installation complexe.

Lighthouse

Lighthouse est un outil d'audit open source créé par Google pour l'audit des sites Web et des applications. performance d'accessibilité, SEO, meilleures pratiques et fonctionnalités PWA.

Vous pouvez accéder à Lighthouse à partir de l'onglet Audit de Chrome DevTools en tant que module dans Node.js ou en tant qu'outil CLI. Vous pouvez utiliser Lighthouse en fournissant une URL, puis en exécutant les audits qui vous fourniront un rapport contenant les résultats de l'audit. Ces suggestions sont essentiellement des suggestions pour améliorer votre application Web.

Installer Angular CLI v6 et générer un projet [19659010] Dans cette section, nous allons installer la dernière version de CLI angulaire, puis nous l’utiliserons pour créer un nouveau projet Angular 6.

La CLI angulaire nécessite Node.js> = 8,9+ assurez-vous que la version requise est installée en exécutant la commande suivante:

 $ node -v

Si Node.js n'est pas installé sur votre ordinateur, vous pouvez simplement accéder à la page de téléchargement officielle de Node et récupérer les binaires Node pour votre système.

et installez la dernière version d'Angular CLI en exécutant:

 $ npm install -g @ angular / cli

Remarque : En fonction de votre configuration npm, vous devrez peut-être ajouter _sudo_ pour installer les packages globalement.

Vous pouvez générer votre projet Angular 6 en exécutant le commande suivante dans votre terminal:

 $ ng new pwademo

Cela va créer un projet avec une structure qui ressemble à:

La plupart du travail effectué sera dans le dossier src / contenant le code source de l'application.

Création de l'application angulaire

Après avoir généré un projet, nous allons créer un site Web application qui utilise une API JSON et affiche les éléments sur la page d'accueil. Nous utiliserons le service HttpClient pour envoyer des requêtes HTTP et du matériel angulaire pour la construction de l'interface utilisateur.

Ajout de matériau angulaire

Merci à Angular CLI v6 et au nouveau ng add commande, ajouter du matériel angulaire à votre projet n’est qu’une seule commande. Vous avez juste besoin d'exécuter la commande suivante depuis votre terminal:

 $ cd pwademo
$ ng add @ angular / material

La capture d'écran montre que la commande installe le package requis à partir de npm et met à jour un ensemble de fichiers pour configurer le matériau angulaire dans votre projet, qui nécessitait auparavant des mises à jour manuelles.

HttpClient Et consommer l'API JSON

Configurons maintenant le projet Angular pour utiliser HttpClient pour envoyer des requêtes HTTP. Tout d'abord, vous devez importer le module HttpClientModule dans le module d'application principal du fichier src / app / app.module.ts :

 /*...*/
import {HttpClientModule} depuis '@ angular / common / http';
@NgModule ({
déclarations: [
AppComponent
],
importations: [
/*...*/
HttpClientModule
],
fournisseurs: [],
bootstrap: [AppComponent]
})
classe d'exportation AppModule {}

C’est ça. Nous pouvons maintenant injecter et utiliser HttpClient dans tout composant ou service appartenant au module principal.

À des fins de démonstration, nous utiliserons une API JSON générée statiquement à partir du [19659067] Jargon JavaScript simplifié Référentiel GitHub . Si vous consommez une autre ressource, assurez-vous que CORS est activé pour que le navigateur n'interdise pas la lecture de la ressource distante en raison de la stratégie d'origine .

Créons un service qui s'interface avec l'API . Dans votre dossier de projet, exécutez:

 $ ng g service api

Cela créera un service appelé ApiService dans le fichier src / app / api.service.ts .

Ouvrez maintenant le src / app / api. service.ts fichier et le mettre à jour pour refléter les modifications suivantes:

 import {Injectable} from '@ angular / core';
import {HttpClient} depuis '@ angular / common / http';
import {Observable} de 'rxjs';

Interface d'exportation Item {
name: string;
description: string;
url: string;
html: string;
markdown: string;
}

@ Injectable ({
fourniIn: 'root'
})

classe d'exportation ApiService {
dataURL privé: string = "https://www.techiediaries.com/api/data.json";
constructeur (httpClient privé: HttpClient) {}
fetch (): Observable  {
return <Observable  this.httpClient.get (this.dataURL);
}
}

Nous avons d'abord importé les classes HttpClient et Observable puis injecté le HttpClient dans le constructeur sous le nom httpClient et ajouté un fetch () méthode qui appelle la méthode get () de HttpClient (pour envoyer une requête HTTP GET à notre point de terminaison JSON) et renvoie un objet Observable auquel nous pouvons nous abonner ultérieurement .

Nous avons également déclaré une interface élément qui représente un élément unique des données JSON renvoyées.

Ensuite, importez ce service à partir du composant d'application. Ouvrez le fichier src / app / app.component.ts et ajoutez:

 import {Component, OnInit} à partir de "@ angular / core";
import {ApiService} depuis './api.service';
import {Item} de './api.service';

@Composant({
sélecteur: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
classe d'exportation AppComponent implémente OnInit {
title = 'pwademo';
items: Array ;
constructeur (privé apiService: ApiService) {
}
ngOnInit () {
this.fetchData ();
}
fetchData () {
this.apiService.fetch (). subscribe ((données: Array ) => {
console.log (données);
this.items = données;
}, (err) => {
console.log (err);
})
}
}

Nous importons le ApiService que nous avons créé auparavant et nous l'injectons sous le nom apiService nous importons également la classe Item qui représente un élément unique de notre JSON data et nous déclarons la variable items de type Array qui contiendra les éléments récupérés.

Ensuite, nous ajoutons une méthode fetchData () qui appelle notre fetch () méthode que nous avons définie dans le ApiService qui renvoie un objet observable. Nous nous abonnons simplement à cette observable pour envoyer une requête GET à notre point d'extrémité JSON et obtenir les données de réponse que nous assignons finalement au tableau .

Nous appelons fetchData () méthode dans l'événement de cycle de vie ngOnInit () pour qu'il soit appelé une fois que le composant AppComponent est initialisé.

Ajout de l'interface utilisateur de l'application

consiste en une barre de navigation et le squelette de la page qui sera créée avec le matériau angulaire.

Avant d'utiliser un composant de matériau angulaire, vous devez importer son module. Chaque composant Material appartient à son propre module.

Ouvrez le fichier src / app / app.module.ts et ajoutez les importations suivantes:

 /*...*/
import {MatToolbarModule} depuis '@ angular / material / toolbar';
import {MatCardModule} depuis '@ angular / material / card';
import {MatButtonModule} depuis '@ angular / material / button';

@NgModule ({
déclarations: [
AppComponent
],
importations: [
/*...*/
MatToolbarModule,
MatCardModule,
MatButtonModule
],
fournisseurs: [],
bootstrap: [AppComponent]
})
classe d'exportation AppModule {}

Nous importons des modules pour les composants barre d'outils, carte et bouton et les ajoutons au tableau imports de l'appModule .

Ensuite, ouvrez le src / app /app.component.html fichier, supprimez ce qu'il contient et ajoutez:

 JS-jargon 





 {{item.name}} 


 {{item.description}}


 Suite 

Nous utilisons des composants matériels pour créer l'interface utilisateur. Le composant est utilisé pour créer une barre d'outils Material et le composant est utilisé pour créer une carte Material, etc.

Nous parcourons le tableau items qui est rempli par fetchData () méthode lorsque le composant est initialisé et affiche les éléments en tant que cartes Material. Chaque carte contient le nom, la description et un lien pour plus d’informations (le lien est appelé bouton Matériel en utilisant la directive mat-raised-button ).

Voici une capture d'écran de l'application: 19659097] Application de démonstration « />

Création de l'application pour la production

Généralement, lorsque vous vérifiez votre application pour les fonctionnalités PWA, vous devez d'abord la créer pour la production car la plupart des fonctionnalités PWA ne sont pas ajoutées au développement. Par exemple, vous ne voulez pas que les employés du service et la mise en cache soient activés en développement car vous devrez périodiquement mettre à jour les fichiers.

Construis l'application pour la production en utilisant la commande suivante:

 $ ng build --prod

La version de production sera disponible dans le dossier dist / pwademo . Nous pouvons utiliser un outil comme http-server pour le servir.

D'abord, installez http-server en utilisant la commande suivante:

 $ npm i -g http-server

Vous pouvez ensuite l'exécuter à l'aide de la commande suivante:

 $ cd dist / pwademo
$ http-server -o

L'option -o ouvre automatiquement le navigateur par défaut de votre système et accède à l'adresse http://127.0.0.1:8080/ où notre application Web est disponible.

Analyse de l'application à l'aide du phare

Analysons maintenant notre application à l'aide de Lighthouse. Commencez par lancer Chrome et visitez notre application http://127.0.0.1:8080/ .

Ensuite, ouvrez Outils de développement ou appuyez sur Ctrl + Shift + I et cliquez sur le panneau Audit .

Vous devez de préférence définir l'émulation sur Mobile au lieu de Desktop pour émuler un environnement mobile. Cliquez ensuite sur Effectuer un audit… bouton bleu. Une boîte de dialogue s'ouvre dans laquelle vous devez choisir les types d'audits à effectuer sur votre application Web. Désélectionnez tous les types, à l'exception de Application Web progressive puis cliquez sur le bouton Exécuter l'audit .

Attendez que le phare génère le rapport. Il s'agit d'une capture d'écran du résultat à cette étape:

Lighthouse effectue une série de vérifications qui valident les aspects d'une application Web progressive spécifiée par la liste de contrôle PWA .
Nous obtenons une note initiale de ³⁶ [1945 ₁₀₀ parce que nous avons effectué certaines vérifications.

Notre demande porte sur 7 Travailleurs de service Rehaussement progressif HTTPS et Manifeste d'application Web qui constituent les aspects essentiels d'une PWA.

Enregistrement d'un travailleur des services [19659057] Les deux premiers audits en échec («N'enregistre pas un technicien de maintenance» et «Ne répond pas avec un 200 en mode hors connexion») sont liés à Service Workers et à la mise en cache. Alors, qu'est-ce qu'un agent de service?

Un agent de maintenance est une fonctionnalité disponible sur les navigateurs modernes, qui peut être utilisée comme proxy réseau pour permettre à votre application d'intercepter les requêtes réseau afin de mettre en cache les données et les actifs. Cela pourrait être utilisé pour implémenter des fonctionnalités PWA telles que le support hors ligne et les notifications Push, etc.

Pour réussir ces audits, il suffit d'enregistrer un technicien et de l'utiliser pour mettre les fichiers en cache localement. En mode hors connexion, le SW doit renvoyer la version en cache locale du fichier. Nous verrons un peu plus tard comment l'ajouter avec une commande CLI.

Lectures recommandées : Etablissement d'un agent de service: étude de cas

Amélioration progressive

Le troisième a échoué audit («Ne fournit pas de contenu de secours lorsque JavaScript n'est pas disponible») est lié à Progressive Enhancement qui est un aspect essentiel d'une PWA et fait simplement référence à la capacité des PWA à fonctionner sur différents navigateurs fonctionnalités avancées si elles sont disponibles. Un exemple simple de PE est l'utilisation de la balise HTML

HTTPS

Le quatrième audit en échec («Ne redirige pas le trafic HTTP vers HTTPS») est lié à HTTPS, qui constitue également un aspect essentiel des PWA (les travailleurs de service ne peuvent être desservis que par des origines sécurisées). L’audit «Utilise HTTPS» lui-même est considéré comme passé par Lighthouse puisque nous auditons localhost, mais une fois que vous utilisez un hôte réel, vous avez besoin d’un certificat SSL. Vous pouvez obtenir un certificat SSL gratuit auprès de différents services tels que Let's Encrypt, Cloudflare, Firebase ou Netlify, etc.

Manifeste de l'application Web

Les trois audits échoués ("L'utilisateur ne sera pas invité à installer l'application Web", "Non configuré pour un écran de démarrage personnalisé" et "La barre d'adresse ne correspond pas aux couleurs de la marque" sont liés à un Manifeste d'application Web manquant, qui contient le nom, la description et les icônes. et autres informations requises par une PWA. Il permet aux utilisateurs d'installer l'application Web sur l'écran d'accueil tout comme les applications natives sans passer par un magasin d'applications.

Vous devez fournir un manifeste d'application Web et le référencer à partir du fichier index.html tag avec rel propriété définie sur manifeste . Nous verrons ensuite comment procéder automatiquement avec une seule commande CLI.

Implémentation des fonctionnalités PWA

La fonction CLI angulaire v6 vous permet d'ajouter rapidement des fonctionnalités PWA à une application angulaire existante. Vous pouvez transformer votre application en une PWA en exécutant simplement la commande suivante dans votre terminal à partir de la racine du projet:

 $ ng add @ angular / pwa

La commande ajoute automatiquement les fonctionnalités PWA à notre application Angular, telles que:

• Un fichier manifest.json
• Différentes tailles d'icônes dans le src / assets / icons folder,
• L'ouvrier de service ngsw-worker.js

Ouvre le dossier dist / qui contient la version de production. Vous trouverez divers fichiers, mais concentrons-nous sur les fichiers relatifs aux fonctionnalités PWA que nous avons mentionnés ci-dessus:

Un fichier manifest.json contenant le contenu suivant a été ajouté:

 {
    "nom": "pwademo",
    "short_name": "pwademo",
    "theme_color": "# 1976d2",
    "background_color": "#fafafa",
    "display": "autonome",
    "portée": "/",
    "start_url": "/"
    "icônes": [
        {
        "src": "assets/icons/icon-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-96x96.png",
        "sizes": "96x96",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-152x152.png",
        "sizes": "152x152",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
    ]
}

Comme vous pouvez le voir, le fichier manifest.json contient toutes les informations requises par une PWA, telles que le nom, la description et start_url etc.

Le fichier manifest.json contient des liens vers des icônes de tailles différentes, qui ont également été ajoutées automatiquement dans le dossier assets / icons . Une fois que vous êtes prêt à créer la version finale de votre PWA, vous devrez bien sûr modifier ces icônes avec la vôtre.

Dans le fichier index.html le fichier manifest.json est référencé à l'aide de:

Le fichier ngsw-worker.js a également été ajouté automatiquement et contient le service worker. Le code pour installer ce service worker est automatiquement inséré dans le fichier src / app / app.module.ts :

 ...
import {ServiceWorkerModule} depuis '@ angular / service-worker';

@NgModule ({
déclarations: [
AppComponent
],

importations: [
...
ServiceWorkerModule.register('/ngsw-worker.js', { enabled:  environment.production })
],

Le @ angular / service-worker est installé par la commande ng add et ajouté en tant que dépendance à pwademo / package.json :

 "dépendances": {
...
"@ angular / service-worker": "^ 6.1.0"
}

La prise en charge de la génération de l'agent de service est également activée dans l'interface de ligne de commande. Dans le fichier angular.json une option de configuration "serviceWorker": true est ajoutée.

Dans le fichier index.html une balise META pour [theme-color) avec la valeur de # 1976d2 est ajouté (il correspond également à la valeur theme_color dans le fichier manifest.json ):

La couleur du thème indique au navigateur la couleur à colorier des éléments de l'interface utilisateur tels que la barre d'adresse .

Ajout de la couleur du thème à index.html et Les fichiers manifest.json corrigent l'audit de la barre d'adresse correspond aux couleurs de la marque .

Le fichier de configuration de Service Worker

Un autre fichier src / ngsw-config.json est ajouté au projet mais ce n'est pas un fichier requis pour les PWA. Il s’agit d’un fichier de configuration qui vous permet de spécifier les fichiers et les URL de données que l’agent de service Angular doit mettre en cache et comment mettre à jour les fichiers et les données mis en cache. Vous pouvez trouver tous les détails à propos de ce fichier à partir des documents officiels .

Note : À la date d'écriture, avec le dernier 6.1.3 La commande précédente ng add @ angular / pwa échouera avec cette erreur : Le chemin "/ngsw-config.json" existe déjà donc pour l'instant la solution est de rétrograder @ angular / cli et @ angular / pwa à la version 6.0.8 .

Exécutez simplement les commandes suivantes dans votre projet: [19659041] $ npm i @ angular / cli @ 6.0.8
$ ng i @ angulaire / pwa @ 6.0.8
$ ng add @ angular / pwa

Reprenons maintenant les audits sur notre PWA local hébergé localement. Ceci est le nouveau score PWA:

La CLI angulaire n'ajoute pas automatiquement le code de secours JavaScript mentionné dans la section Améliorations progressives; ouvrez donc le fichier src / index.html et ajoutez-le:

Ensuite, reconstruisez votre application et réexécutez les audits. C'est le résultat maintenant:

Un seul audit a échoué, lié à la redirection HTTPS. Nous devons héberger l'application et configurer HTTP en redirection HTTPS .

Exécutons maintenant les audits sur une version hébergée et sécurisée de notre PWA .

Grand aperçu )

Nous obtenons un score de ¹⁰⁰ [1945 ₁₀₀ ce qui signifie que nous avons implémenté avec succès tous les principes fondamentaux des PWA.

Vous pouvez obtenir le code final de cette PWA de démonstration à partir de ceci Dépôt GitHub .

Conclusion

Dans ce didacticiel, nous avons construit une application Angular simple et l'avons transformée en une PWA utilisant une CLI angulaire. Nous avons utilisé Google Lighthouse pour auditer notre application pour les fonctionnalités PWA et pour expliquer divers principes de base des PWA, tels que Service Workers pour l’ajout d’une assistance hors ligne et de notifications push. Le fichier Web Manifest pour activer les fonctions d'ajout à l'écran d'accueil et aux écrans de démarrage, Progressive Enhancement et HTTPS .

vérifier manuellement les autres éléments surlignés (dans la section «Éléments supplémentaires à vérifier manuellement») mais non vérifiés automatiquement par Lighthouse. Ces vérifications sont requises par la référence Liste de vérification PWA de Google. Ils n'affectent pas le score PWA mais il est important de les vérifier manuellement. Par exemple, vous devez vous assurer que votre site fonctionne sur plusieurs navigateurs et que chaque page a une URL importante pour la partition sur les médias sociaux.

sont également sur d'autres aspects tels que l'amélioration de la performance et de l'accessibilité, vous pouvez également utiliser Lighthouse pour vérifier votre PWA (ou tout site Web général) pour ces aspects et l'améliorer au besoin.

yk, il)