如何在Angular中使用PWA
本篇文章為大家展示了如何在Angular中使用 PWA，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)的關(guān)注點不是能為您做些什么網(wǎng)站，而是怎么做網(wǎng)站，有沒有做好網(wǎng)站，給成都創(chuàng)新互聯(lián)公司一個展示的機(jī)會來證明自己，這并不會花費您太多時間，或許會給您帶來新的靈感和驚喜。面向用戶友好，注重用戶體驗，一切以用戶為中心。
什么是PWA
PWA（Progressive Web App）利用TLS，webapp manifests和service workers使應(yīng)用程序能夠安裝并離線使用。 換句話說，PWA就像手機(jī)上的原生應(yīng)用程序，但它是使用諸如HTML5，JavaScript和CSS3之類的網(wǎng)絡(luò)技術(shù)構(gòu)建的。 如果構(gòu)建正確，PWA與原生應(yīng)用程序無法區(qū)分。
PWA 的主要特點包括下面三點：
可靠 - 即使在不穩(wěn)定的網(wǎng)絡(luò)環(huán)境下，也能瞬間加載并展現(xiàn)
體驗 - 快速響應(yīng)，并且有平滑的動畫響應(yīng)用戶的操作
粘性 - 像設(shè)備上的原生應(yīng)用，具有沉浸式的用戶體驗，用戶可以添加到桌面
PWA 本身強(qiáng)調(diào)漸進(jìn)式，并不要求一次性達(dá)到安全、性能和體驗上的所有要求，開發(fā)者可以通過 PWA Checklist 查看現(xiàn)有的特征。
創(chuàng)建項目
Step 1.創(chuàng)建項目
我們使用Angular CLI來創(chuàng)建PWA程序，首先我們安裝。
npm install -g @angular/cli npm install -g @angular/service-worker
首先我們需要確定angular/cli版本在1.6.0或以上。
最新版本6.0.0將無效，應(yīng)該后續(xù)會修復(fù)。
.angular-cli.json文件被更名為angular.json
如果是全新項目
可以使用angular/cli幫你創(chuàng)建一個Angular Service Worker項目：
ng new PWCat --service-worker
就這樣，cli會幫你安裝@angular/service-worker，在.angular-cli.json中啟用serviceWorker，為app注冊serviceWorker和生成默認(rèn)配置的ngsw-config.json。
生成的文件中，注意檢查一下app.module,ts，其中serviceWorkerModule注冊的時候應(yīng)該是這樣：
imports: [
// other modules...
ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
],在Angular 6.0.0中ng new PWCat --service-worker已經(jīng)被廢棄，使用下面的命令為項目添加pwa
ng add @angular/pwa
執(zhí)行后的結(jié)果
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
使用下面命令創(chuàng)建。
ng add @angular/pwa
將會創(chuàng)建：
- 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,作用是優(yōu)化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.創(chuàng)建一個圖片模塊
生成模塊
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.離線狀態(tài)
修改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>然后構(gòu)建部署：
ng build --prod
部署
由于https的限制，我們暫時部署到github上。
創(chuàng)建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 "編譯的文件夾"
上述內(nèi)容就是如何在Angular中使用 PWA，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站題目：如何在Angular中使用PWA
路徑分享：http://muchs.cn/article2/pidgic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、虛擬主機(jī)、云服務(wù)器、外貿(mào)網(wǎng)站建設(shè)、全網(wǎng)營銷推廣
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 電商APP軟件開發(fā)優(yōu)勢？ 2023-03-25
- 西安音樂歌曲app軟件開發(fā) 2020-12-30
- 智慧停車_停車APP軟件開發(fā)都包括哪些功能？ 2020-11-28
- app軟件開發(fā)一個月能做出來嗎？ 2023-02-14
- 作為一個軟件開發(fā)人員，謙遜的重要性 2021-05-06
- 家政業(yè)務(wù)app軟件開發(fā)可以帶來哪些優(yōu)化 2022-05-25
- 網(wǎng)站界面設(shè)計中的視覺層次原則 2014-11-13
- 網(wǎng)頁制作基本注意事項及常用軟件開發(fā)工具介紹 2023-03-18
- 成都在線答題APP軟件開發(fā)，成都在線答題APP軟件制作 2022-06-20
- 成都音樂APP軟件開發(fā)，成都音樂APP軟件制作 2022-05-27
- 什么是軟件開發(fā)中的過度設(shè)計？ 2016-09-06
- 電商APP軟件開發(fā)的注意點 2023-03-24