Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to apply PWA to Angular projects. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

PWA has the following advantages:

Availability in connectionless (offline) state

Fast loading speed

Screen shortcut

If the situation permits, it is recommended that people use it in the project to improve performance and enhance the user experience.

For more detailed instructions, you can check out MDN PWA. Talk is Cheap, let's take a look at the results in the actual combat. [recommended for related tutorials: "angular tutorial"]

1 npm I-g @ angular/cli@latestng new pwa-demo# npm I-g json-server# npm I-g http-server

Modifying package.json makes it easier for us to start the project.

{...., "scripts": {..., "json": "json-server data.json-p 8000", "build:pwa": "ng build", "start:pwa": "http-server-p 8001-C Mel 1 dist/pwa-demo"}}

Create a new data.json file to simulate the data and put it in the root directory

{"posts": [{"id": 1, "title": "json-server", "author": "typicode"}], "comments": [{"id": 1, "body": "some comment", "postId": 1}] "profile": {"name": "typicode"} 2 write a small demo to simulate getting data from the backend ng g s services/data// data.service.ts// remember to introduce HttpClientModuleimport {Injectable} from'@ angular/core' into app.module.ts Import {HttpClient} from'@ angular/common/http';import {Observable} from 'rxjs';@Injectable ({providedIn:' root'}) export class DataService {dataUrl = 'http://localhost:8000/posts'; constructor (private http: HttpClient) {} / / it is best not to use any in actual projects. You can define the corresponding interface public getPosts (): Observable {return this.http.get (this.dataUrl);}} based on the returned data type

Next, we modify app.component.ts and app.component.html.

/ / app.component.tsimport {Component, OnInit} from'@ angular/core';import {DataService} from'. / services/data.service';@Component ({selector: 'app-root', templateUrl:'. / app.component.html', styleUrls: ['. / app.component.scss']}) export class AppComponent implements OnInit {title = 'pwa-demo'; posts = [] Constructor (private dataService: DataService) {} ngOnInit (): void {this.dataService.getPosts (). Subscribe ((res) = > {this.posts = res;});} Hello PWA {{posts | json}}

So far, if the project starts normally, you should see the following page

3 disconnection of the network

Now that we have finished the preparatory work, let's disconnect the network and see what happens. Press F12 to select NetWork and select Offline.

After refreshing, we will find that our page can no longer be loaded properly.

4 PWA debut

Now it's our PWA's turn.

Install pwa first

Ng add @ angular/pwa

After the installation is complete, you will find that these files have changed.

Here we mainly focus on the ngsw-config.json file. The changes in other documents are easy to understand. You can see it at a glance.

These files to be cached are defined in this file:

Favicon.ico

Index.html

Manifest.webmanifest

JS and CSS bundles

All files under assets

Next, we will configure the requested interface into ngsw-config.json. For more configuration, please refer to Angular Service Worker Configuration.

{..., "dataGroups": [{"name": "api-posts", "urls": ["/ posts"], "cacheConfig": {"maxSize": 100, "maxAge": "5d"}}]}

Rebuild our project npm run build:pwa after the configuration is complete

After the completion of the construction, we will start our project through npm run start:pwa. When we open http://127.0.0.1:8001 successfully, we should be able to see

Similarly, we repeat the previous steps, disconnect the network and refresh it again, and you will find that the page can still be loaded normally.

Let's test our cache again and follow these steps to try it

Open a seamless browsing window first.

Npm run start:pwa starts and opens the page

Turn off the tabs (note that it is a tab, not the browser) and turn off http-server

Make some changes to app.component.html

Re-build and then start with http-server to open the page.

The result of the first startup

Change the Chinese character of app.component.html to Hello PWA Demo, run npm run build:pwa & & npm run start:pwa again and open http://127.0.0.1:8001 again, you will find that the result has not changed.

At this point, if we refresh it again, we will find that the page has been refreshed to what we changed.

This is the end of the article on "how to apply PWA to the Angular project". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.