什么是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/clinpm 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

安装主题

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

安装normalize.css,作用是优化html样式

npm install --save normalize.css

然后在 styles.css中添加:

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

添加Material Module

// src/app/app.module.tsimport { 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}.gitgit 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-pagesgit checkout master

部署到github

npm i -g angular-cli-ghpagesngh "编译的文件夹"

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。