什么是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/clinpm 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.tsimport { 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}.gitgit 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-pagesgit checkout master
部署到github
npm i -g angular-cli-ghpagesngh "編譯的文件夾"
然后在github項目的settings里面GitHub Pages選項里設置GitHub Pages 分支為gh-pages
此時就可以使用網址https://93alliance.github.io/PWCat/訪問了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
