PWA has the following advantages:

  • Availability in offline state
  • Fast loading speed
  • Screen shortcut

If possible, we still recommend you to use it in the project to improve performance and improve user experience.

For more details, see MDN PWA. Talk is Cheap.

1 Preparations

npm i -g @angular/cli@latest
ng new pwa-demo
# npm i -g json-server
# npm i -g http-server
Copy the code

Modify package.json to make it easier to start the project

{... ."scripts": {... ."json": "json-server data.json -p 8000"."build:pwa": "ng build"."start:pwa": "http-server -p 8001 -c-1 dist/pwa-demo"}}Copy the code

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

{
  "posts": [{ "id": 1."title": "json-server"."author": "typicode"}]."comments": [{ "id": 1."body": "some comment"."postId": 1}]."profile": { "name": "typicode"}}Copy the code

Write a small demo to simulate retrieving data from the back end

ng g s services/data
Copy the code
// data.service.ts
// Remember to introduce HttpClientModule in app.module.ts
import { Injectable } from '@angular/core';
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) {}

  // Instead of using any in real projects, you can define the corresponding interface based on the data type returned
  public getPosts(): Observable<any> {
    return this.http.get(this.dataUrl); }}Copy the code

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

// app.component.ts
import { 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; }); }}Copy the code
<div class="app">
  <h1>Hello PWA</h1>
  <br />
  {{ posts | json }}
</div>
Copy the code

So far, if the project is up and running, you should see the following page

3 broken network

Now let’s go Offline and see what happens. Press F12 to select NetWork and Offline.

After refreshing, we will find that our page is no longer loading properly

4 PWA appearance

Now it’s our PWA’s turn.

First install the PWA

ng add @angular/pwa
Copy the code

After the installation is complete you will notice that these files have changed

We’ll focus on the ngsw-config.json file here. The changes to other files are easy to understand

The files to be cached are defined in this file:

  • favicon.ico
  • index.html
  • manifest.webmanifest
  • JS and CSS bundles
  • All the files under assets

Next we configure the requested interface to ngsw-config.json. See Angular Service Worker Configuration for more information

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

After configuration, rebuild our project NPM Run Build: PWA

After the build is complete, we can start our project by using NPM Run Start: pWA. After successful startup, we should open http://127.0.0.1:8001 and see it

Again, we repeat the previous steps, disconnect the network and refresh it again. You should find that the page still loads normally.

Let’s test our cache again by following these steps to try it out

  1. Start by opening a traceless browsing window
  2. NPM run start: pWA starts and opens the page
  3. Close the TAB and close the HTTP-Server
  4. Make some changes to app.component.html
  5. After rebuilding, use http-server to start and open the page.

The result of the first startup

Change the text in app.component. HTML to Hello PWA Demo, Run NPM run build:pwa && NPM run start:pwa and open http://127.0.0.1:8001 again to find the result has not changed

At this point, we refresh again and see that the page refresh is what we changed

5 concludes

For more information, see the Angular official Service Work Configuration. I hope this article can help you improve the performance and experience of your front-end pages. The App Shell has a similar function to the PWA App Shell.

DevUI: Experiences make the world a better place!