実践的な戦闘を通じて、PWA が Angular プロジェクトにどのように適用されるかを見てみましょう

この記事では、Angular PWA プログレッシブ Web アプリケーションについて紹介し、実践的な経験を共有し、PWA が Angular プロジェクトにどのように適用されるかを確認します。

PWA には次の利点があります。

• 未接続 (オフライン) 状態でも可用性
• 高速な読み込み速度
• 画面ショートカット

状況が許せば、パフォーマンスとユーザー エクスペリエンスを向上させるために、プロジェクトでこれを使用することをお勧めします。

詳細な手順については、MDN PWA をご覧ください。 話は安い 次に、実際に効果を見てみましょう。 [関連チュートリアルの推奨事項: "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将来をシミュレーションするための小さなデモを作成します。 データを取得します。

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 およびCSS バンドル
アセットの下のすべてのファイル

次に、要求されたインターフェイスを

ngsw-config.json に構成します。詳細については、 を参照してください。 Angular Service Worker の構成

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

構成が完了したらプロジェクトを再ビルドします

npm run build:pwa

ビルドが完了したら、

npm を渡しますstart:pwa を実行してプロジェクトを開始します。正常に起動したら、http://127.0.0.1:8001 を開くと、

# # が表示されるはずです。 #前の手順を繰り返し、ネットワークを切断して再度更新すると、ページが引き続き正常に読み込まれることがわかります。

#キャッシュを再度テストし、以下の手順に従って試してみましょう

最初にシークレット ブラウジング ウィンドウを開いてください

npm run start:pwa が起動し、ページが開きます。
1. タブを閉じます (これはタブなので、ブラウザを閉じることはできないことに注意してください)。app.component への http-server
2. をオフにします。 html
3. 再構築にいくつかの変更を加え、http-server から開始してページを開きます。
5. 最初の起動の結果

変更 app.component.html

中国語のテキストは

Hello PWAデモをもう一度実行してくださいnpm run build:pwa && npm run start:pwaを実行してからhttp://127.0.0.1:8001を開くと、結果が次のようになっていることがわかります。変更されていません

##この時点で、もう一度更新すると、変更後のページに更新されていることがわかります

5 概要

関連する手順の詳細については、

Angular 公式を参照し、関連する構成については、サービス作業構成を参照することをお勧めします。この記事が皆さんのフロントエンド ページのパフォーマンスとエクスペリエンスの向上に役立つことを願っています。同様に、Angular にも App Shell という今回の PWA と似た機能がありますので、興味のある方はぜひチェックしてみてください:)。

DevUI: 経験が世界をより良い場所にします。

プログラミング関連の知識について詳しくは、

プログラミング教育をご覧ください。 ！

以上が実践的な戦闘を通じて、PWA が Angular プロジェクトにどのように適用されるかを見てみましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。