Angular PWA使用的Demo示例


Posted in Javascript onJanuary 31, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
JavaScript设计模式初探
Jan 07 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 #Javascript
微信小程序开发的基本流程步骤
Jan 31 #Javascript
JSON的parse()方法介绍
Jan 31 #Javascript
JSON.stringify()方法讲解
Jan 31 #Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 #Javascript
vue中的mvvm模式讲解
Jan 31 #Javascript
Vue和React组件之间的传值方式详解
Jan 31 #Javascript
You might like
PHP中的CMS的涵义
2007/03/11 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
python 简易计算器程序,代码就几行
2009/08/29 Python
Python实现把数字转换成中文
2015/06/29 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
pymysql 开启调试模式的实现
2019/09/24 Python
校园安全广播稿
2014/02/08 职场文书
制作部班长职位说明书
2014/02/26 职场文书
老公爱的承诺书
2014/03/31 职场文书
药品营销策划方案
2014/06/15 职场文书
节约用水的口号
2014/06/20 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
对领导班子的意见和建议
2015/06/08 职场文书