如何使用Angular 8应用更新桌面上的pwa图标

问题描述 投票:0回答:1

我有一个使用Angular和PWA的项目。操作系统为Windows10。角核版本为8.2.14,pwa版本为0.803.19。清单文件是

{
  "name": "App Name",
  "short_name": "App Name",
  "theme_color": "#313643",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icon/72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
   ...etc
  ]
}

当我第一次在桌面上安装pwa时,清单文件是默认的,带有默认图标。然后,我更改了图标文件夹中的图标,并在清单中使用主题颜色更改了它们的路径。我尝试过几次重新安装该应用程序,但是主题和图标与默认设置相同。我检查了控制台-有新图标。提示安装该应用程序的方法相同。但是,当我单击安装时,已安装的应用程序图标和主题默认为angular。我什至试图重命名图标文件夹。它没有帮助。仅当我将主题明确粘贴为index.html主题颜色时,主题才会更改。有两个有趣的事情。首先是当我在已安装的应用程序上尝试使用RMB时,属性->更改图标,它只为我提供一个新图标,而没有角度默认值。但是,如果手动更改它并重新安装该应用程序,则图标再次是角度默认设置。其次,当我们首次尝试在另一台PC上安装该应用程序时,已安装的应用程序带有新图标。在我看来,PC上有某种缓存或某种缓存。我尚未找到有关此问题的任何信息。有人有什么想法吗?在生产中,这可能会成为一个问题,我认为这不是正确的行为。

这是我的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/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}
angular progressive-web-apps angular-pwa
1个回答
0
投票

您如何为ng-sw.config文件中的图标(静态资产)设置缓存策略?

[如果要手动删除软件缓存,则可以通过开发工具(如果与Chrome一起使用):

enter image description here

然后刷新页面,软件将再次缓存目标资产。然后,您应该看到新图像。

如果您想了解有关PWA的更多信息,have a look at the articles I wrote about them,从理论到具体示例。

© www.soinside.com 2019 - 2024. All rights reserved.