Question

我正在学习渐进式网络应用程序，我创建了具有所有PWA配置的角度应用程序。然后我在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/

Answer 1

听起来像上面的评论中您得到了答案，我只是想提出一些对我有所帮助的东西。我的应用程序位于React而不是Angular中（我是一个菜鸟，所以我不知道这是否有关系，但我想记一下，以防万一）并且何时尝试在src中包含应用程序图标（我的是在像您这样的“ / assets”中），并没有刷新图标。为了清楚起见，我只尝试了一次-但是DevTools中的application标签也没有看到我的图标。因此，相反，我将图标放在图像文件夹中的公用文件夹中，当我重新安装该应用程序时，它的图标非常完美。我已经有了该文件夹来存放我的标签图标（忘记了该术语的技术术语），所以我不觉得自己在添加任何会使应用程序肿的东西，但这是我的看法。

不知道这是否有帮助，我没有走过这个兔子洞，试图弄清楚为什么我没有在src / assets中捕获图像。

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

1 个答案: