這篇文章帶大家Angular PWA 漸進式 Web 應用，分享一個實戰，來看看PWA怎麼應用於Angular項目，希望對大家有所幫助！
PWA 有以下一些優點：
- #沒有連線(offline)狀態下的可用性
- 載入速度快
- 螢幕快捷方式
如果情況允許，還是推薦大家將其用於專案中的，提升效能，也提升使用者的體驗。
更詳細的說明，可以查看 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
安裝完成之後大家會發現這些檔案發生了變化
在這裡我們主要關注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 應該可以看到
#一樣的我們重複前面的步驟，將網路斷開再重新刷新，你會發現頁面依舊能夠正常的載入出來。
我們再來測試我們的緩存，按照下面的步驟來試試
##先開啟一個無痕瀏覽視窗- npm run start:pwa 啟動，並開啟頁面
- 關掉標籤（注意是頁籤，不能關閉瀏覽器哦），關掉http-server
- 對app.component. html 做一些更改
- 重新build 後再用http-server 啟動，開啟頁面。
-
第一次啟動的結果
更改
app.component.html 中文字為Hello PWA Demo，再執行一次npm run build:pwa && npm run start:pwa 再開啟http://127.0.0.1:8001 會發現結果並沒有改變
此時我們再刷新一下，會發現頁面刷新成了我們更改之後的
5 總結
#更多相關的說明還是推薦大家參考Angular 官方，對於相關的設定參考Service Work Configuration。希望這篇文章能夠幫助到大傢伙提升前端頁面的效能和體驗。同樣的 Angular 還有一項功能 App Shell，其功能與我們這次提到的 PWA 類似，有興趣的大家也可以去了解一下:)。
DevUI：體驗讓世界更美好！
更多程式相關知識，請造訪：程式設計教學！ ！
以上是透過一個實戰，來看看PWA怎麼應用在Angular項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！
