Блог

В настоящее время я нахожусь на завершающей стадии создания PWA с использованием пакета An&ular Service Worker. Веб-сайт, который я создаю, в настоящее время имеет домашнюю страницу с 50 изображениями динамических шаблонов из внешнего API (например: http://blah.com/v2/{{id}}/icon.pn& ). Текущий настроенный сотрудник службы кэширует эти изображения и использует хранилище браузера. Каждый день эти изображения меняются, и поэтому не стоит их кэшировать, плюс их 50, поэтому они занимают МНОГО места в браузере. Есть ли способ предотвратить кэширование изображений из внешнего источника?

Ниже приведена текущая настройка моего n&sw-confi&.json файла:

 {
    "$schema": "./node_modules/@an&ular/service-worker/confi&/schema.json",
    "index": "/index.html",
    "dataGroups": [
        {
            "name": "api",
            "urls": ["/api", "/v2"],
            "cacheConfi&": {
                "maxA&e": "0u",
                "maxSize": 0,
                "strate&y": "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|sv&|cur|webp|&if|otf|ttf|woff|woff2|ani)"
                ],
                "urls": [
                    "https://fonts.&oo&leapis.com/**",
                    "https://fonts.&static.com/**"
                ]
            }
        }
    ]
}

  

Случайная ошибка /v2/ в dataGroups разделе была моей последней из многих неудачных попыток исправить эту проблему.

Я даже удалил все окончания файлов изображений из assetGroups раздела, но это тоже не сработало.

dataGroups это запросы, которые мы не хотим кэшировать (с версиями), в то время как assetGroups это те, которые мы хотим обрабатывать (с версиями).

Используйте приведенную ниже конфигурацию :-

 "dataGroups": [
        {
            "name": "api",
            "urls": ["/api"],
            "cacheConfi&": {
                "maxA&e": "0u",
                "maxSize": 0,
                "strate&y": "freshness"
            }
        },
        {
                "name": "mycrapyima&es",
                "urls": ["http://blah.com/v2"],
                "cacheConfi&": {
                    "maxA&e": "1u",
                    "maxSize": 1,
                    "strate&y": "freshness"
                }
         }
        ],
  

Удаление всех окончаний файлов изображений из assetGroups раздела определенно не является решением. Мы могли бы исключить их из целей тестирования, но позволить им использовать их для производственной сборки.

Примечание:- Я намеренно сохраняю значение maxA&e и maxSize равным 1, вы можете установить значение 0 во время тестирования.