Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Faire une Progressive Web App avec Angular

Par Alexis ROMNEY Publié le 23/04/2020 à 22:08:50 Noter cet article:
(0 votes)
En attente de relecture par le comité de lecture

Cet article a pour but de tout vous apprendre sur une Progressive Web App(PWA) et comment l'utiliser dans votre langage web de programmation de prédiclection. Même si nous verrons comment le faire en Angular il est également possible de le faire pour un projet réaliser en Ionic.

Qu'est-ce qu'une Progressive Web App

PWA permet de mieux référencer votre application ou votre site web. Il suffit d'implémenter un peu de code et le tour est joué!

Pour connaître si votre site est Progressive Web App, inspectez-le(clic-droit "inspecter", allez dans l'onglet application. vérifiez que vous avez un cache storage et que votre service worker soit en marche

Le service Broker est très utile. il permet de stocker les données localement et permet notamment de lancer en offline sans qu'aucune connexion n'est besoin d'être faite en votre base de données et internet.

Vous pouvez allez plus loin en vérifiant si votre site web est réponsive et respecte les conditions de moteur de recherche. Je vous conseille d'installer l'extension Lighthouse sur votre navigateur. Elle vous montrera différents statistique, les points forts et les points de votre application (performance, accessibility, best pratices, SEO et Progressive Web App).

Il se peut que Lighthouse ne fonctionne pas bien sur votre nagiteur par défaut. Si cela est le cas vous pouvez installez Google Canary, une version très similaire de Goocle Chrome.

Créer une Application Angular

La première chose a faire est d'installer votre environnement. Installer Node.js. Lien pour le télécharger : https://nodejs.org/en/

Angular a besoin de sa librairie et "npm" fournit les paquets et les outils nécessaires. Pour installez Angular, faire npm install -g angular/cli dans votre invite de commande.

Maintenant que votre environnement est construit, créez votre application. Pour cela, tapez la commande

ng new nomDeVotreApplication

Le cmd vous posera plusieurs questions :

? Would you like to add Angular routing? (y/N)

Le routing d'Angular est l'endroit où tu référencies toutes les vues de ton application et permet de naviguer entre elles.

? Which stylesheet format would you like to use?

Pour ma part je vous conseille le scss. . Le scss vous apporte quelques raccourcis comme le fait que vous pouvez définir votre style via des fonctions. Mais pas de panique, le langage css est utilisable ici. Donc pour les débutants en web design vous ne vous perdrez pas.

Remarque : il se peut qu'il y est un message d'erreur pour ce possèdant une version inférieur windows 10 comme quoi "ng" n'est pas reconnu en tant que commande. pour régler ce problème initier là comme variable d'environnement. je vous invite à vous rediriger vers ce lien https://prograide.com/pregunta/20291/ng-n39est-pas-reconnu-comme-une-commande-interne-ou-externe

un dossier et plusieurs fichiers ont été crées(nomDeVotreApplication.html, nomDeVotreApplication.css , app.module.ts)

Pour lancer votre application, rentrer les commandes suivantes :

cd nomDevotreApplication

ng serve -open ou pour les plus flemmards d'entre vous ng s -o

Votre application s'est ouverte mais n'est toujours pas Progressive Web App

Faire une Progressive Web App en Angular

Votre application s'est ouverte mais n'est toujours pas Progressive Web App

Pour ce faire, vous devez ajouter le répertoire angular pwa à votre projet.

Pour ce faire taper la commande : ng add @angular/pwa

Cela a créer plusieurs fichiers propre à pwa comme le manifest.webmanifest qui informe le navigateur à propos de votre application web et lui explique la manière dont cela comporte sur téléphone ou sur l'ordinateur. Et le fichier ngws-config qui est le fichier de configuration du service worker.

Mainteant que nous avons le service worker. il nous faut pouvoir lancer notre application en prod pour pouvoir y inclure un cache storage à notre application.

Installez Lite Server :

npm install lite-server --save-dev

Ajoutez un nouveau script dans votre fichier package.json

"start:prod": "npx ng build --prod && lite-server --baseDir dist/nomDeVotreApplication",

npm run start:prod

Cette commande est la dernière étape. Elle va vous lancer le script que vous avez rédiger start:prod.

Remarque : Pendant le build en mode prod, il se peut qu'il y ait des erreurs que nous n'avez pas eu auparavant. Cela est par exemple du à certaine fonctions qui ne sont pas appelés. Donc ne paniquez si cela vous arrive et vérifier votre frontend avec les erreurs données.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels