In diesem Artikel erfahren Sie, wie Sie PWA in Angular-Anwendungen "binden" und konfigurieren.
Was ist eine PWA?
PWA (Progressive Web App) ist eine Webtechnologie, die eine Website in eine Anwendung verwandelt. Beim Öffnen wird die Anwendung in einem Browser-Wrapper ausgeführt, mit dem die PWA die Anwendung auf jeder Plattform ausführen kann, die einen standardkonformen Browser verwendet.
Intern verwendet die PWA einen Servicemitarbeiter, der mit dem Browser interagiert, um Zugriff auf einige integrierte Funktionen zu gewähren. Der Servicemitarbeiter hat Zugriff auf Cache-Speicher für Webressourcen und IndexDB für Daten. Dank des Service Workers ist es möglich, Caching zu implementieren, wodurch die PWA-Anwendung offline arbeiten kann.
Ersteinrichtung
, , 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
.
Unsere Anwendung wurde erfolgreich auf Port 8080 gestartet. Beim Öffnen wird in der Adressleiste des Browsers eine Schaltfläche angezeigt, mit der Sie die PWA-Version unserer Anwendung installieren können.
Auch in Entwicklertools können wir im Abschnitt Anwendung den Status unseres Servicemitarbeiters verfolgen
Fazit
In diesem Artikel haben wir die grundlegende Konfiguration und den Start einer Anwendung mit PWA-Technologie untersucht. Auf dem Bildschirm werden die Möglichkeiten für die Arbeit von Servicemitarbeitern im "Offline" -Modus und das Caching sowie die Konfiguration einer von ngsw-config.json
Ihnen erstellten Datei angezeigt kann in der offiziellen Dokumentation für Angular nachlesen .