What is a PWA
PWA (Progressive Web App) utilizes TLS, webapp manifests and service workers to enable applications to be installed and used offline. In other words, PWA is like a native application on a phone, but it is built using networking technologies such as HTML5, JavaScript, and CSS3. If built correctly, PWA is indistinguishable from native applications.
The main features of PWA include the following three points:
- Reliable - Can be loaded and displayed instantly even in an unstable network environment
- Experience - Quick response and smooth animations to respond to user actions
- Sticky - Like native apps on the device, with an immersive user experience that users can add to the desktop
PWA itself emphasizes progressiveness and does not require all requirements of safety, performance and experience at once. Developers can view existing features through PWA Checklist.
Create a project
Step 1. Create a project
We use the Angular CLI to create the PWA program, first we install it.
npm install -g @angular/cli npm install -g @angular/service-worker
First we need to determine that the angular/cli version is 1.6.0 or above.
The latest version 6.0.0 will be invalid and should be fixed later.
.The file was renamed to
If it's a brand new project
You can use angular/cli to help you create an Angular Service Worker project:
ng new PWCat --service-worker
That's it, cli will help you install it@angular/service-worker,exist.Enabled inserviceWorker, register serviceWorker for app and generate default configuration。
In the generated file, please check, ts, where the serviceWorkerModule should be registered as follows:
imports: [
// other modules...
('/', {enabled: })
],
In Angular 6.0.0ng new PWCat --service-workerHave been deprecated, use the following command to add pwa to the project
ng add @angular/pwa
Results after execution
CREATE (392 bytes)
UPDATE (3464 bytes)
UPDATE (1446 bytes)
UPDATE src/app/ (851 bytes)
If there is an existing project
For the old version, that is, before Angular 6.0.0:
Install @angular/service-worker:
npm install @angular/service-worker --save
Add a new file to the project directory:
// src/
{
"index": "/",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/",
"/"
],
"versionedFiles": [
"/*.",
"/*.",
"/*."
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}]
}
Enable service worker in .
// .
...
{
"apps": [{
...,
"serviceWorker": true
}]
}
Then register the Service Worker in:
// src/
...
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
@NgModule({
...
imports: [
... ,
('/', { enabled: })
],
})
...
In this way, Service Worker is introduced into the project.
For the new version 6.0.0
Create with the following command.
ng add @angular/pwa
Will create:
- manifest
- service worker
Step 2. Add Angular Material Module
Install material and cdk
npm install --save @angular/material @angular/cdk
Install the theme
/* src/ */ @import '~@angular/material/prebuilt-themes/';
Installation is to optimize html style
npm install --save
Then add in :
/* src/ */ @import '~/'; @import '~@angular/material/prebuilt-themes/';
Add Material Module
// src/app/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material';
import { AppComponent } from './';
@NgModule({
declarations: [ AppComponent ],
imports: [
BrowserModule,
MatToolbarModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Modify and
// src/app/
...
export class AppComponent {
title = 'Progressive Web Cat';
}
<!-- src/app/ -->
<mat-toolbar color="primary">
{{ title }}
</mat-toolbar>
Step 3. Create a picture module
Generate module
ng generate component img-card
Add it to
// src/app/
...
import { AppComponent } from './';
import { ImgCardComponent } from './img-card/';
@NgModule({
declarations: [
AppComponent,
ImgCardComponent
],
...
Add the img-card module to:
<!-- src/app/ -->
<mat-toolbar color="primary">
{{title}}
</mat-toolbar>
<app-img-card></app-img-card>
Revise
...
@NgModule({
...
imports: [
BrowserModule,
MatToolbarModule,
MatCardModule,
MatButtonModule
],
...
})
Revise
Add a global CatImage class
// src/app/img-card/
...
class CatImage {
message: string;
api: string;
fontsize: number;
}
...
Modify ImgCardComponent
// src/app/img-card/
...
export class ImgCardComponent implements OnInit {
private image: CatImage = {
message: 'Progressive Web Cat',
api: '/cat/says/',
fontsize: 40
};
public src: string;
ngOnInit() {
();
}
generateSrc(): void {
= + +
'?size=' + +
'&ts=' + ();
}
...
Revise
// src/app/img-card/
<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>
Revise
// src/app/img-card/
.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. Offline status
Modify ImgCardComponent
...
disabled = false;
ngOnInit() {
if () {
();
} else {
= true;
= 'assets/';
}
}
...
Modify`
<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>
Then build the deployment:
ng build --prod
deploy
Due to https restrictions, we temporarily deployed to github.
Create a Github repository
Upload the project
git add .
git commit -m "Upload project to github"
git remote add origin git@:{username}/{repo name}.git
git push --set-upstream origin master
Compilation
PWCat is the name of the warehouse
ng build --prod --base-href "/PWCat/"
Create a new github pages branch
git checkout -b "gh-pages" git push --set-upstream origin gh-pages git checkout master
Deploy to github
npm i -g angular-cli-ghpages ngh "Compiled folder"
Then set the GitHub Pages branch to gh-pages in the settings of the github project.
You can access it using the URL /PWCat/.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.