如何更新我的 Progressive Web App 的主屏幕图标？答案

【问题标题】：How can I update home screen icon of my Progressive Web App?如何更新我的 Progressive Web App 的主屏幕图标？
【发布时间】：2018-01-07 08:52:19
【问题描述】：

我正在学习渐进式 Web 应用程序，并且我创建了具有所有 PWA 配置的 Angular 应用程序。然后我在 firebase 上托管了该应用程序并在我的 android 手机上打开它，并成功获得了将应用程序添加到主屏幕的提示。

但现在我已经更改了清单文件和 index.html 文件中的应用程序图标，然后再次部署了应用程序，但我手机上的主屏幕图标没有更新。我已经尝试卸载该应用程序然后重新安装，但它仍然在我的手机上显示旧图标。

所以我的问题是，如何更新用户设备上的主屏幕图标？这是我的配置文件。

manifest.json

{
  "short_name": "My Expense",
  "name": "Log My Expense",
  "start_url": "/",
  "theme_color": "#5FD4AF",
  "background_color": "#ffffff",
  "display": "standalone",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/assets/icons/cash-money-wallet_64.png",
      "sizes": "64x64",
      "type": "image/png"
    },
    {
      "src": "/assets/icons/cash-money-wallet_128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/assets/icons/cash-money-wallet_256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/assets/icons/cash-money-wallet_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
     "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LogMyExpensePwa</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="/assets/icons/cash-money-wallet_512.png">
  <link rel="manifest" href="/manifest.json">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="msapplication-starturl" content="/">
  <meta name="theme-color" content="#5FD4AF">
</head>
<body>
<app-root></app-root>
<noscript>
  JavaScript is required to run this application.
</noscript>
</body>
</html>

这里是申请链接：-https://logmyexpense.firebaseapp.com/

【问题讨论】：

更新应用的图标位于documentation.Changing your icon or name in the manifest will update the icon on the home screen after the user has subsequently opened the site. 另外，如果您遗漏了什么，请尝试检查Android Intent Filters。
我刚刚卸载了该应用程序并尝试再次将其添加到主屏幕。令人惊讶的是，这次它添加了新图标。在再次更改图标后，我肯定也会尝试文档方式。谢谢你的评论。很有用。
我必须更改 ngsw-config.json 中的 version 属性并在 Angular 应用程序中调用 SwUpdate.checkForUpdate() 才能获得新版本。不知道原生 pwa 中的等价物，也不确定它是否会更新图标（可能是）。 github.com/MintPlayer/MintPlayer/tree/master/…

标签： angular progressive-web-apps firebase-hosting

【解决方案1】：

听起来你在上面的 cmets 中得到了答案，我只是想抛出一些对我有帮助的东西。我的应用程序在 React 而不是 Angular 中（我是菜鸟，所以我不知道这是否重要，但我想记下以防万一）以及当我尝试在 src 中使用应用程序图标时（我的是在像你这样的“/assets”中）它没有通过刷新来更新图标。在这里要非常清楚，我只尝试了一次 - 但 DevTools 中的应用程序选项卡也没有看到我的图标。因此，我将图标放在图像文件夹中的公共文件夹中，当我重新安装应用程序时，它的图标完美无缺。我已经有那个文件夹来存放我的标签图标（忘记了它的技术术语），所以我不觉得我在添加任何让我的应用膨胀的东西，但这是我的看法。

不知道这是否有帮助，我没有去这个兔子洞试图弄清楚为什么我的没有捕捉到 src/assets 中的图像。

【讨论】：