Javascript 移动Safari上的PWA应用程序使用大量缓存？

我在iOS 12.4中运行了一个角度PWA应用程序。我们有一个按钮，用于查看每个用户配置文件的图像。当我们打开大约100或150张图像时，设置-->Safari-->高级-->网站数据-->我的应用显示150 MB的存储空间！！！并被评为最常用的数据

我应该在脱机模式下使用缓存来处理PWA，但如何删除此存储或防止图像在Mobile Safari上被PWA缓存

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "shell",
    "installMode": "prefetch",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/vendor.*.js",
        "/main.*.js",
        "/polyfills.*.js",
        "/runtime.*.js",
        "/*.js",
        "/*.woff",
        "/*.ttf",
        "!/*-sw.js",
        "/*.json"
      ]
    }
  }, {
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**",
        "/assets/images/**",
        "/profiles/**",
        "/*.(eot|svg|cur|png|gif|otf|ttf|woff|woff2|ani)"
      ]
    }
  }],
  "dataGroups": [{
    "name": "api",
    "version": 1,
    "urls": [
        "/api/**",
        "!/api/prescriptions/images/**",
        "!/**/*.*"
    ],
    "cacheConfig": {
      "strategy": "freshness",
      "maxSize": 1000,
      "maxAge": "7d",
      "timeout": "5s"
    }
  }]

}

---

在

ngsw config.json

中，您当前正在指定一个名为

api

的数据组。数据组用于动态存储HTTP请求及其与Angular应用程序版本无关的内容相关联的响应（例如API请求）。因此，当用户脱机时，响应仍然可用。根据

url

数组中的定义，数据组配置为缓存

/api/**

路由的所有HTTP请求/响应

请注意，在数据组

URL

中，因此图像路由的预期排除（

！api/处方/图像/***

）和所有文件（

！***

）都不起作用。因此，对

/api/**

的所有请求和响应都被缓存，包括图像

如果您根本不打算缓存API请求，只需删除

API

数据组：

"dataGroups": []

因此，不再进行动态缓存（包括图像）

如果确实要缓存某些API请求，则可以为

app

数据组使用更具体的URL，但不包括图像路由：

"dataGroups": [{
  "name": "api",
  "version": 1,
  "urls": [
    "/api/prescriptions/*"
  ],
  // …

检查缓存 为了便于调试，您可以借助Chrome DevTools（Windows、Linux:F12、macOS:⌥⌘一） 在“应用程序”选项卡中。到目前为止，Safari没有缓存检查器，但浏览器的行为应该相同

教程 正如您所要求的教程，以下是一些建议：

---

我添加了代码，但所有图像都随本页一起下载。您是否通过

api/处方/图像

路线发送图像？@christianliebel是。@christianliebel是否有angular应用程序的示例供我参考？另一个提示很重要，我需要让我的解决方案离线工作。使用此提示，此功能将丢失，不是吗？@MokholiaPokholia您的应用程序资产（在

assetGroups

中指定）仍将脱机可用，因此应用程序将运行。如上所述，您仍然可以选择在缓存中存储数据请求，方法是包括数据路由，但不包括映像路由。或者，您可以压缩图像和/或减少缓存项的

maxSize

，以消耗更少的空间。但是，请注意，

数据组

是一种动态缓存方法。只有在先前请求的情况下，才能脱机使用响应。此外，发送请求（用于操作数据）无法脱机工作。@MokholiaPokholia这就是为什么我更喜欢使用IndexedDB处理结构化数据，但如果您当前依赖HTTP（s）请求，这会给应用程序带来架构更改。您可能希望了解以下主题：脱机第一，数据同步，冲突解决。