A travers un combat pratique, voyons comment la PWA s'applique aux projets Angular

Cet article vous présentera Angular PWA Progressive Web Application, partagera une expérience pratique et verra comment PWA est appliqué aux projets Angular. J'espère que cela sera utile à tout le monde !

PWA présente les avantages suivants :

• Disponibilité en état de non-connexion (hors ligne)
• Vitesse de chargement rapide
• Raccourcis d'écran

Si la situation le permet, il est toujours recommandé de l'utiliser dans les projets , améliorez les performances et améliorez également l'expérience utilisateur.

Pour des instructions plus détaillées, veuillez consulter MDN PWA. Parler, c'est pas cher Ensuite, voyons l'effet dans la pratique. [Recommandations de tutoriel associées : "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:pwatutoriel angulaire"]

1 Préparation

rrreee🎜🎜Modifiez package.json pour nous faciliter le démarrage du projet🎜rrreee 🎜Nouveau Un fichier data.json pour simuler des données, placez-le simplement dans le répertoire racine🎜rrreee

2 Écrivez une petite démo pour simuler l'obtention de données à partir du backend h2>rrreeerrreee🎜Ensuite, nous modifions app.component.ts et app.component.html🎜rrreeerrreee🎜Jusqu'à présent, si le projet démarre normalement, vous devriez voir la page suivante 🎜🎜 🎜

3 Déconnectez-vous d'Internet

🎜Après avoir terminé les préparatifs, déconnectons-nous d'Internet pour voir ce qui se passera. Appuyez sur F12 et sélectionnez. NetWork code> et sélectionnez <code>Hors ligne. 🎜🎜🎜🎜Actualiser Plus tard, vous constaterez que notre page ne peut plus se charger normalement🎜🎜🎜

4 PWA est là

🎜C'est maintenant à notre tour que PWA soit là. 🎜🎜Première installation de pwa🎜rrreee🎜Une fois l'installation terminée, vous constaterez que ces fichiers ont changé🎜🎜🎜🎜Ici, nous nous concentrons principalement sur le fichier ngsw-config.json, d'autres fichiers Les changements survenus sont faciles à comprendre et tout le monde le saura d'un coup d'œil🎜🎜🎜🎜Les fichiers à mettre en cache sont définis dans ce fichier : 🎜🎜🎜favicon.ico🎜🎜index.html🎜🎜manifest.webmanifest🎜🎜JS et CSS bundles🎜 🎜tous les fichiers sous actifs🎜🎜🎜Ensuite, nous configurons l'interface demandée dans ngsw-config.json Pour plus de configuration, veuillez vous référer à Configuration d'Angular Service Worker🎜🎜rrreee🎜Une fois la configuration terminée, reconstruisez notre projet npm run build : pwa🎜🎜Une fois la construction terminée, utilisez npm run start:pwa pour démarrer notre projet. Après un démarrage réussi, ouvrez 🎜http://127.0.0.1:8001🎜 et vous devriez. pouvoir le voir À 🎜🎜🎜🎜 Nous répétons les étapes précédentes, déconnectons le réseau et actualisons à nouveau. Vous constaterez que la page peut toujours être chargée normalement. 🎜🎜🎜🎜nous Testons à nouveau notre cache et suivons les étapes ci-dessous pour l'essayer🎜

🎜Ouvrez d'abord une fenêtre de navigation incognito🎜🎜npm run start:pwa pour démarrer et ouvrez la page🎜🎜Fermez l'onglet (notez qu'il s'agit d'un onglet , pas un onglet) Fermez le navigateur), désactivez le serveur http🎜🎜Apportez quelques modifications à app.component.html🎜🎜rebuild, puis démarrez le serveur http pour ouvrir la page. 🎜

🎜Le résultat de la première startup🎜🎜🎜🎜Changez le texte chinois de app.component.html en Hello PWA Demo et exécutez npm run build:pwa && npm exécutez à nouveau start:pwa puis ouvrez 🎜http://127.0.0.1:8001🎜 et vous constaterez que le résultat n'a pas changé🎜

À ce moment-là, nous actualisons à nouveau, et nous constaterons que la page a été actualisée à celle après nos modifications

5 Résumé

Pour plus d'instructions connexes, nous vous recommandons de vous référer au site officiel Angular, et pour référence de configuration associée Service Work Configuration. J'espère que cet article pourra aider tout le monde à améliorer les performances et l'expérience des pages frontales. De même, Angular a également une fonction similaire Toute personne intéressée peut également la consulter :). App Shell，其功能与我们这次提到的 PWA

DevUI : L'expérience rend le monde meilleur !

Pour plus de connaissances liées à la programmation, veuillez visiter :

Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!