Erstellen einer PWA mit Angular 6

In diesem Tutorial verwenden wir das neueste Angular 6, um eine PWA zu erstellen, indem wir die Kernprinzipien implementieren, die eine PWA ausmachen. Wir beginnen mit der Erstellung einer Front-End-Webanwendung, die eine JSON-API verwendet. In diesem Zusammenhang verwenden wir das HttpClient -Modul von Angular, um HTTP-Anforderungen an eine statische JSON-API zu senden, die aus dem GitHub-Repository für vereinfachten JavaScript-Jargon generiert wird. Wir werden Material Design auch zum Erstellen der Benutzeroberfläche über das Angular Material-Paket verwenden.

Als Nächstes verwenden wir das Panel „Audits“ (Lighthouse) von Chrome DevTools, um unsere Webanwendung anhand der Grundprinzipien von PWAs zu analysieren. Abschließend erläutern wir die PWA-Funktionen und fügen sie unserer Webanwendung gemäß dem Abschnitt „Progressive Web App“ im Lighthouse-Bericht hinzu.

Bevor wir mit der Implementierung unserer PWA beginnen, stellen wir uns zunächst PWAs und Lighthouse vor.

Empfohlene Lektüre : Native und PWA: Entscheidungen, keine Herausforderer!

Was ist eine PWA?

Eine Progressive Web App oder PWA ist eine Webanwendung, die über eine Reihe von Funktionen verfügt (ähnlich wie native Apps), die Benutzern ein App-ähnliches Erlebnis bieten. PWAs müssen eine Reihe grundlegender Anforderungen erfüllen, die wir als Nächstes sehen werden. PWAs ähneln nativen Apps, werden aber von Webservern über URLs bereitgestellt und sind zugänglich, sodass wir nicht durch App Stores gehen müssen.

Eine PWA muss:

• Progressiv
  Arbeiten für jeden Benutzer, unabhängig von der Browserwahl, da sie mit progressiver Verbesserung als Kernprinzip erstellt wurden.
• Reaktionsschnell
  Passend für jeden Formfaktor, Desktop, Handy, Tablet oder was auch immer als nächstes kommt.
• Konnektivität unabhängig
  Erweitert mit Servicemitarbeitern, um offline oder in Netzwerken mit geringer Qualität zu arbeiten.
• App-ähnlich
  Verwenden Sie das App-Shell-Modell, um Navigation und Interaktionen im App-Stil bereitzustellen.
• Frisch
  Immer up-to-date dank Service-Worker-Update-Prozess.
• Sicher
  Wird über HTTPS bereitgestellt, um Snooping zu verhindern und sicherzustellen, dass Inhalte nicht manipuliert wurden.
• Auffindbar
  Sind dank W3C-Manifesten und Service-Worker-Registrierungsbereich als „Anwendungen“ identifizierbar, sodass Suchmaschinen sie finden können.
• Wiedereinschaltbar
  Erleichtern Sie die erneute Interaktion durch Funktionen wie Push-Benachrichtigungen.
• Installierbar
  Ermöglichen Sie Benutzern, Apps, die sie am nützlichsten finden, auf ihrem Startbildschirm zu „behalten“, ohne sich um einen App Store kümmern zu müssen.
• Verknüpfbar
  Einfaches Teilen per URL und keine komplexe Installation erforderlich.
  

Leuchtturm vorstellen

Lighthouse ist ein von Google entwickeltes Open-Source-Audit-Tool, mit dem Websites und Anwendungen auf Zugänglichkeitsleistung, SEO, Best Practices und PWA-Funktionen geprüft werden können.

Sie können auf Lighthouse über die Registerkarte Audit in Chrome DevTools als Modul in Node.js oder als CLI-Tool zugreifen. Sie können Lighthouse verwenden, indem Sie eine URL angeben und dann die Audits ausführen, die Ihnen einen Bericht mit den Auditergebnissen liefern, bei denen es sich im Wesentlichen um Vorschläge zur Verbesserung Ihrer Webanwendung handelt.

Installieren von Angular CLI v6 und Generieren eines Projekts

In diesem Abschnitt installieren wir die neueste Version von Angular CLI und verwenden sie dann zum Erstellen eines neuen Angular 6-Projekts.

Angular CLI erfordert Node.js >= 8.9+. Stellen Sie also zunächst sicher, dass Sie die erforderliche Version installiert haben, indem Sie den folgenden Befehl ausführen:

 $ node -v 

Falls Sie Node.js nicht installiert haben, können Sie einfach auf die offizielle Node-Downloadseite gehen und die Node-Binärdateien für Ihr System herunterladen.

Jetzt können Sie fortfahren und die neueste Version von Angular CLI installieren, indem Sie Folgendes ausführen:

 $ npm install -g @angular/cli

Hinweis : Abhängig von Ihrer npm-Konfiguration müssen Sie möglicherweise _sudo_ hinzufügen, um Pakete global zu installieren.

Sie können Ihr Angular 6-Projekt generieren, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

 $ ng new pwademo

Dadurch wird ein Projekt mit einer Struktur erstellt, die wie folgt aussieht:

Die meiste Arbeit, die erledigt wird, befindet sich im Ordner src/ , der den Quellcode der Anwendung enthält.

Erstellen der Angular-Anwendung

Nach dem Generieren eines Projekts erstellen wir eine Webanwendung, die eine JSON-API verwendet und die Elemente auf der Startseite anzeigt. Wir verwenden den HttpClient -Dienst zum Senden von HTTP-Anforderungen und Angular Material zum Erstellen der Benutzeroberfläche.

Kantiges Material hinzufügen

Dank Angular CLI v6 und dem neuen Befehl ng add ist das Hinzufügen von Angular-Material zu Ihrem Projekt nur einen Befehl entfernt. Sie müssen nur den folgenden Befehl von Ihrem Terminal aus ausführen:

 $ cd pwademo $ ng add @angular/material 

Sie können auf dem Screenshot sehen, dass der Befehl das erforderliche Paket von npm installiert und eine Reihe von Dateien zum Einrichten von Angular Material in Ihrem Projekt aktualisiert, die zuvor manuelle Updates erforderten.

Einrichten von HttpClient und Verwenden der JSON-API

Lassen Sie uns nun das Angular-Projekt so einrichten, dass HttpClient zum Senden von HTTP-Anforderungen verwendet wird. Zuerst müssen Sie das HttpClientModule -Modul im Hauptanwendungsmodul in die Datei src/app/app.module.ts :

 /*...*/ import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ /*...*/ HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Das ist es. Wir können jetzt HttpClient in jede Komponente oder jeden Dienst einfügen und verwenden, der zum Hauptmodul gehört.

Zu Demozwecken verwenden wir eine statisch generierte JSON-API aus dem GitHub-Repository für vereinfachten JavaScript-Jargon . Wenn Sie eine andere Ressource verbrauchen, stellen Sie sicher, dass CORS aktiviert ist, damit der Browser das Lesen der Remote-Ressource nicht aufgrund der Same Origin Policy verbietet.

Lassen Sie uns einen Dienst erstellen, der mit der API verbunden ist. Führen Sie in Ihrem Projektordner Folgendes aus:

 $ ng g service api

Dadurch wird ein Dienst namens ApiService in der Datei src/app/api.service.ts erstellt.

Öffnen Sie nun die Datei src/app/api.service.ts und aktualisieren Sie sie, um die folgenden Änderungen widerzuspiegeln:

 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; export interface Item{ name: string; description: string; url: string; html: string; markdown: string; } @Injectable({ providedIn: 'root' }) export class ApiService { private dataURL: string = "https://www.techiediaries.com/api/data.json"; constructor(private httpClient: HttpClient) {} fetch(): Observable<Item[]>{ return <Observable<Item[]>this.httpClient.get(this.dataURL); } }

Wir haben zuerst die HttpClient und Observable -Klassen importiert, dann den HttpClient als httpClient in den Konstruktor eingefügt und eine fetch() Methode hinzugefügt, die die get() Methode von HttpClient aufruft (um eine HTTP-GET-Anfrage an unseren JSON-Endpunkt zu senden) und ein Observable that zurückgibt können wir später abonnieren.

Wir haben auch eine Item -Schnittstelle deklariert, die ein einzelnes Element der zurückgegebenen JSON-Daten darstellt.

Als nächstes importieren Sie diesen Dienst aus der Anwendungskomponente. Öffnen Sie die Datei src/app/app.component.ts und fügen Sie Folgendes hinzu:

 import { Component, OnInit } from '@angular/core'; import { ApiService } from './api.service'; import { Item } from './api.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ title = 'pwademo'; items: Array<Item>; constructor(private apiService: ApiService){ } ngOnInit(){ this.fetchData(); } fetchData(){ this.apiService.fetch().subscribe((data: Array<Item>)=>{ console.log(data); this.items = data; }, (err)=>{ console.log(err); }); } }

Wir importieren den zuvor erstellten ApiService und fügen ihn als apiService , wir importieren auch die Item -Klasse, die ein einzelnes Element unserer JSON-Daten darstellt, und wir deklarieren die items -Variable vom Typ Array<Item> , die die abgerufenen Elemente enthält.

Als nächstes fügen wir eine fetchData() Methode hinzu, die unsere fetch() -Methode aufruft, die wir im ApiService definiert haben, der ein Observable zurückgibt. Wir abonnieren einfach dieses Observable, um eine GET-Anfrage an unseren JSON-Endpunkt zu senden und die Antwortdaten zu erhalten, die wir schließlich dem items -Array zuweisen.

Wir rufen die Methode ngOnInit() fetchData() Lebenszyklusereignis ngOnInit() auf, sodass sie aufgerufen wird, sobald die AppComponent Komponente initialisiert ist.

Hinzufügen der Anwendungs-UI

Unsere Anwendungs-UI besteht aus einer Navigationsleiste und dem Skelett der Seite, die mit Angular Material erstellt wird.

Bevor Sie eine Angular Material-Komponente verwenden, müssen Sie ihr Modul importieren. Jede Materialkomponente gehört zu einem eigenen Modul.

Öffnen Sie die Datei src/app/app.module.ts und fügen Sie die folgenden Importe hinzu:

 /*...*/ import { MatToolbarModule } from '@angular/material/toolbar'; import { MatCardModule } from '@angular/material/card'; import { MatButtonModule } from '@angular/material/button'; @NgModule({ declarations: [ AppComponent ], imports: [ /*...*/ MatToolbarModule, MatCardModule, MatButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Wir importieren Module für Symbolleisten-, Karten- und Schaltflächenkomponenten und fügen sie dem imports -Array des AppModule .

Öffnen Sie als Nächstes die Datei src/app/app.component.html , löschen Sie den Inhalt und fügen Sie Folgendes hinzu:

 <mat-toolbar color="primary"> <mat-toolbar-row> <span>JS-jargon</span> </mat-toolbar-row> </mat-toolbar> <main> <mat-card *ngFor="let item of items"> <mat-card-header> <mat-card-title>{{item.name}}</mat-card-title> </mat-card-header> <mat-card-content> {{item.description}} </mat-card-content> <mat-card-actions> <a mat-raised-button href="{{item.url}}" color="primary">More</a> </mat-card-actions> </mat-card> </main>

Wir verwenden Materialkomponenten, um die Benutzeroberfläche zu erstellen. Die Komponente <mat-toolbar> wird verwendet, um eine Materialsymbolleiste zu erstellen, und die Komponente <mat-card> wird verwendet, um eine Materialkarte usw. zu erstellen.

Wir iterieren über das items -Array, das bei der Initialisierung der Komponente von der Methode fetchData() wird, und zeigen Items als Materialkarten an. Jede Karte enthält den Namen, eine Beschreibung und einen Link für weitere Informationen (der Link ist als Material-Schaltfläche mit der mat-raised-button Anweisung gestaltet).

Dies ist ein Screenshot der Anwendung:

Erstellen der Anwendung für die Produktion

Wenn Sie Ihre Anwendung auf PWA-Features überprüfen, sollten Sie sie in der Regel zuerst für die Produktion erstellen, da die meisten PWA-Features nicht in der Entwicklung hinzugefügt werden. Sie möchten beispielsweise keine Service Worker und keine Zwischenspeicherung in der Entwicklung aktivieren, da Sie die Dateien regelmäßig aktualisieren müssen.

Lassen Sie uns die Anwendung für die Produktion mit dem folgenden Befehl erstellen:

 $ ng build --prod

Der Produktions-Build ist im Ordner dist/pwademo verfügbar. Wir können ein Tool wie einen http-server , um es zu bedienen.

Installieren Sie zunächst den http-server mit dem folgenden Befehl:

 $ npm i -g http-server

Sie können es dann mit dem folgenden Befehl ausführen:

 $ cd dist/pwademo $ http-server -o

Die Option -o öffnet automatisch den Standardbrowser in Ihrem System und navigiert zur Adresse https://127.0.0.1:8080/ , wo unsere Webanwendung verfügbar ist.

Analysieren der Anwendung mit Lighthouse

Analysieren wir nun unsere Anwendung mit Lighthouse. Starten Sie zuerst Chrome und besuchen Sie unsere Anwendungsadresse https://127.0.0.1:8080/ .

Öffnen Sie als Nächstes die Entwicklertools oder drücken Sie Strg + Umschalt + I und klicken Sie auf das Audit -Panel.

Sie müssen die Emulation vorzugsweise auf Mobil statt auf Desktop einstellen, um eine mobile Umgebung zu emulieren. Klicken Sie anschließend auf die blaue Schaltfläche Audit durchführen… . Es wird ein Dialogfeld geöffnet, in dem Sie die Arten der Audits auswählen müssen, die Sie für Ihre Webanwendung durchführen möchten. Deaktivieren Sie alle Typen außer Progressive Web App und klicken Sie auf die Schaltfläche Audit ausführen.

Warten Sie, bis Lighthouse den Bericht erstellt hat. Dies ist ein Screenshot des Ergebnisses in diesem Stadium:

Lighthouse führt eine Reihe von Prüfungen durch, die die in der PWA-Checkliste angegebenen Aspekte einer Progressive Web App validieren. Wir bekommen eine Anfangspunktzahl von ³⁶ ⁄ ₁₀₀ , weil wir einige Audits bestanden haben.

Unsere Anwendung hat 7 fehlgeschlagene Audits, die sich hauptsächlich auf Service Workers , Progressive Enhancement , HTTPS und Web App Manifest beziehen, die die Kernaspekte einer PWA sind.

Registrieren eines Servicemitarbeiters

Die ersten beiden fehlgeschlagenen Prüfungen („Registriert keinen Servicemitarbeiter“ und „Antwortet nicht mit 200, wenn offline) beziehen sich auf Servicemitarbeiter und Caching. Was ist also ein Servicemitarbeiter?

Ein Service Worker ist eine Funktion, die in modernen Browsern verfügbar ist und als Netzwerkproxy verwendet werden kann, mit dem Ihre Anwendung Netzwerkanforderungen zum Zwischenspeichern von Assets und Daten abfangen kann. Dies könnte für die Implementierung von PWA-Funktionen wie Offline-Support und Push-Benachrichtigungen usw. verwendet werden.

Um diese Audits zu bestehen, müssen wir lediglich einen Servicemitarbeiter registrieren und damit Dateien lokal zwischenspeichern. Im Offline-Modus sollte die SW die lokal zwischengespeicherte Version der Datei zurückgeben. Wir werden etwas später sehen, wie man das mit einem CLI-Befehl hinzufügt.

Empfohlene Lektüre : Making A Service Worker: A Case Study

Progressive Enhancement

Das dritte fehlgeschlagene Audit („Stellt keine Fallback-Inhalte bereit, wenn JavaScript nicht verfügbar ist“) bezieht sich auf die progressive Verbesserung , die ein wesentlicher Aspekt einer PWA ist, und bezieht sich einfach auf die Fähigkeit von PWAs, auf verschiedenen Browsern ausgeführt zu werden, aber erweiterte Funktionen bereitzustellen, wenn sie sind verfügbar. Ein einfaches Beispiel für PE ist die Verwendung des HTML-Tags <noscript> , das Benutzer darüber informiert, dass JavaScript aktiviert werden muss, um die Anwendung auszuführen, falls es nicht aktiviert ist:

 <noscript> Please enable JavaScript to run this application. </noscript>

HTTPS

Die vierte fehlgeschlagene Prüfung („Leitet HTTP-Verkehr nicht auf HTTPS um“) bezieht sich auf HTTPS, das ebenfalls ein Kernaspekt von PWAs ist (Service Worker können nur von sicheren Ursprüngen bedient werden, mit Ausnahme von localhost). Das „Verwendet HTTPS“-Audit selbst wird von Lighthouse als bestanden betrachtet, da wir localhost prüfen, aber sobald Sie einen tatsächlichen Host verwenden, benötigen Sie ein SSL-Zertifikat. Sie können ein kostenloses SSL-Zertifikat von verschiedenen Diensten wie Let's Encrypt, Cloudflare, Firebase oder Netlify usw. erhalten.

Das Web-App-Manifest

Die drei fehlgeschlagenen Audits („Der Benutzer wird nicht aufgefordert, die Web-App zu installieren“, „Ist nicht für einen benutzerdefinierten Begrüßungsbildschirm konfiguriert“ und „Adressleiste stimmt nicht mit den Markenfarben überein“) beziehen sich auf ein fehlendes Web-App-Manifest , das a Datei im JSON-Format, die den Namen, die Beschreibung, die Symbole und andere Informationen bereitstellt, die von einer PWA benötigt werden. Benutzer können die Web-App wie native Apps auf dem Startbildschirm installieren, ohne einen App Store zu durchlaufen.

Sie müssen ein Web-App-Manifest bereitstellen und in der Datei index.html mithilfe eines <link> -Tags darauf verweisen, wobei die rel -Eigenschaft auf manifest festgelegt ist. Wir werden als nächstes sehen, wie wir das automatisch mit einem CLI-Befehl machen können.

Implementieren von PWA-Funktionen

Mit Angular CLI v6 können Sie einer vorhandenen Angular-Anwendung schnell PWA-Funktionen hinzufügen. Sie können Ihre Anwendung in eine PWA umwandeln, indem Sie einfach den folgenden Befehl in Ihrem Terminal im Stammverzeichnis des Projekts ausführen:

 $ ng add @angular/pwa

Der Befehl fügt unserer Angular-Anwendung automatisch PWA-Funktionen hinzu, wie zum Beispiel:

• Eine manifest.json -Datei,
• Unterschiedliche Größen von Symbolen im Ordner src/assets/icons ,
• Der ngsw-worker.js .

Öffnen Sie den Ordner dist/ , der den Produktions-Build enthält. Sie werden verschiedene Dateien finden, aber konzentrieren wir uns auf die Dateien, die sich auf die oben erwähnten PWA-Funktionen beziehen:

Eine manifest.json -Datei wurde mit folgendem Inhalt hinzugefügt:

 { "name": "pwademo", "short_name": "pwademo", "theme_color": "#1976d2", "background_color": "#fafafa", "display": "standalone", "scope": "/", "start_url": "/", "icons": [ { "src": "assets/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "assets/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "assets/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "assets/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "assets/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "assets/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "assets/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "assets/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] }

Wie Sie sehen können, enthält die hinzugefügte manifest.json -Datei alle Informationen, die von einer PWA benötigt werden, wie Name, Beschreibung und start_url usw.

Die Datei manifest.json “ enthält Links zu Symbolen mit unterschiedlichen Größen, die ebenfalls automatisch im Ordner „ assets/icons “ hinzugefügt wurden. Sie müssen diese Symbole natürlich durch Ihre eigenen ersetzen, sobald Sie bereit sind, die endgültige Version Ihrer PWA zu erstellen.

In der Datei index.html wird auf die Datei manifest.json verwiesen mit:

 <link rel="manifest" href="manifest.json">

Die Datei ngsw-worker.js wurde ebenfalls automatisch hinzugefügt, die den Service Worker enthält. Der Code zum Installieren dieses Service Workers wird automatisch in die Datei src/app/app.module.ts eingefügt:

 ... import { ServiceWorkerModule } from '@angular/service-worker'; @NgModule({ declarations: [ AppComponent ], imports: [ ... ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }) ],

Der @angular/service-worker wird mit dem Befehl ng add installiert und als Abhängigkeit zu pwademo/package.json :

 "dependencies": { ... "@angular/service-worker": "^6.1.0" }

Die Service-Worker-Build-Unterstützung ist auch in der CLI aktiviert. In der angular.json -Datei wird eine "serviceWorker": true Konfigurationsoption hinzugefügt.

In der Datei index.html wird ein Meta-Tag für theme-color mit dem Wert #1976d2 hinzugefügt (entspricht auch dem Wert theme_color in der Datei manifest.json ):

 <meta name="theme-color" content="#1976d2">

Die Designfarbe teilt dem Browser mit, in welcher Farbe UI-Elemente wie die Adressleiste eingefärbt werden sollen.

Das Hinzufügen der Designfarbe zu den Dateien „ index.html “ und manifest.json behebt das Audit „Adressleiste stimmt mit Markenfarben überein“.

Die Service Worker-Konfigurationsdatei

Eine weitere Datei src/ngsw-config.json wird dem Projekt hinzugefügt, ist jedoch keine erforderliche Datei für PWAs. Es ist eine Konfigurationsdatei, mit der Sie angeben können, welche Dateien und Daten-URLs der Angular-Service-Worker zwischenspeichern soll und wie er die zwischengespeicherten Dateien und Daten aktualisieren soll. Alle Details zu dieser Datei finden Sie in den offiziellen Dokumenten.

Hinweis : Zum jetzigen Zeitpunkt schlägt der vorherige Befehl ng add @angular/pwa mit der neuesten Version 6.1.3 mit folgendem Fehler fehl: Path “/ngsw-config.json” already exists daher besteht die Lösung vorerst darin, @angular/cli herunterzustufen und @angular/pwa auf Version 6.0.8 .

Führen Sie einfach die folgenden Befehle in Ihrem Projekt aus:

 $ npm i @angular/[email protected] $ ng i @angular/[email protected] $ ng add @angular/pwa

Lassen Sie uns nun die Audits für unsere lokale, lokal gehostete PWA erneut ausführen. Dies ist der neue PWA-Score:

Die Angular-CLI fügt den JavaScript-Fallback-Code, den wir im Abschnitt Progressive Verbesserung erwähnt haben, nicht automatisch hinzu. Öffnen Sie also die Datei src/index.html und fügen Sie sie hinzu:

 <noscript> Please enable JavaScript to run this application. </noscript>

Erstellen Sie als Nächstes Ihre Anwendung neu und führen Sie die Audits erneut aus. Das ist jetzt das Ergebnis:

Wir haben nur eine fehlgeschlagene Prüfung, die sich auf die HTTPS-Umleitung bezieht. Wir müssen die Anwendung hosten und die HTTP-zu-HTTPS-Umleitung konfigurieren.

Lassen Sie uns nun die Audits für eine gehostete und gesicherte Version unserer PWA ausführen.

Wir erhalten eine Punktzahl von ¹⁰⁰ ⁄ ₁₀₀ , was bedeutet, dass wir alle Kernprinzipien von PWAs erfolgreich umgesetzt haben.

Sie können den endgültigen Code dieser Demo-PWA aus diesem GitHub-Repository abrufen.

Fazit

In diesem Tutorial haben wir eine einfache Angular-Anwendung erstellt und sie mithilfe der Angular-CLI in eine PWA umgewandelt. Wir haben Lighthouse von Google verwendet, um unsere Anwendung auf PWA-Funktionen zu prüfen, und verschiedene Grundprinzipien von PWAs erläutert, z. B. Service Worker zum Hinzufügen von Offline-Support und Push-Benachrichtigungen. Die Webmanifestdatei zum Aktivieren von Funktionen zum Hinzufügen zum Startbildschirm und Begrüßungsbildschirm, Progressive Enhancement sowie HTTPS .

Möglicherweise müssen Sie auch manuell nach anderen markierten Elementen suchen (unter dem Abschnitt „Zusätzliche manuell zu überprüfende Elemente“), die jedoch nicht automatisch von Lighthouse überprüft werden. Diese Überprüfungen sind in der grundlegenden PWA-Checkliste von Google erforderlich. Sie wirken sich nicht auf den PWA-Score aus, aber es ist wichtig, dass Sie sie manuell überprüfen. Beispielsweise müssen Sie sicherstellen, dass Ihre Website browserübergreifend funktioniert und dass jede Seite eine URL hat, die für die gemeinsame Nutzung in sozialen Medien wichtig ist.

Da es bei PWAs auch um andere Aspekte wie besser wahrgenommene Leistung und Zugänglichkeit geht, können Sie Lighthouse auch verwenden, um Ihre PWA (oder jede allgemeine Website) auf diese Aspekte zu prüfen und bei Bedarf zu verbessern.