如何使 Angular PWA 可安装？

Question

我正在尝试使用 Angular 制作可安装的 PWA。

按照docs，我运行ng add @angular/pwa 以使我的应用程序成为PWA。它工作得很好。然后我使用ng build 构建它并使用http-server 提供构建服务。

服务人员似乎工作正常，它缓存资产，在我禁用互联网时继续工作，等等。

但是，此时我希望它会询问用户是否要安装该应用程序，但事实并非如此。我检查了MDN guide，该应用程序似乎满足了所有要求。另一方面，web.dev page 表示要满足的安装标准之一是满足给定的用户参与启发式。

所以我不知道安装提示没有显示的原因，它可以是以下之间的任何一个：

• 安装错误
• 我正在通过桌面浏览器在 http://localhost 上对其进行测试
• 我必须满足参与标准

如果有帮助，这里是一些相关文件：

ma​​nifest.webmanifest

{
  "name": "SiAQ",
  "short_name": "siaq",
  "description": "Aplicativo móvel do Sistema de Atendimento aos Queimados (SiAQ)",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

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",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ]
}

Answer 1

显然，我的 PWA 收到了警告，因为在 manifest.webmanifest 中我将图标的用途设置为 "maskable any"。只需从所有图标中删除此属性（恢复为默认值）即可正常工作。

您可以通过打开开发工具并转到应用程序 -> 清单来检查您的 PWA 是否一切正常。

Answer 2

看起来你做的一切都很好。 @angular/pwa 应该从盒子里完成所有的工作。我唯一的猜测是您正在构建您的应用程序，而不是在 prod 模式下。

尝试执行以下步骤：

1. ng build --prod
2. cd dist/<proj_name>
3. http-server