如何在Angular中使用 PWA

本篇文章為大家展示了如何在Angular中使用 PWA，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

什么是PWA

PWA（Progressive Web App）利用TLS，webapp manifests和service workers使應用程序能夠安裝并離線使用。 換句話說，PWA就像手機上的原生應用程序，但它是使用諸如HTML5，JavaScript和CSS3之類的網絡技術構建的。 如果構建正確，PWA與原生應用程序無法區分。

PWA 的主要特點包括下面三點：

• 可靠 - 即使在不穩定的網絡環境下，也能瞬間加載并展現

• 體驗 - 快速響應，并且有平滑的動畫響應用戶的操作

• 粘性 - 像設備上的原生應用，具有沉浸式的用戶體驗，用戶可以添加到桌面

PWA 本身強調漸進式，并不要求一次性達到安全、性能和體驗上的所有要求，開發者可以通過 PWA Checklist 查看現有的特征。

創建項目

Step 1.創建項目

我們使用Angular CLI來創建PWA程序，首先我們安裝。

npm install -g @angular/cli
npm install -g @angular/service-worker

首先我們需要確定angular/cli版本在1.6.0或以上。

最新版本6.0.0將無效，應該后續會修復。

.angular-cli.json文件被更名為angular.json

如果是全新項目

可以使用angular/cli幫你創建一個Angular Service Worker項目：

ng new PWCat --service-worker

就這樣，cli會幫你安裝@angular/service-worker，在.angular-cli.json中啟用serviceWorker，為app注冊serviceWorker和生成默認配置的ngsw-config.json。

生成的文件中，注意檢查一下app.module,ts，其中serviceWorkerModule注冊的時候應該是這樣：

imports: [
  // other modules...
  ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
 ],

在Angular 6.0.0中ng new PWCat --service-worker已經被廢棄，使用下面的命令為項目添加pwa

ng add @angular/pwa

執行后的結果

CREATE ngsw-config.json (392 bytes)
UPDATE angular.json (3464 bytes)
UPDATE package.json (1446 bytes)
UPDATE src/app/app.module.ts (851 bytes)

如果是已有項目

對于老版本，也就是Angular 6.0.0以前：

安裝@angular/service-worker：

npm install @angular/service-worker --save

在項目目錄下面新增ngsw-config.json文件：

// src/ngsw-config.json
{
 "index": "/index.html",
 "assetGroups": [{
  "name": "app",
  "installMode": "prefetch",
  "resources": {
   "files": [
    "/favicon.ico",
    "/index.html"
   ],
   "versionedFiles": [
    "/*.bundle.css",
    "/*.bundle.js",
    "/*.chunk.js"
   ]
  }
 }, {
  "name": "assets",
  "installMode": "lazy",
  "updateMode": "prefetch",
  "resources": {
   "files": [
    "/assets/**"
   ]
  }
 }]
}

在.angular-cli.json中啟用service worker：

// .angular-cli.json
...
{ 
 "apps": [{ 
  ..., 
  "serviceWorker": true
 }]
}

然后在app.module.ts中注冊Service Worker ：

// src/app.module.ts
...
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
@NgModule({
 ...
 imports: [
  ... ,
  ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
 ],
})
...

這樣項目中就引入Service Worker。

對于新版本6.0.0

使用下面命令創建。

ng add @angular/pwa

將會創建：
- manifest
- service worker

Step 2. 添加Angular Material模塊

安裝material和cdk

npm install --save @angular/material @angular/cdk

安裝主題

/* src/styles.css */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

安裝normalize.css,作用是優化html樣式

npm install --save normalize.css

然后在 styles.css中添加:

/* src/styles.css */
@import '~normalize.css/normalize.css';
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

添加Material Module

// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material';
import { AppComponent } from './app.component';
@NgModule({
 declarations: [ AppComponent ],
 imports: [
  BrowserModule,
  MatToolbarModule
 ],
 providers: [],
 bootstrap: [ AppComponent ]
})
export class AppModule { }

修改app.component.ts和app.component.html

// src/app/app.component.ts
...
export class AppComponent {
 title = 'Progressive Web Cat';
}

<!-- src/app/app.component.html -->
<mat-toolbar color="primary">
 {{ title }}
</mat-toolbar>

Step 3.創建一個圖片模塊

生成模塊

ng generate component img-card

將其添加到app.module.ts

// src/app/app.module.ts
...
import { AppComponent } from './app.component';
import { ImgCardComponent } from './img-card/img-card.component';
@NgModule({
 declarations: [
  AppComponent,
  ImgCardComponent
 ],
 ...

將img-card模塊添加到app.component.html中：

<!-- src/app/app.component.html -->
<mat-toolbar color="primary">
 {{title}}
</mat-toolbar>
<app-img-card></app-img-card>

修改app.module.ts

...
@NgModule({
...
 imports: [
  BrowserModule,
  MatToolbarModule,
  MatCardModule,
  MatButtonModule
 ],
...
})

修改img-card.component.ts

添加一個全局的CatImage類

// src/app/img-card/img-card.component.ts
...
class CatImage {
 message: string;
 api: string;
 fontsize: number;
}
...

修改ImgCardComponent

// src/app/img-card/img-card.component.ts
...
export class ImgCardComponent implements OnInit {

 private image: CatImage = {
  message: 'Progressive Web Cat',
  api: 'https://cataas.com/cat/says/',
  fontsize: 40
 };
 public src: string;
 ngOnInit() {
  this.generateSrc();
 }
 generateSrc(): void {
  this.src = this.image.api + this.image.message + 
    '?size=' + this.image.fontsize +
    '&ts=' + Date.now();
 }
...

修改img-card.component.html

// src/app/img-card/img-card.component.html
<mat-card>
 <mat-card-actions>
  <button 
   color="primary" 
   (click)="generateSrc()"
   mat-button 
   mat-raised-button>
   Give me another cat
  </button>
 </mat-card-actions>
 <img 
  src="{{ src }}" 
  alt="Cute cat"
  mat-card-image>
</mat-card>

修改img-card.component.css

// src/app/img-card/img-card.component.css
.mat-card {
 width: 400px;
 margin: 2rem auto;
}
.mat-card .mat-card-actions {
 padding-top: 0;
}
.mat-card .mat-button {
 margin: 0 auto;
 display: block;
}

Step 4.離線狀態

修改ImgCardComponent

...
disabled = false;
ngOnInit() {

  if (navigator.onLine) {
   this.generateSrc();
  } else {
   this.disabled = true;
   this.src = 'assets/offline.jepg';
  }
}
...

修改`img-card.component.html

<mat-card>
 <mat-card-actions>
  <button 
   color="primary" 
   (click)="generateSrc()"
   mat-button
   disabled="disabled"
   mat-raised-button>
   Give me another cat
  </button>
 </mat-card-actions>
 <img 
  src="{{ src }}" 
  alt="Cute cat"
  mat-card-image>
</mat-card>

然后構建部署：

ng build --prod

部署

由于https的限制，我們暫時部署到github上。

創建Github倉庫

上傳項目

git add .
git commit -m "Upload project to github"
git remote add origin git@github.com:{username}/{repo name}.git
git push --set-upstream origin master

編譯

PWCat是倉庫名稱

ng build --prod --base-href "/PWCat/"

新建github pages分支

git checkout -b "gh-pages"
git push --set-upstream origin gh-pages
git checkout master

部署到github

npm i -g angular-cli-ghpages
ngh "編譯的文件夾"

上述內容就是如何在Angular中使用 PWA，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。