扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇文章为大家展示了如何在Angular中使用 PWA，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
成都网站建设、网站建设的关注点不是能为您做些什么网站，而是怎么做网站，有没有做好网站，给成都创新互联公司一个展示的机会来证明自己，这并不会花费您太多时间，或许会给您带来新的灵感和惊喜。面向用户友好，注重用户体验，一切以用户为中心。
什么是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';
}