角度PWA–快速离线Angular 9 App

在本教程中，我们将看到如何启用Angular PWA以使应用程序使用缓存数据脱机工作。 角度PWA服务工作者将实现它并为我们缓存数据。用一个 PWA服务人员 可以创建本机移动应用程序。

角度PWA(Progressive Web App)

在angular中使用渐进式Web应用程序功能可使您的网站脱机使用。 PWA不需要使用其他方法来构建应用程序，它只是通过缓存所有图像，资产甚至API响应来增强您的应用程序，并使您的应用程序脱机工作。
无论是IOS还是Android，它都可以作为应用程序安装在用户的手机主屏幕上，而无需通过应用商店手动下载或安装。

添加角度PWA

如果要启动新应用程序，或者要添加现有应用程序。
Just the way we install NPM packages we will add the angular @angular/pwa package using 角度的’s CLI command.

ng add @angular/pwa

添加PWA后，您可以看到它已添加了一些新文件，即

• A manifest.webmanifest file,
• Different sizes of icons in the src/assets/icons folder,
• The ngsw-config.json service worker configuration.

清单JSON

The manifest.webmanifest file contains the application name, theme, and background color and list of different sizes of icons.
当您将应用程序添加到移动设备时，会应用此配置，它将创建一个将名称和图标添加到应用程序列表的Web视图，并且在运行该应用程序时将应用背景和主题颜色。

{
   "name":"angular-pwa",
   "short_name":"angular-pwa",
   "theme_color":"#1976d2",
   "background_color":"#fafafa",
   "display":"standalone",
   "scope":"/",
   "start_url":"/",
   "icons":[
      {
         "src":"assets/icons/icon-72x72.png",
         "sizes":"72x72",
         "type":"image/png"
      },
      {
         "src":"assets/icons/icon-96x96.png",
         "sizes":"96x96",
         "type":"image/png"
      },
      ...
   ]
}

ngsw-config

This ngsw-config.json is a file or you can say its an ❤️ of an angular PWA. From this, you can able to manage a variety of different things associated with PWA.
另外，这是我们缓存API端点的地方。

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

在进行其他操作之前，我们先构建并查看在开发人员控制台中可以看到的内容。

# Build the app with PRODUCTION
ng build --prod

# Go to DIST folder
cd dist/angular-pwa

# Serve with http-server
http-server -o

由于我们不在HTTPS协议上运行，因此找不到服务工作程序，但是您可以看到清单数据已加载。

缓存API端点和外部资源

To make our content available we can cache the response of the API endpoints just by mentioning the External Resources URL and API Endpoints into the ngsw-config.json file.

缓存外部资源

考虑我们将Google字体加载到我们的应用程序中，并且希望使其在没有网络的情况下加载。

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [...
        ],
        "urls": [
          "//fonts.googleapis.com/**"  // Cache external resource
        ]
      }
    }, ...
  ]
}

这将缓存我们包含在应用程序中的任何字体，并且将由服务工作者缓存。

缓存API端点

  {
    "$schema": "./node_modules/@angular/service-worker/config/schema.json",
    "index": "/index.html",
    "assetGroups": [...],
    "dataGroups": [
      {
        "name": "restapiexample dummuy API",
        "urls": ["http://dummy.restapiexample.com/api/v1/employees"],
        "cacheConfig": {
          "strategy": "freshness",
          "maxSize": 20,
          "maxAge": "12h",
          "timeout": "5s"
        }
      }
    ]
  }

数据组– 缓存配置

name : API组名称。
urls : 要缓存的API端点数组。
strategy : "freshness" 缓存策略。它将首先检查API状态或网络，然后回退到服务工作者缓存。
maxSize : 要缓存的响应数。
maxAge : 缓存响应有效的时间。
timeout : 与策略新鲜度值结合。

更新缓存

集成PWA时，即使刷新浏览器或重建角度应用程序，也将开始加载缓存数据。
为了避免我们可以使用角度服务工作程序库提供的软件更新，它将使我们能够确定是否有需要推送的更新。

import { Component } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';
...
export class AppComponent {
  constructor(private swupdate: SwUpdate) {
    // checks if update available
    this.swupdate.available.subscribe((event: any) => {
      // reload / refresh the browser
      this.swupdate.activateUpdate().then(() => document.location.reload());
    });
  }
}