Dans cet article, nous verrons comment «lier» et configurer PWA dans une application angulaire.
Qu'est-ce qu'une PWA?
PWA (Progressive Web App) est une technologie Web qui transforme un site Web en application. Lorsqu'elle est ouverte, l'application s'exécute dans un wrapper de navigateur, ce qui permet à la PWA d'exécuter l'application sur n'importe quelle plate-forme utilisant un navigateur conforme aux normes.
En interne, le PWA utilise un service worker qui interagit avec le navigateur pour fournir l'accès à certaines fonctionnalités intégrées. Le technicien de service a accès au stockage du cache pour les ressources Web et à IndexDB pour les données. Grâce au Service worker, il est possible d'implémenter la mise en cache, ce qui permet à l'application PWA de fonctionner hors ligne.
La configuration initiale
, , Angular CLI, ng new app
.
ng serve
, Angular 4200 .
Angular CLI. ng add @angular/pwa
. , .
:
ngsw-config.json
- ngsw-worker.js (serviceworker.js). Service worker'.
manifest.webmanifest
- , PWA . , , ..
src/index.html
, head', html :
angular.json
:
src/assets/icons/
, .
app.module.ts
Service worker ngsw-worker.js
( ) .
PWA
. PWA https localhost ng serve
Service worker', HTTP- . , http-. npm http-server
npm i -g http-server
.
, ng build --prod
.
dist . Service worker' ngsw-worker.js
.
dist/app
8080 , http-server -p 8080
.
Notre application a été lancée avec succès sur le port 8080 et une fois ouverte, un bouton apparaît dans la barre d'adresse du navigateur pour installer la version PWA de notre application.
Également dans les outils de développement, dans la section Application, nous pouvons suivre le statut de notre Service worker
Conclusion
Dans cet article, nous avons examiné la configuration de base et le lancement d'une application avec la technologie PWA, l'écran est laissé avec une description des possibilités de travail des travailleurs de service en mode «hors ligne», et la mise en cache, ainsi que la configuration d'un fichier ngsw-config.json
, que vous peut en savoir plus dans la documentation officielle d'Angular .