Angular PWA使用的Demo示例(2)

// 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/访问了。