ホームページ > 記事 > ウェブフロントエンド > 実践的な戦闘を通じて、PWA が Angular プロジェクトにどのように適用されるかを見てみましょう
この記事では、Angular PWA プログレッシブ Web アプリケーションについて紹介し、実践的な経験を共有し、PWA が Angular プロジェクトにどのように適用されるかを確認します。
PWA には次の利点があります。
状況が許せば、パフォーマンスとユーザー エクスペリエンスを向上させるために、プロジェクトでこれを使用することをお勧めします。
詳細な手順については、MDN PWA をご覧ください。 話は安い
次に、実際に効果を見てみましょう。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
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" } }
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 を選択します。
PWA の番です。
pwa
ng add @angular/pwaインストールが完了すると、これらのファイルが変更されていることがわかります #ここでは主に
ngsw-config.json ファイルに焦点を当てます。他のファイルの変更は理解しやすいです。誰もが一目でわかります。
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 を開くと、
# # が表示されるはずです。 #前の手順を繰り返し、ネットワークを切断して再度更新すると、ページが引き続き正常に読み込まれることがわかります。
#キャッシュを再度テストし、以下の手順に従って試してみましょう
最初にシークレット ブラウジング ウィンドウを開いてください
変更 app.component.html
中国語のテキストはHello PWAデモをもう一度実行してください
npm run build:pwa && npm run start:pwaを実行してから
http://127.0.0.1:8001を開くと、結果が次のようになっていることがわかります。変更されていません
Angular 公式を参照し、関連する構成については、サービス作業構成を参照することをお勧めします。この記事が皆さんのフロントエンド ページのパフォーマンスとエクスペリエンスの向上に役立つことを願っています。同様に、Angular にも App Shell という今回の
PWA と似た機能がありますので、興味のある方はぜひチェックしてみてください:)。
DevUI: 経験が世界をより良い場所にします。
プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 !
以上が実践的な戦闘を通じて、PWA が Angular プロジェクトにどのように適用されるかを見てみましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。