Angular PWA使用的Demo示例
什么是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 "编译的文件夹"
然后在github项目的settings里面github pages选项里设置github pages 分支为gh-pages
此时就可以使用网址https://93alliance.github.io/pwcat/访问了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。