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 + '"htmlcode">上一篇:详解使用angular框架离线你的应用(pwa指南)// 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="/UploadFiles/2021-04-02/{{ src }}">修改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="/UploadFiles/2021-04-02/{{ src }}">然后构建部署:
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/访问了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:vue.js指令v-for使用以及下标索引的获取
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?