强制 Angular Service Worker 忽略外部图像

Question

我目前正处于使用 Angular 的 Service Worker 包创建 PWA 的最后阶段。我正在建设的网站目前有一个主页，其中包含来自外部 API（例如：http://blah.com/v2/{{id}}/icon.png）的 50 个动态模板图像。当前的 service worker 设置缓存这些图像并用完浏览器存储。这些图像每天都在变化，因此缓存它们并没有什么好处，而且有 50 张，所以它在浏览器中占用了很多 space。有没有办法防止缓存来自外部源的图像？

以下是我的 ngsw-config.json 文件的当前设置：

{
    "$schema": "./node_modules/@angular/service-worker/config/schema.json",
    "index": "/index.html",
    "dataGroups": [
        {
            "name": "api",
            "urls": ["/api", "/v2"],
            "cacheConfig": {
                "maxAge": "0u",
                "maxSize": 0,
                "strategy": "freshness"
            }
        }
    ],
    "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|webp|gif|otf|ttf|woff|woff2|ani)"
                ],
                "urls": [
                    "https://fonts.googleapis.com/**",
                    "https://fonts.gstatic.com/**"
                ]
            }
        }
    ]
}

dataGroups 部分中的随机 /v2/ 是我修复此问题的多次失败尝试中的最后一次。

我什至从 assetGroups 部分删除了所有图像文件结尾，但这也不起作用。

Answer 1

dataGroups 是我们不想缓存（版本化）的请求，而 assetGroups 是我们想要缓存（版本化）的请求。

使用以下配置：-

"dataGroups": [
        {
            "name": "api",
            "urls": ["/api"],
            "cacheConfig": {
                "maxAge": "0u",
                "maxSize": 0,
                "strategy": "freshness"
            }
        },
        {
                "name": "mycrapyimages",
                "urls": ["http://blah.com/v2"],
                "cacheConfig": {
                    "maxAge": "1u",
                    "maxSize": 1,
                    "strategy": "freshness"
                }
         }
        ],

从 assetGroups 部分删除所有图像文件结尾绝对不是解决方案。我们可能会将它们排除在测试目的之外，但让它们用于生产构建。

注意：-我故意将 maxAge 和 maxSize 保持为 1 ，您可以在测试时设置为 0。

强制 Angular Service Worker 忽略外部图像

Force Angular Service Worker to Ignore External Images

service-worker

angular

angular-service-worker