抠丁客 抠丁客
项目
编辑 (2025/12/24)

PWA配置

渐进式Web应用是Web应用程序，虽然不如原生应用与操作系统集成得那么紧密，但可以利用原生功能。它们可以通过搜索引擎发现，只需轻点或点击即可安装在设备上，并且可以通过常规链接共享。它们还可以离线工作，并在有新内容时获得更新。

将您的Angular应用程序转换为PWA很容易。

1. 安装Angular PWA

在Angular应用程序的根文件夹中运行以下命令：

yarn ng add @angular/pwa

...或者...

npm run ng add @angular/pwa

这将安装@angular/service-worker包，并使您的默认应用程序成为PWA。或者，您可以添加project参数以定位工作空间中的特定应用程序：

yarn ng add @angular/pwa --project MyProjectName

以下是命令的输出：

因此，Angular CLI更新了一些文件并添加了其他一些文件：

  • ngsw-config.json是放置服务工作者配置的地方。并非所有PWA都有此文件。它是Angular特有的。
  • manifest.webmanifest是一个Web应用清单，以JSON格式提供有关您的应用的信息。
  • icons是Web应用清单中引用的占位符图标。我们稍后将替换这些。
  • angular.json具有以下修改：
    • assets包括_manifest.webmanifest_。
    • serviceWorker在生产构建中为true。
    • ngswConfigPath引用_ngsw-config.json_。
  • package.json将_@angular/service-worker_作为新依赖项。
  • app.config.ts导入ServiceWorkerModule并注册一个服务工作者文件名。
  • index.html具有以下修改：
    • 引用_manifest.webmanifest_的<link>元素。
    • 设置主题颜色的<meta>标签。

2. 更新Web应用清单

2.1. 设置应用程序名称

生成的清单中的name和short_name属性派生自您的项目名称。让我们更改它们。

打开_manifest.webmanifest_文件并更新name和short_name属性：

{
  /* 清单元数据的其余部分 */
  "short_name": "我的项目",
  "name": "我的项目：我的口号"
}

短名称必须非常短，因为它将在空间有限的地方显示，例如启动器和主屏幕。

2.2. 添加描述

我们刚刚添加的@angular/pwa原理图没有向清单文件中插入描述，但根据Web应用清单标准，您应该添加。

因此，打开_manifest.webmanifest_文件并放置描述，如下所示：

{
  /* 清单元数据的其余部分 */
  "description": "我的简短项目描述，让用户对我的应用有更好的了解"
}

另外，提供描述以及其他标准有助于必应网络爬虫索引您的应用，并自动将您的应用以.appx格式提交到Microsoft Store。

2.3. 设置应用颜色

Angular生成具有默认theme_color和background_color的清单文件。根据您的品牌标识更改这些：

打开_manifest.webmanifest_文件并更新theme_color和background_color属性：

{
  /* 清单元数据的其余部分 */
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

然后打开_index.html_并按如下更改主题颜色元标记：

<meta name="theme-color" content="#000000" />

2.4. 替换应用图标并添加启动画面

我们需要更新图标并添加一些启动画面。这通常很耗时，但我们将使用出色的pwa-asset-generator库。

首先，打开_manifest.webmanifest_文件并删除icons属性中的所有元素：

{
  /* 清单元数据的其余部分 */
  "icons": []
}

然后，在终端中运行以下命令（当然要更改路径）：

npx pwa-asset-generator /path/to/your/logo.png ./src/assets/pwa -i ./src/index.html -m ./src/manifest.webmanifest

再次打开_manifest.webmanifest_文件。您将看到：

{
  /* 清单元数据的其余部分 */
  "icons": [
    {
      "src": "../manifest-icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "../manifest-icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

除了更新的图标外，该库还将生成启动画面。但是，Apple要求将所有启动画面添加到_index.html_中，否则在启动时会显示空白屏幕。因此，以下标签将被插入到_index.html_文件中：

<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="assets/pwa/apple-icon-180.jpg"
/>
<link
  rel="apple-touch-icon"
  sizes="167x167"
  href="assets/pwa/apple-icon-167.jpg"
/>
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="assets/pwa/apple-icon-152.jpg"
/>
<link
  rel="apple-touch-icon"
  sizes="120x120"
  href="assets/pwa/apple-icon-120.jpg"
/>

<meta name="apple-mobile-web-app-capable" content="yes" />

<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-2048-2732.jpg"
  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-2732-2048.jpg"
  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-1668-2388.jpg"
  media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-2388-1668.jpg"
  media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-1536-2048.jpg"
  media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-2048-1536.jpg"
  media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-1668-2224.jpg"
  media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-2224-1668.jpg"
  media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-1620-2160.jpg"
  media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-2160-1620.jpg"
  media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-1242-2688.jpg"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-2688-1242.jpg"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-1125-2436.jpg"
  media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-2436-1125.jpg"
  media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-828-1792.jpg"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-1792-828.jpg"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-1080-1920.jpg"
  media="(device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-1920-1080.jpg"
  media="(device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-750-1334.jpg"
  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-1334-750.jpg"
  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-640-1136.jpg"
  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
  rel="apple-touch-startup-image"
  href="assets/pwa/apple-splash-1136-640.jpg"
  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>

3. 配置服务工作者

3.1 修改资源组

Angular定义了一些要由服务工作者缓存的静态文件，但它们并不100%准确。让我们更改它。

打开_ngsw-config.json_文件并将其内容替换为：

{
  "$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",
          "/common-es2015.*.js",
          "/main-es2015.*.js",
          "/polyfills-es2015.*.js",
          "/runtime-es2015.*.js",
          "/vendor-es2015.*.js"
        ]
      }
    },
    {
      "name": "modules",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/*-es2015.*.js",
          "!/common-es2015.*.js",
          "!/main-es2015.*.js",
          "!/polyfills-es2015.*.js",
          "!/runtime-es2015.*.js",
          "!/vendor-es2015.*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

如果您想缓存其他静态文件，请参阅Angular.io上的服务工作者配置文档。

3.2 设置数据组

这部分是您的项目特有的。我们建议非常谨慎地决定要缓存哪些端点。有关详细信息，请参阅Angular.io上的服务工作者配置文档。

在本文档中