Melalui pertempuran praktikal, mari lihat cara PWA digunakan pada projek Angular

Artikel ini akan memperkenalkan anda kepada Angular Aplikasi Web Progresif PWA, berkongsi pengalaman praktikal dan melihat cara PWA digunakan pada projek Angular, saya harap ia akan membantu semua orang.

PWA mempunyai kelebihan berikut:

• Ketersediaan dalam keadaan luar talian
• Kelajuan pemuatan pantas
• Skrin pintasan

Jika keadaan mengizinkan, adalah disyorkan agar anda menggunakannya dalam projek untuk meningkatkan prestasi dan pengalaman pengguna.

Untuk arahan yang lebih terperinci, sila lihat MDN PWA. Talk is Cheap Seterusnya, mari kita lihat kesannya dalam amalan. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

1 Persediaan

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

Ubah suaipackage.json untuk memudahkan permulaan kami Projek

{
  ....,
  "scripts": {
    ...,
    "json": "json-server data.json -p 8000",
    "build:pwa": "ng build",
    "start:pwa": "http-server -p 8001 -c-1 dist/pwa-demo"
  }
}

Buat fail data.json baharu untuk mensimulasikan data dan letakkannya dalam direktori akar

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

2 Tulis demo kecil untuk mensimulasikan mendapatkan data dari bahagian belakang

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

Seterusnya kami mengubah suai app.component.ts dan 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>

Setakat ini, jika projek bermula seperti biasa, anda harus melihat halaman berikut

3 Putuskan sambungan daripada Internet

Selepas melengkapkan persediaan, mari putuskan sambungan daripada Internet untuk melihat apa yang akan berlaku Tekan F12 untuk memilih NetWork dan kemudian pilih Offline.

Selepas menyegarkan, anda akan mendapati halaman kami tidak lagi boleh dimuatkan seperti biasa

4 PWA debut

Kini giliran kami PWA untuk muncul.

Pasang pertamapwa

ng add @angular/pwa

Selepas pemasangan selesai, anda akan mendapati bahawa fail ini telah berubah

Di sini kami terutamanya Hanya memberi perhatian kepada ngsw-config.json Perubahan dalam fail lain mudah difahami semua orang boleh melihat dengan pantas bahawa

mentakrifkan ini untuk dicache dalam ini. fail. Fail untuk:

• favicon.ico
• index.html
• manifest.webmanifest
• JS dan berkas CSS
• semua Dalam fail di bawah aset

Seterusnya kami mengkonfigurasi antara muka yang diminta ke dalam ngsw-config.json Untuk konfigurasi lanjut, sila rujuk Konfigurasi Pekerja Perkhidmatan Angular

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

.

Selepas konfigurasi selesai, bina semula projek kaminpm run build:pwa

Selepas pembinaan selesai, mulakan projek kami melalui npm run start:pwa Selepas berjaya memulakan, buka http://127.0.0.1 : 8001 Anda sepatutnya dapat melihat

Kami mengulangi langkah sebelumnya, putuskan sambungan rangkaian dan muat semula semula, anda akan mendapati halaman masih boleh dimuatkan seperti biasa .

Mari uji cache kami sekali lagi dan ikuti langkah di bawah untuk mencubanya

1. Buka tetingkap penyemakan imbas inkognito dahulu
2. npm run start:pwa bermula, dan membuka halaman
3. tutup tab (perhatikan bahawa ia adalah tab, anda tidak boleh menutup penyemak imbas), tutup http-server
4. ke app.component buat beberapa perubahan
5. Bina semula dan kemudian mulakan dengan http-server untuk membuka halaman.

Hasil daripada permulaan pertama

Tukar teks Cina app.component.html kepada Hello PWA Demo, jalankan npm run build:pwa && npm run start:pwa sekali lagi dan buka http://127.0.0.1:8001 Anda akan mendapati bahawa keputusan tidak berubah

Pada masa ini, jika kami menyegarkannya semula, kami akan mendapati halaman itu telah dimuat semula kepada halaman selepas perubahan kami

5 Ringkasan

Untuk mendapatkan arahan yang lebih berkaitan, adalah disyorkan agar anda merujuk kepada Angular official , dan untuk konfigurasi yang berkaitan, rujuk Konfigurasi Kerja Perkhidmatan. Saya harap artikel ini dapat membantu semua orang meningkatkan prestasi dan pengalaman halaman hadapan. Begitu juga, Angular juga mempunyai fungsi App Shell, yang serupa dengan PWA yang kami sebutkan kali ini, sesiapa yang berminat juga boleh menyemaknya :).

DevUI: Pengalaman menjadikan dunia tempat yang lebih baik!

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengajaran Pengaturcaraan! !

Atas ialah kandungan terperinci Melalui pertempuran praktikal, mari lihat cara PWA digunakan pada projek Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!