실습을 통해 Angular 프로젝트에 PWA가 어떻게 적용되는지 살펴보겠습니다.

이 글에서는 Angular PWA 프로그레시브 웹 애플리케이션을 소개하고, 실제 경험을 공유하며, PWA가 Angular 프로젝트에 어떻게 적용되는지 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

PWA에는 다음과 같은 장점이 있습니다.

• 연결되지 않은(오프라인) 상태에서도 사용 가능
• 빠른 로딩 속도
• 화면 바로가기

상황이 허락한다면 프로젝트에서 사용하는 것이 좋습니다. 성능을 향상하고 사용자 경험도 향상시킵니다.

자세한 지침은 MDN PWA를 참조하세요. 말은 싸다 다음으로 실제로 효과를 살펴보겠습니다. [관련 튜토리얼 추천: "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 준비

rrreee🎜🎜프로젝트를 쉽게 시작할 수 있도록 package.json을 수정하세요🎜rrreee 🎜새로운 데이터를 시뮬레이션하기 위한 data.json 파일을 루트 디렉터리에 넣기만 하면 됩니다.🎜rrreee

2 backend h2>rrreeerrreee🎜다음으로 app.comComponent.ts와 app.comComponent.html를 수정합니다🎜rrreeerrreee🎜지금까지 프로젝트가 정상적으로 시작되면 다음과 같이 표시됩니다. 다음 페이지 🎜🎜 🎜

3 인터넷 연결 끊기

🎜 준비가 완료되면 인터넷 연결을 끊고 F12를 누르고 선택하세요. 네트워크를 선택하고 오프라인을 선택합니다. 🎜🎜🎜🎜새로고침 나중에 우리 페이지가 더 이상 정상적으로 로드되지 않는다는 것을 알게 될 것입니다🎜🎜🎜

4 PWA가 등장합니다

🎜이제 PWA가 등장할 차례입니다. 🎜🎜먼저 pwa를 설치하세요🎜rrreee🎜설치가 완료되면 이 파일들이 변경된 것을 확인할 수 있습니다🎜🎜🎜🎜여기에서는 주로 ngsw-config.json 파일, 기타 파일에 중점을 둡니다. 일어난 변화는 이해하기 쉽고 누구나 한눈에 알 수 있습니다🎜🎜🎜🎜캐시할 파일은 🎜🎜🎜favicon.ico🎜🎜index.html🎜🎜manifest.webmanifest🎜🎜JS 및 CSS 번들🎜에 정의되어 있습니다. 🎜자산 아래의 모든 파일🎜🎜🎜다음으로 요청된 인터페이스를 ngsw-config.json으로 구성합니다. 자세한 구성은 Angular Service Worker 구성🎜🎜rrreee🎜구성이 완료된 후 프로젝트를 다시 빌드하세요. npm run build: pwa🎜🎜빌드가 완료된 후 npm run start:pwa를 사용하여 프로젝트를 시작하고 🎜http://127.0.0.1:8001🎜을 열어야 합니다. 보실 수 있으세요 🎜🎜🎜🎜 이전 단계를 반복하고 네트워크 연결을 끊고 다시 새로고침합니다. 페이지가 여전히 정상적으로 로드되는 것을 확인할 수 있습니다. 🎜🎜🎜🎜us 캐시를 다시 테스트하고 아래 단계에 따라 시도해 보세요🎜

🎜먼저 시크릿 탐색 창을 엽니다🎜🎜npm run start:pwa를 시작하고 페이지를 엽니다🎜🎜탭을 닫습니다(탭이라는 점에 유의하세요) , 탭 아님) 브라우저를 닫고) http-server🎜🎜를 끄고 app.comComponent.html🎜🎜rebuild를 일부 변경한 다음 http-server를 시작하여 페이지를 엽니다. 🎜

🎜첫 시작 결과🎜🎜🎜🎜 app.comComponent.html의 중국어 텍스트를 Hello PWA Demo로 변경하고 npm run build:pwa를 실행하세요. && npm 다시 start:pwa를 실행하고 🎜http://127.0.0.1:8001🎜을 열면 결과가 변경되지 않은 것을 확인할 수 있습니다🎜

이때 다시 새로고침을 하게 되면 변경 후의 페이지로 새로고침된 것을 확인할 수 있습니다

5 요약

자세한 내용은 을 참고하시기 바랍니다. Angular 공식, 관련 구성 참조 서비스 작업 구성. 이 기사가 모든 사람이 프런트 엔드 페이지의 성능과 경험을 향상시키는 데 도움이 되기를 바랍니다. 마찬가지로 Angular에도 비슷한 기능이 있습니다 App Shell，其功能与我们这次提到的 PWA. 관심 있는 사람은 누구나 확인해 볼 수 있습니다 :).

DevUI: 경험이 세상을 더 나은 곳으로 만듭니다!

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 실습을 통해 Angular 프로젝트에 PWA가 어떻게 적용되는지 살펴보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!