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 同步异步的执行示例代码
Jun 23 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 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的开合式多级菜单程序
2006/10/09 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
php生成二维码
2015/08/10 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
angular动态表单制作
2018/02/23 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Python之字典对象的几种创建方法
2020/09/30 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
周年庆典邀请函范文
2014/01/23 职场文书
简历的自我评价范文
2014/02/04 职场文书
争论的故事教学反思
2014/02/06 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
党支部对照检查材料
2014/08/25 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS