ITInnovDesign
Latest Posts:

Le PWA(Progressive web app) c'est Quoi?
Le PWA(Progressive web app) c'est Quoi?

Le PWA(Progressive web app), de quoi s’agit il? comment il fonctionne? allons à sa découverte par un exemple avec le framework angular.

Les applications web traditionnelles sont généralement installées sur un serveur et sont disponibles aux utilisateurs en tout moment et en tout temps, tant qu’ils ont une connexion internet. Les applications mobiles natives de l’autre coté sont installées dans le telephone des utilisateurs, sont disponibles en tout tant meme hors connexion,et peuvent utiliser les resources du telephones(camera, fichier gps etc..),les PWA se situent entre les applications web et les applications mobiles natives, une PWA est une application web basée sur les concept suivante pour pouvoir le convertire en application mobile native:

Capable : il doit etre capable de manipuler les données du telephone de l’utilisateur ainsi que acceder aux differentes resources de ce telephone.

Joignable : il doit etre accessible à tout temps c’est à dire quand il y a connexion ou quand il n’y en a pas du tout comme une application native.

Installable : il doit etre installable dans un telephone comme une app native, donc accessible à partir d’un icone sur l’écran comme tout app native.

Convertire une application web en PWA demande beaucoup d’etapes donc le plus essentiel c’est l’utilisation des “worker service de javascript” qui n’est rien d’autre qu’une application dite proxy, c’est à dire une application à cheval tournant dans le navigateur, qui s’occupe de la communication http entre le navigateur et le serveur web, en quelque sorte les requetes http ne sont plus fait directement du navigateur vers le serveur web mais du navigateur vers le worker service et du worker service vers le serveur web.

Angular propose- une implementation des worker service qu’on peut utiliser pour convertire un site web en PWA.

Nous allons construire une petite application web avec le frontend angular pour visualliser les conditions meteo d’une ville, on utilisera pour cela les API REST OpenWeather qui permet d’acceder aux informations meteo de n’importe quelle place de la planete, pour cela allez sur le site Weather API — OpenWeatherMap, comme sur l’image ci dessous, cliquer sous le bouton “subscribe” en dessous de “Current Weather Data”

Dans la page suivante choisissez la version gratuite puis cliquez sur “Get API Keys” puis créer un account pour obtenir un API KEY (vous allez recevoir un email pour la confirmation de l’enregistrement, lisez le et acceptez)

Ouvrez powershell (je suis sur windows 10) et positionnez vous dans le repertoire ou vous voulez créer l’application angular puis tappez la commande suivante (pour installer angular globalement sur votre machine suivez ce lien)

ng new meteo-app — style=scss — routing=false

Ouvrez ensuite le projet crée dans VSC(Visual Studio Code) puis ouvrir un nouveau terminal integré dans VSC et tappez la commande suivante:

ng add @angular/material — theme=indigo-pink — typography=true — animations=true

cette commande nous permet d’ajouter angular material qui nous permet de faire un bon design (https://material.angular.io/) et elle permet de modifier le fichier angular.json pour y ajouter des fichiers css qui permettent d’integrer angular material dans notre projet

elle ajoute aussi dans le fichier index.html la typographie de google et le font robot de google

elle ajoute aussi dans le fichier scss ceci:

iet enfin le fichier app.module.ts est modifié

ouvrez ensuite les deux fichiers Environement.ts et Environement.Prod.ts et ajoutez le lien de OpenWetaher et l’api key

apiUrl: ‘https://api.openweathermap.org/data/2.5/',

apiKey: ‘’

Créons une classe ou mieux une interface qui va contenir les données de la meteo qu’on recevra de OpenWethearpour en tappant la commande suivante dans le terminale de VSC

ng generate interface meteo

puis inserrez le code suivant dans cette interface

export interface Weather {

    weather: WeatherInfo[],
  
    main: {
  
      temp: number;
  
      pressure: number;
  
      humidity: number;
  
    };
  
    wind: {
  
      speed: number;
  
    };
  
    sys: {
  
      country: string
  
    };
  
    name: string;
  
  }
  
  interface WeatherInfo {
  
    main: string;
  
    icon: string;
  
  }

Toutes ces propriétés sont les données que nous retournent l’API REST de OpenWeather.

Ajoutons également ke module “HttpClientModule” dans app.module.ts pour les requetes htpp

import { HttpClientModule } from ‘@angular/common/http’;

Créons un service angular pour la logique metier qui va nous permettre d’interagir avec les API REST de openWeather en tappant la commande suivante dans VSC

ng generate service meteo

Inserrez le code suivant dans ce fichier (https://gist.github.com/Defcoq/4b8ef6256d86aae964386d8e5eb37cb6#file-mieteo-service-ts)

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Weather } from './meteo';

@Injectable({
  providedIn: 'root'
})
export class MeteoService {

  constructor(private http: HttpClient) { }

  getWeather(city: string): Observable {

    const options = new HttpParams()
  
      .set('units', 'metric')
  
      .set('q', city)
  
      .set('appId', environment.apiKey);
  
    return this.http.get(environment.apiUrl +
  
      'weather', { params: options });
  
  }
}

Inserrez le nouveau service dans le provider de la dependance des injections de angular dans app.module.ts

Tappez ensuite la commande suivante pour generer le composante angular qui nous permettra d’afficher notre météo

ng generate component meteo

remplacer le contenu de app.component.ts par celui de notre composante nouvellement crée comme en image

Ouvrez ensuite app.module.ts et ajouter les modules pour angular material car nous devons utiliser angular material pour l’interace graphique de notre composante meteo, vous devez importer ces modules;

MatIconModule,

MatInputModule,

MatCardModule

inserrez le code suivant dans meto.component.ts dans laquelle nous avons une methode search qui permet d’appeller l’API REST et obtenir les info de la meteo d’une ville

https://gist.github.com/Defcoq/3852531a50b7d3cfdc1a8cb86f00c9bc#file-meto-component-ts

import { Component, OnInit } from '@angular/core';
import { Weather } from '../meteo';
import { MeteoService } from '../meteo.service';

@Component({
  selector: 'app-meteo',
  templateUrl: './meteo.component.html',
  styleUrls: ['./meteo.component.scss']
})
export class MeteoComponent implements OnInit {
  weather: Weather | undefined;

  constructor(private weatherService: MeteoService)

    { }

  ngOnInit(): void {
  }

  search(city: string) {

    this.weatherService.getWeather(city).subscribe(weather => this.weather = weather);
  
  }

}

puis dans meteo.component.html qui est la partie html du composante angular inserrez le code suivant:

https://gist.github.com/Defcoq/1bdfd928990b17230d47b518e3536e55#file-meto-component-html



    
  
    search
  
  
  
  
  
    
  
      {{weather.name}},
  
        {{weather.sys.country}}
  
      {{weather.weather[0].main}}
  
         

         
       
         

{{weather.main.temp | number:'1.0-0'}} ℃

Pressure: {{weather.main.pressure}} hPa

Humidity: {{weather.main.humidity}} %

Wind: {{weather.wind.speed}} m/s

Ajustons le css dans meto.component.scss en inserrant le code suivant:

https://gist.github.com/Defcoq/24dc23c7a5fac53aff9b091504ef56b7#file-meteo-component-scss

:host {

    display: flex;
  
    align-items: center;
  
    justify-content: center;
  
    flex-direction: column;
  
    padding-top: 25px;
  
  }
  
  mat-form-field {
  
    width: 20%;}

    mat-icon {
    
      cursor: pointer;
    
    }
    
    mat-card {
    
      margin-top: 30px;
    
      width: 250px;
    
    }
    
    h1 {
    
      text-align: center;
    
      font-size: 2.5em;
    
    }

Si vous sauveguardez toutes les modifications fait jusqu’ici et en ligne de comamnde executer la commande dans le termianle de VSC:

ng serve -o

vous obtiendrez la page suivante ou je fais par exemple la recherche de la meteo dans la ville de siena ou je vis:

alors que à yaounde au cameroun on a ceci

Nous avons une app web pour meteo fonctionnante en angular, maintenant comment proceder pour transformer cette app en PWA?

Nous allons mettre sur pieds un méccanisme pour permettre à l’utilisateur de pouvoir etre à mesure d’utiliser notre application meme en absence d’une connexion internet (offline) par exemple quand l’utilisateur se trouve dans une zone couverte seulement par la 3G et la connexion est lente ou completement il n’y a pas de connexion. Par exemple pour simuler l’absence de connexion, sur la page web de notre application de meteo, faite une clique sur la touche F12 pour acceder à la page de developpeur de votre navigateur(chez moi c’est chrome), puis dans l’onglet “Network” puis sous le menu “Throttling” cliquer sur offline pour simuler le fonctionnement de la page en modalité offline.

Essayer à present de mettre à jour la page (refresh de la page F5) vous aurez ceci (mon navigateur chrome en italien me dit simplement que je n’ai pas de connexion internet et c’est ce qui va arriver à notre page de meteo si jamais l’utilisateur y accède n’ayant pas de connexion internet):

C’est la ou intervient notre fameux proxy “worker service”, pour ce faire tapper la commande suivante dans le terminale de VSC pour ajouter le module de angular pour les worker services

ng add @angular/pwa

cette commande va ajouter un peu de choses dans le projet actuel pour y integrer les fonctionalités du worker service parmis lesquelles:

=> ajouter la dependance du package @angular/service-worker dans package.json ou il y a toutes les dependances des pacquets nmp de nodejs

=>crée le fichier manifest.webmanifest dans le repertoire src qui contient les informations sur l’application qui doit etre installée comme native sur le telephone mobile

=>crée un fichier ngsw-config.json dans la racine du projet, qui est utilisé pour la configuration du worker service par exemple c’est dans ce fichier qu’on va indiquer quelles resources sera sauveguardées en modalité offline (on appelle ça en anglais caching pour avoir plus de details sur les configurations possibles de ce fichier allez ici https://angular.io/guide/service-worker-config#service-worker-configuration.)

Le fichier de configuration du worker service est aussi enregistré dans app.module.ts

le fichier “ngsw-worker.js” qui est enregistré dans app.module.ts à la ligne 28 de l’image ci dessus est en fait un fichier javascript qui contient l’implementation du worker service en lui meme.

=>la commande crée egalement beaucoup d’icone qui seront utilisés quand l’application sera installée comme app native sur le telephone de l’utilisateur

Lançons à present la comamnde suivante dans VSC pour installer un serveur web qui peut gerer notre site web car le serveur web interne à angular ne peut etre utiliser pour gerer les PWA

npm install -D http-server

Compilons à present l’application en exécutant la commande:

ng build

Modifier votre fichier package.json pour inserrer cette ligne en image qui va nous permettre d’executer l’application en utilisant le serveur web http-server

“server”: “http-server -p 8080 -c-1 dist/meteo-app”

Tappez maintenant la commande suivante pour lancer notre site web à partir du serveur web http-server

npm run server

vous pouvez choisir n’importe quel lien que vous propose http-server pour acceder au site, moi par exemple j’ai pris le tout premier, je refais la recherche de yaounde comme precedement, je vais offline et voici le resultat

Vous observez que meme en modalité offline, notre site web continut à donner la meteo.

Et si nous mettons à jour notre application et nous deployons une nouvelle version, comment le worker service gere t’il cette situation?

ouvrons app.module.ts et ajoutons

import { MatSnackBarModule } from ‘@angular/material/snack-bar’;

nous allons ajouter ce qu’on appelle snackbar qui est une petite icone qui apparit le plus souvent au bas de la page et qui permet d’envoyer des notifications à l’utilisateur, pour cela on a utlisé le module snackbar de nagular material.

Modifier notre code app.component.ts de manière qu’il puisse etre comme ceci

nous allons envoyé une notification à l’utilisateur quand une nouvelle version de notre app est disponible de manière à ce qu’il puisse le mettre à jour, relançons les commandes et une fois cela fait reouvrer la page de la web app à travers l’un des liens que vous propose http-server

ng build

npm run server

sans fermer la page, apportons des modifications à notre app

tappez la comamnde suivante dans un nouveau terminale VSC pour creer un nouveau composante angular

ng generate component header

ouvrez app.module.ts pour ajouter deux modules de angular material qui vons nous aider à faire une integration dans la app, il s’agit simplement du control button et toolbar de angular material.

import { MatButtonModule } from ‘@angular/material/button’;

import { MatToolbarModule } from ‘@angular/material/toolbar’;

.modifier header.component.html pour inserrer le code html suivant

https://gist.github.com/Defcoq/953cddfecb848e2ab6c63314afb18cc9

et dans header.component.scss ajouter le code suivant

.spacer {

flex: 1 1 auto;

}

puis dans app.component.html mettre le ajour comme dans l’image suivante:

faite de nouveau ng build et npm run serveur et si vous rentrez et faite un refresh dans la page ouverte precedement vous obtiendrez immediatement ceci

si vous cliquez sur “Update now”, vous verrez notre nouvelle barre(je laisse expressement certains message en anglais qui en fait est la langue que j’avais fait ce tutoriel au debut)

Pour cloturez cet article nous allons deployer cette petite app web dans firebase pour voir toute la potentialité d’un site web convertit en PWA, pour cela aller sur la console de firebase ici https://console.firebase.google.com/

et creer un nouveau projet firebase et appellez le meteo-app

Tappez la commande suivante pour ajouter la bibliothèque npm de firebase au projet

ng add @angular/fire@7.0

Pour les fonctionalité firebase choisissez seulement l’option hosting pour cette demo. et choisissez aussi notre app meteo-app qu’on vient à peine de creer

firebase nous donne le lien qu’on utilisera pour acceder à notre site web

tappez la commande suivante pour deployer notre application sur firebase

ng deploy

le site est accessible au lien indique en image https://meteo-app-ca42a.web.app

si vous acceder à ce lien dans votre telephone mobile vous aurez ceci, l’icone mis en evidence en rouge dans l’image vous permet d’installer ce site web comme une app native dans votre telephone.

Comme vous l’avez noté, notre site web ou notre app web s’est transformé en une app native pourtant c’est un site web, il peut utiliser toutes les resources du telephone au meme titre qu’une app developpée avec android ou xcode ou flutter ou meme ionic. les PWA est la direction que sont entrain de prendre beaucoup d’entreprises pour concevoir une app qui soit compatible soit pour le web que app mobile.

le lien github du code source complet de cette app ici https://github.com/Defcoq/meteo-app

Bon coding et surtout partagez et likez

 


Author: admin
24.12.2022, 11:32
Category: Coding
Comments: 0
Views: 242
-

Share

Comments (0)
There are no comments yet.

Leave A Comment
processing...