Angular PWA使用的Demo示例

如果是已有项目

对于老版本，也就是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 "编译的文件夹"

然后在github项目的settings里面GitHub Pages选项里设置GitHub Pages 分支为gh-pages

此时就可以使用网址https://93alliance.github.io/PWCat/访问了。