Angular PWA使用的Demo示例

网络编程 2025/1/5 佚名

3 1 2

什么是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">

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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                
                                    Angular,PWA使用,Angular,PWA 
                                华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“Angular PWA使用的Demo示例”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月05日

Angular PWA使用的Demo示例

详解使用angular框架离线你的应用（pwa指南）

vue.js指令v-for使用以及下标索引的获取

评论“Angular PWA使用的Demo示例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接