javascript - Mobile Safari 上的 PWA 应用程序使用大量缓存？

Question

我有一个在 iOS 12.4 中运行的 Angular PWA 应用程序。我们有一个按钮可以查看每个用户个人资料的图像。当我们打开大约 100 或 150 张图像时，然后设置 --> Safari --> 高级 --> 网站数据 --> 我的应用程序显示 150 MB 存储空间!!!并将其评为最常用的数据。

我应该在离线模式下使用缓存来运行 PWA，但我如何才能删除此存储或防止图像被 PWA 在 Mobile Safari 上缓存？

{
  "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"
    }
  }]

}

Answer 1

在 ngsw-config.json 中，您当前正在指定一个名为 api 的数据组。数据组用于动态存储 HTTP(S) 请求及其相关响应以及与 Angular 应用程序版本无关的内容(例如 API 请求)。因此，当用户离线时，响应仍然可用。如 urls 数组中所定义，数据组配置为缓存 /api/** 路由的所有 HTTP(S) 请求/响应。

请注意you can’t use negative glob patterns在数据组 urls 中，因此既不是有意排除图像路由 (!api/prescriptions/images/**) 也不是所有文件 (!**/*.*) 有效。因此，对 /api/** 的所有请求和响应都会被缓存——包括图像。

如果您根本不打算缓存 API 请求，只需删除 api 数据组:

"dataGroups": []

因此，将不再进行动态缓存(包括图像)。

如果您确实想要缓存某些 API 请求，您可以为 app 数据组使用不包含图像路由的更具体的 URL:

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

检查缓存

为了更方便调试，您可以借助Chrome DevTools(Windows、Linux:F12、macOS:⌥⌘I)分析缓存存储的内容应用程序标签。截至目前，Safari 没有缓存检查器，但浏览器的行为应该相同。

教程

根据您要求的教程，这里有一些建议:

• the official documentation of Angular’s service worker implementation
• this blogpost by Angular University
• my Angular PWA slide deck