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 相关文章推荐
jQuery Ajax之load()方法
Oct 12 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 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 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
pandas实现导出数据的四种方式
2020/12/13 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
目标责任书范本
2014/04/16 职场文书
工作作风承诺书
2014/08/30 职场文书
师德师风自我评价范文
2014/09/11 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
工作失职自我检讨书
2015/05/05 职场文书
小人国观后感
2015/06/11 职场文书