Lassen Sie uns anhand eines praktischen Kampfes sehen, wie PWA auf Angular-Projekte angewendet wird

Dieser Artikel stellt Ihnen die Angular PWA Progressive Web Application vor, teilt praktische Erfahrungen und zeigt, wie PWA auf Angular-Projekte angewendet wird. Ich hoffe, dass er für alle hilfreich ist!

PWA bietet folgende Vorteile:

• Verfügbarkeit im Offline-Zustand (ohne Verbindung)
• Schnelle Ladegeschwindigkeit
• Bildschirmverknüpfungen

Wenn es die Situation erlaubt, wird dennoch empfohlen, es in Projekten zu verwenden , verbessern Sie die Leistung und verbessern Sie auch die Benutzererfahrung.

Detailliertere Anweisungen finden Sie unter MDN PWA. Reden ist billig Sehen wir uns als Nächstes die Wirkung in der Praxis an. [Verwandte Tutorial-Empfehlungen: „Talk is Cheap 接下来我们就实战看一下效果。【相关教程推荐：《angular教程》】

1 准备工作

npm i -g @angular/cli@latest
ng new pwa-demo
# npm i -g json-server
# npm i -g http-server

修改 package.json 方便我们启动项目

{
  ....,
  "scripts": {
    ...,
    "json": "json-server data.json -p 8000",
    "build:pwa": "ng build",
    "start:pwa": "http-server -p 8001 -c-1 dist/pwa-demo"
  }
}

新建一个 data.json 文件来模拟数据，放在根目录即可

{
  "posts": [{ "id": 1, "title": "json-server", "author": "typicode" }],
  "comments": [{ "id": 1, "body": "some comment", "postId": 1 }],
  "profile": { "name": "typicode" }
}

2 写一个小 demo 来模拟从后端拿数据

ng g s services/data

// data.service.ts
// 记得在 app.module.ts 中引入 HttpClientModule
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  dataUrl = 'http://localhost:8000/posts';

  constructor(private http: HttpClient) {}

  // 实际项目中最好别用 any，可以根据返回的数据类型定义对应的 interface
  public getPosts(): Observable<any> {
    return this.http.get(this.dataUrl);
  }
}

接下来我们修改 app.component.ts 和 app.component.html

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './services/data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'pwa-demo';
  posts = [];

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.dataService.getPosts().subscribe((res) => {
      this.posts = res;
    });
  }
}

<div class="app">
  <h1>Hello PWA</h1>
  <br />
  {{ posts | json }}
</div>

到目前为止如果项目正常启动起来应该能看到如下页面

3 断网

做完了准备工作，现在我们来断网看看会发生什么，按 F12 选择 NetWork 后选择 Offline。

刷新后会发现我们的页面已经不能正常加载了

4 PWA 登场

现在就轮到我们的 PWA 登场了。

首先安装 pwa

ng add @angular/pwa

安装完成之后大家会发现这些文件发生了变化

在这里我们主要关注 ngsw-config.json 这个文件即可，别的文件发生的变化都很好理解，大家一看便知

在这个文件中定义了这些要被缓存的文件：

• favicon.ico
• index.html
• manifest.webmanifest
• JS and CSS bundles
• 所有在 assets 下的文件

接下来我们将请求的接口配置到 ngsw-config.json 中来，更多的配置可以参考 Angular Service Worker Configuration

{
  ...,
  "dataGroups": [
    {
      "name": "api-posts",
      "urls": ["/posts"],
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "5d"
      }
    }
  ]
}

配置完成之后重新构建我们的项目 npm run build:pwa

构建完成之后再通过 npm run start:pwa 来启动我们的项目，启动成功后打开 http://127.0.0.1:8001 应该能够看到

一样的我们重复前面的步骤，将网络断开再重新刷新，你会发现页面依旧能够正常的加载出来。

我们再来测试一下我们的缓存，按照下面的步骤来试一下

1. 先打开一个无痕浏览窗口
2. npm run start:pwa 启动，并打开页面
3. 关掉标签（注意是页签，不能关闭浏览器哦），关掉 http-server
4. 对 app.component.html 做一些更改
5. 重新 build 后再用 http-server 启动，打开页面。

第一次启动的结果

更改 app.component.html 中文字为 Hello PWA Demo，再次运行 npm run build:pwa && npm run start:pwaAngular Tutorial“]

1 Vorbereitung

rrreee🎜🎜Ändern Sie package.json, um uns den Start des Projekts zu erleichtern🎜rrreee 🎜Neue Datei data.json zum Simulieren von Daten. Legen Sie sie einfach im Stammverzeichnis ab. 🎜rrreee

2 Schreiben Sie eine kleine Demo, um das Abrufen von Daten aus dem zu simulieren Backend h2>rrreeerrreee🎜Als nächstes ändern wir app.component.ts und app.component.html🎜rrreeerrreee🎜Ob das Projekt bisher normal startet, sollten Sie sehen die folgende Seite 🎜🎜 🎜

3 Trennen Sie die Verbindung zum Internet

🎜Nach Abschluss der Vorbereitungen trennen wir uns vom Internet, um zu sehen, was passieren wird. Drücken Sie F12 und wählen Sie Netzwerk code> und wählen Sie <code>Offline. 🎜🎜🎜🎜Aktualisieren Später werden Sie feststellen, dass unsere Seite nicht mehr normal geladen werden kann 🎜🎜 alt ="Lassen Sie uns anhand eines praktischen Kampfes sehen, wie PWA auf Angular-Projekte angewendet wird"/>🎜

4 PWA ist da

🎜Jetzt sind wir an der Reihe, dass PWA hier ist. 🎜🎜Installieren Sie zuerst pwa🎜rrreee🎜Nachdem die Installation abgeschlossen ist, werden Sie feststellen, dass sich diese Dateien geändert haben🎜🎜🎜🎜Hier konzentrieren wir uns hauptsächlich auf die Datei ngsw-config.json und andere Dateien Die aufgetretenen Änderungen sind leicht zu verstehen und jeder kann sie auf einen Blick erkennen🎜🎜🎜🎜Die zwischenzuspeichernden Dateien werden in dieser Datei definiert: 🎜🎜🎜favicon.ico🎜🎜index.html🎜🎜manifest.webmanifest🎜🎜JS- und CSS-Bundles🎜 🎜alle Dateien unter Assets🎜🎜🎜Als nächstes konfigurieren wir die angeforderte Schnittstelle in ngsw-config.json. Weitere Informationen zur Konfiguration finden Sie unter Angular Service Worker Configuration🎜🎜rrreee🎜Nachdem die Konfiguration abgeschlossen ist, erstellen Sie unser Projekt neu npm run build: pwa🎜🎜Nachdem der Build abgeschlossen ist, verwenden Sie npm run start:pwa, um unser Projekt zu starten. Öffnen Sie nach erfolgreichem Start 🎜http://127.0.0.1:8001🎜 und Sie sollten in der Lage sein, es zu sehen 🎜🎜🎜🎜 Wir wiederholen die vorherigen Schritte, trennen das Netzwerk und aktualisieren erneut. Sie werden feststellen, dass die Seite weiterhin normal geladen werden kann. 🎜🎜🎜🎜uns Testen wir unseren Cache noch einmal und befolgen Sie die folgenden Schritte, um es auszuprobieren🎜

🎜Öffnen Sie zunächst ein Inkognito-Browserfenster.🎜🎜npm führen Sie start:pwa aus, um zu starten, und öffnen Sie die Seite , kein Tab) Schließen Sie den Browser, schalten Sie den http-Server aus🎜🎜Nehmen Sie einige Änderungen an app.component.html vor🎜🎜Neu erstellen und starten Sie dann den http-Server, um die Seite zu öffnen. 🎜

🎜Das Ergebnis des ersten Startups🎜🎜🎜🎜Ändern Sie den chinesischen Text von app.component.html in Hello PWA Demo und führen Sie npm run build:pwa aus && npm führen Sie erneut start:pwa aus und öffnen Sie dann 🎜http://127.0.0.1:8001🎜 und Sie werden feststellen, dass sich das Ergebnis nicht geändert hat🎜

Zu diesem Zeitpunkt aktualisieren wir erneut und wir werden feststellen, dass die Seite auf die Seite nach unseren Änderungen aktualisiert wurde

5 Zusammenfassung

Für weitere verwandte Anweisungen empfehlen wir Ihnen, sich an den Beamten zu wenden Angular und zugehörige Konfigurationsreferenz Service Work Configuration. Ich hoffe, dieser Artikel kann jedem helfen, die Leistung und Erfahrung von Front-End-Seiten zu verbessern. Ebenso hat Angular eine ähnliche Funktion Wer Interesse hat, kann sich das auch ansehen :). App Shell，其功能与我们这次提到的 PWA

DevUI: Erfahrung macht die Welt zu einem besseren Ort!

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmierunterricht! !

Das obige ist der detaillierte Inhalt vonLassen Sie uns anhand eines praktischen Kampfes sehen, wie PWA auf Angular-Projekte angewendet wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!