PWA如何應(yīng)用于Angular項(xiàng)目

這篇文章將為大家詳細(xì)講解有關(guān)PWA如何應(yīng)用于Angular項(xiàng)目，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

PWA 有如下一些優(yōu)點(diǎn)：

• 無連接(offline)狀態(tài)下的可用性

• 加載速度快

• 屏幕快捷方式

如果情況允許，還是推薦大家將其用于項(xiàng)目中的，提升性能，也提升用戶的體驗(yàn)。

更加詳細(xì)的說明，可以查看 MDN PWA。Talk is Cheap 接下來我們就實(shí)戰(zhàn)看一下效果?！鞠嚓P(guān)教程推薦：《angular教程》】

1 準(zhǔn)備工作

npm i -g @angular/cli@latest
ng new pwa-demo
# npm i -g json-server
# npm i -g http-server

修改 package.json 方便我們啟動項(xiàng)目

{
  ....,
  "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 文件來模擬數(shù)據(jù)，放在根目錄即可

{
  "posts": [{ "id": 1, "title": "json-server", "author": "typicode" }],
  "comments": [{ "id": 1, "body": "some comment", "postId": 1 }],
  "profile": { "name": "typicode" }
}

2 寫一個小 demo 來模擬從后端拿數(shù)據(jù)

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) {}

  // 實(shí)際項(xiàng)目中最好別用 any，可以根據(jù)返回的數(shù)據(jù)類型定義對應(yīng)的 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">
  <h2>Hello PWA</h2>
  <br />
  {{ posts | json }}
</div>

到目前為止如果項(xiàng)目正常啟動起來應(yīng)該能看到如下頁面

3 斷網(wǎng)

做完了準(zhǔn)備工作，現(xiàn)在我們來斷網(wǎng)看看會發(fā)生什么，按 F12 選擇 NetWork 后選擇 Offline。

刷新后會發(fā)現(xiàn)我們的頁面已經(jīng)不能正常加載了

4 PWA 登場

現(xiàn)在就輪到我們的 PWA 登場了。

首先安裝 pwa

ng add @angular/pwa

安裝完成之后大家會發(fā)現(xiàn)這些文件發(fā)生了變化

在這里我們主要關(guān)注 ngsw-config.json 這個文件即可，別的文件發(fā)生的變化都很好理解，大家一看便知

在這個文件中定義了這些要被緩存的文件：

• 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"
      }
    }
  ]
}

配置完成之后重新構(gòu)建我們的項(xiàng)目 npm run build:pwa

構(gòu)建完成之后再通過 npm run start:pwa 來啟動我們的項(xiàng)目，啟動成功后打開 http://127.0.0.1:8001 應(yīng)該能夠看到

一樣的我們重復(fù)前面的步驟，將網(wǎng)絡(luò)斷開再重新刷新，你會發(fā)現(xiàn)頁面依舊能夠正常的加載出來。

我們再來測試一下我們的緩存，按照下面的步驟來試一下

1. 先打開一個無痕瀏覽窗口

2. npm run start:pwa 啟動，并打開頁面

3. 關(guān)掉標(biāo)簽（注意是頁簽，不能關(guān)閉瀏覽器哦），關(guān)掉 http-server

4. 對 app.component.html 做一些更改

5. 重新 build 后再用 http-server 啟動，打開頁面。

第一次啟動的結(jié)果

更改 app.component.html 中文字為 Hello PWA Demo，再次運(yùn)行 npm run build:pwa && npm run start:pwa 再打開 http://127.0.0.1:8001 會發(fā)現(xiàn)結(jié)果并沒有改變

此時我們再刷新一下，會發(fā)現(xiàn)頁面刷新成了我們更改之后的

關(guān)于“PWA如何應(yīng)用于Angular項(xiàng)目”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。