So erstellen Sie progressive Web-Apps (PWA) mit Angular 9

Blog

So erstellen Sie progressive Web-Apps (PWA) mit Angular 9

In diesem Tutorial verwenden wir die neueste Version von Angular 9, um eine Progressive Web Application (PWA) zu erstellen, die auf Mobilgeräten oder jeder Plattform funktioniert, die einen standardkonformen Browser verwendet.



Was ist PWA?

Eine progressive Web-App bietet ein hohes Maß an Benutzerfreundlichkeit, da sie die gleichen Funktionen wie native Apps hat. Heutzutage ist PWA die große Sache geworden und immer mehr Unternehmen wechseln zu den progressiven Webanwendungen (PWA).

PWA muss nicht über App Stores bereitgestellt werden; Stattdessen verfolgen wir einen etwas anderen Ansatz und stellen ihn über die Webserver über URLs bereit. Um dieselbe PWA wie die nativen Apps zu erstellen, müssen wir die folgenden Anforderungen erfüllen.



Responsiv

Läuft auf fast jedem Desktop-, Handy- oder Tablet-Gerät.

Automatisch aktualisiert

Servicemitarbeiter hält es immer auf dem neuesten Stand.



Sicher

Inhalte gelten als sicher, da sie über HTTPS bereitgestellt werden.

Zuverlässig verbunden

Servicemitarbeiter unterstützen Sie, damit es offline und in spärlichen Netzwerken funktioniert.

Progressiv

Web-App, die moderne Webfunktionen einsetzt, um jedem Benutzer ein App-ähnliches Erlebnis zu bieten.

Durchsuchbar

Sehr gut über Suchmaschinen durchsuchbar durch Web-App-Manifest .

Teilbar

Es muss nicht heruntergeladen werden und kann einfach über einen einfachen Link oder eine URL geteilt werden.

Benutzererfahrung

Ähnliche Benutzererfahrung durch Verwendung der gleichen Interaktionsmethodik wie bei einer nativen App.

Installierbar

Vollständig installierbar auf dem mobilen Startbildschirm der Benutzer, und das Gute ist, dass wir den App Store nicht besuchen müssen.

Kommunizieren Sie regelmäßig

Hält Sie per Push-Benachrichtigungen auf dem Laufenden und bietet Ihnen die neuesten Updates, Aktionsangebote etc.

Inhaltsverzeichnis:

  • Angular-Anwendung konfigurieren und installieren
  • Hinzufügen einer Angular-Materialbibliothek
  • Erstellen und konsumieren Sie die REST-API mit HttpClient
  • Hinzufügen von PWA in Angular 8/9
  • Servicemitarbeiter in Angular
  • Produktions-Build mit http-Server konfigurieren
  • PWA-App mit Lighthouse prüfen
  • Abschluss

Angular-Anwendung konfigurieren und installieren

In diesem Schritt konfigurieren wir das Angular-Projekt, um Ihnen die Demo von Angular PWA zur Verfügung zu stellen.

Stellen Sie zunächst sicher, dass auf Ihrem System die neueste Version von Node.js und NPM konfiguriert ist.

node -v # v10.16.0

Folgen Sie dieser URL, um Node & NPM herunterladen und installieren .

Wie komme ich in die Cash-App ohne Telefonnummer

Jetzt beginnen wir mit der Installation der neuesten Version von Angular CLI auf Ihrem System.

npm install -g @angular/cli@latest

Führen Sie den folgenden Befehl aus, um eine Angular-App zu installieren:

ng new angular-pwa

Rufen Sie das Projektverzeichnis auf:

cd angular-pwa

Hinzufügen einer Angular Material Design-UI-Bibliothek

Das Hinzufügen einer Materialdesign-Bibliothek in Angular ist sehr einfach. Es kann mit nur einem einzigen Befehl erfolgen. Führen Sie den folgenden Befehl von Ihrem Terminal aus.

ng add @angular/material

Fügen Sie das Materialthema in . hinzu src/styles.css Datei.

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Normalerweise importieren wir die eckigen Materialkomponenten in das AppModule. Aber es gibt eine kleine Wendung. Wir werden eine separate Moduldatei für Materialkomponenten erstellen und die Komponenten hier importieren und dann die Materialkomponentendatei in die Hauptdatei importieren AppModul Datei.

Dies ist der Prozess, den ich sehr empfehle, um die Materialkomponenten organisiert zu verwalten. Wir zeigen die Benutzerdaten in der Winkelmaterialtabelle Create app/material.module.ts Datei fügen Sie den folgenden Code ein.

import { NgModule } from '@angular/core'; import { MatTableModule } from '@angular/material/table'; import { MatPaginatorModule, MatToolbarModule } from '@angular/material'; @NgModule({ imports: [ MatTableModule, MatPaginatorModule, MatToolbarModule ], exports: [ MatTableModule, MatPaginatorModule, MatToolbarModule ] }) export class MaterialModule { }

Als nächstes importieren MaterialModul Modul im Hauptteil |_+_| Datei wie unten angegeben.

app.module.ts

Erstellen und konsumieren Sie die REST-API mit HttpClient

Erstellen Sie in diesem Schritt einen Angular-Dienst, um die Daten mithilfe einer Open-Source-REST-API vom Remoteserver abzurufen.

Um die HTTP-Anfragen zu stellen, müssen wir importieren und registrieren HttpClientModule Dienst in app.module.ts Datei.

import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; /* angular material */ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MaterialModule } from './material.module'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MaterialModule ], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppModule { }

Lassen Sie uns einen Dienst generieren. Hier schreiben wir die Logik zum Abrufen der Benutzerdaten mit Hilfe von JSONPlatzhalter API, führen Sie den folgenden Befehl aus.

import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ HttpClientModule ] })

Als nächstes öffnen Sie die app/rest-api.service.ts Datei und fügen Sie folgenden Code ein:

ng g service rest-api

Wir holen die Benutzerdaten mit dem HttpClient Dienst als Observable über |_+_| Methode.

Als nächstes öffnen Sie die app/app.component.ts Datei und fügen Sie den unten angegebenen Code hinzu:

import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { HttpClient } from '@angular/common/http'; export interface User { id: string; name: string; email: string; website: string; } @Injectable({ providedIn: 'root' }) export class RestApiService { api: string = 'https://jsonplaceholder.typicode.com/users'; constructor(private http: HttpClient) { } getUsers(): Observable { return this.http.get(this.api) } }

Wir haben den RestApiService in AppComponent importiert, um die Benutzerdaten abzurufen und anzuzeigen. Wir verwenden die UI-Komponente der Angular Material-Tabelle, um die Daten anzuzeigen. Wir können die Größe des Artikels mit dem Winkelmaterial-Paginierungsmodul manipulieren.

Erstellen Sie die Benutzeroberfläche der PWA-App mithilfe der eckigen Materialtabelle app.komponente.html Datei, um das Layout zu erstellen. Unser Layout wird die Material-Navbar und eine Datentabelle mit Paginierung haben.

getUsers()

Angular 9 PWA-App-Beispiel

Hinzufügen von PWA in Angular 8/9

Es ist zweifellos sehr einfach, eine bestehende Angular-Anwendung in eine Progressive Web App (PWA) umzuwandeln. Die von eckigen pwa . hinzufügen Command kann Ihre Träume wahr werden lassen.

import { Component, ViewChild } from '@angular/core'; import { RestApiService } from './rest-api.service'; import { MatPaginator, MatTableDataSource } from '@angular/material'; export interface TableElement { id: string; name: string; email: string; website: string; } @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { Data: TableElement[]; col: string[] = ['id', 'name', 'email', 'website']; dataSource = new MatTableDataSource(this.Data); @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; constructor(private restApiService: RestApiService) { this.restApiService.getUsers().subscribe((res) => { this.dataSource = new MatTableDataSource(res); setTimeout(() => { this.dataSource.paginator = this.paginator; }, 0); }) } }

Der obige Befehl fügt automatisch PWA-Dateien und -Funktionen innerhalb einer Angular-App hinzu:

  • Die manifest.webmanifest Datei
  • Die ngsw-config.json Servicemitarbeiter
  • Unterschiedliche Größen von Symbolen innerhalb der Assets/Symbole Verzeichnis

Die index.html Datei wurde aktualisiert und das folgende Meta-Tag und das Farbattribut des Themas hinzugefügt.

Angular PWA Example
ID. {{element.id}} Name {{element.name}} Email {{element.email}} Website {{element.website}}

Bitte stellen Sie sicher und fügen Sie einige PWA-konforme hinzu Symbol-Assets .

Servicemitarbeiter in Angular

ZU Servicemitarbeiter ist ein Skript, das im Hintergrund arbeitet und mit fast allen modernen Browsern zurechtkommt.

Service Worker arbeiten mit HTTPS und funktionieren genauso wie Web Worker, jedoch etwas nachteilig. Progressive Web Application betrachtet Servicemitarbeiter als primäre Technologie. Es ermöglicht eine tiefe Plattformintegration wie Offline-Unterstützung, Hintergrundsynchronisierung, umfangreiches Caching und Push-Benachrichtigungen.

Die von eckigen pwa . hinzufügen Befehl generiert die ngsw-config.json Datei, Es ist allein verantwortlich für Servicemitarbeiter. Servicemitarbeiter werden auch automatisch zu |_+_| . hinzugefügt Datei.

ng add @angular/pwa

Schauen Sie sich die |_+_| . an Datei.

Jetzt haben wir den Produktions-Build fertig im Dist / Winkelgewicht Mappe. Als Nächstes bedienen wir die eckige PWA mit dem http-Server Paket.

Gehen Sie in den Prod-Build-Ordner.

app.module.ts

Starten Sie den Produkt-Build
Führen Sie als Nächstes den folgenden Befehl in Ihrem Terminal aus.

// app.module.ts import { ServiceWorkerModule } from '@angular/service-worker'; import { environment } from '../environments/environment'; @NgModule({ declarations: [...], imports: [ ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }) ], providers: [...], bootstrap: [...], schemas: [...] }) export class AppModule { }

Der obige Befehl öffnet die Winkel-App unter der folgenden URL http://127.0.0.1:8080 und geben Sie auch die folgenden URLs an, können Sie Ihre App überprüfen, indem Sie eine der URLs in die Adressleiste des Browsers eingeben.

Verfügbar auf:
http://127.0.0.1:8080
http://192.168.0.102:8080

Opencv-Kamerakalibrierung Python

PWA-App mit Lighthouse prüfen

Jetzt überprüfen wir die PWA-Anwendung mit der Lighthouse-Erweiterung im Google Chrome-Browser. Fügen Sie die folgende URL in die Adressleiste des Browsers ein: http://127.0.0.1:8080

Installieren Sie die Leuchtturm-Erweiterung von Chrome-Webstore .

Öffnen Sie als Nächstes die Browserkonsole, indem Sie die Strg + Umschalt + I .

PWA-App mit Lighthouse prüfen

Abschluss

Schließlich haben wir das Angular 9 PWA-Tutorial mit einem Beispiel abgeschlossen. In diesem Tutorial haben wir die Möglichkeit, die folgenden Themen abzudecken:

  • Wie konvertiert man die vorhandene Winkelanwendung in PWA?
  • Wie füge ich PWA-Funktionen in einer Winkelanwendung hinzu?
  • Wie arbeite ich mit Servicemitarbeitern?
  • Wie konfiguriere ich die Funktion zum Hinzufügen zum Startbildschirm mithilfe der Webmanifestdatei?
  • Wie auditiere ich die PWA-App mit der Lighthouse-Erweiterung von Google?

Laden Sie den vollständigen Code dieses Tutorials von diesem herunter GitHub-Repository , Ich hoffe, Sie werden dieses Tutorial mögen. Viel Spaß beim Codieren!

#Angular #PWA #WebDev #Angular