0

我有一个 Angular 和 PWA 的项目。操作系统为 Windows 10。角核版本为 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)"
        ]
      }
    }
  ]
}

4

1 回答 1

0

您是如何为ng-sw.config文件中的图标（静态资产）设置缓存策略的？

如果你想手动删除 SW 缓存，你可以通过开发工具来完成（如果你使用 Chrome）：

在此处输入图像描述

然后刷新页面，SW会再次缓存目标资产。然后，您应该会看到新图像。

如果您想了解更多关于 PWA的信息，请查看我写的关于它们的文章，从理论到具体示例。

来自 Angular 文档：

在 Angular 服务工作者的上下文中，“版本”是代表 Angular 应用程序的特定构建的资源集合。每当部署应用程序的新构建时，服务工作者都会将该构建视为应用程序的新版本。即使只更新一个文件也是如此。在任何给定时间，Service Worker 的缓存中可能有多个版本的应用程序，并且可能同时为它们提供服务。

如果您使用较新的资产进行了新构建并部署了它，用户应该在刷新页面或新的 SW 版本激活时获得它。可能是新的软件安装在客户端，但它没有激活，因为用户仍然至少有一个浏览器选项卡在运行旧软件的地方打开。

这与您更改 webmanifest 文件中的任何内容（对于主屏幕图标）相同。用户一刷新应用程序，就会提供新图标。

要以编程方式删除所有缓存内容（否则提供要匹配的特定缓存名称）：

if ('caches' in window) {
    caches.keys()
      .then(function(keyList) {
          return Promise.all(keyList.map(function(key) {
              return caches.delete(key);
          }));
      })
}
于 2019-11-28T15:20:25.890 回答