René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Support caching opaque responses with freshness strategy in ngsw-config.json [PWA][SW]","articleBody":"# Caching opaque responses with freshness strategy in ngsw-config.json [PWA][SW]\r\n\r\n### Relevant Package\r\nThis feature request is for @angular/pwa.\r\n\r\n\r\n### Description\r\nThe SW might have an option to cache opaque responses in the freshness mode since these caches are short-lived and therefore having an inadequate response would be quickly updated/removed.\r\n\r\nI was reading ngsw-worker.js's code and now I have one question.\r\nIn the next function, what is the purpose of `okToCacheOpaque`? Is it to avoid having the opaque answers cached or just to the opposite? What is the real usage of this variable now?\r\nCould this variable be used to cache opaque responses?\r\n\r\n```javascript\r\n/**\r\n         * Operation for caching the response from the server. This has to happen all\r\n         * at once, so that the cache and LRU tracking remain in sync. If the network request\r\n         * completes before the timeout, this logic will be run inline with the response flow.\r\n         * If the request times out on the server, an error will be returned but the real network\r\n         * request will still be running in the background, to be cached when it completes.\r\n         */\r\n        cacheResponse(req, res, lru, okToCacheOpaque = false) {\r\n            return __awaiter$1(this, void 0, void 0, function* () {\r\n                // Only cache successful responses.\r\n                if (!res.ok || (okToCacheOpaque \u0026\u0026 res.type === 'opaque')) {\r\n                    return;\r\n                }\r\n                // If caching this response would make the cache exceed its maximum size, evict something\r\n                // first.\r\n                if (lru.size \u003e= this.config.maxSize) {\r\n                    // The cache is too big, evict something.\r\n                    const evictedUrl = lru.pop();\r\n                    if (evictedUrl !== null) {\r\n                        yield this.clearCacheForUrl(evictedUrl);\r\n                    }\r\n                }\r\n                // TODO: evaluate for possible race conditions during flaky network periods.\r\n                // Mark this resource as having been accessed recently. This ensures it won't be evicted\r\n                // until enough other resources are requested that it falls off the end of the LRU chain.\r\n                lru.accessed(req.url);\r\n                // Store the response in the cache (cloning because the browser will consume\r\n                // the body during the caching operation).\r\n                yield (yield this.cache).put(req, res.clone());\r\n                // Store the age of the cache.\r\n                const ageTable = yield this.ageTable;\r\n                yield ageTable.write(req.url, { age: this.adapter.time });\r\n                // Sync the LRU chain to non-volatile storage.\r\n                yield this.syncLru();\r\n            });\r\n        }\r\n```\r\n\r\n### Describe the solution you'd like\r\nCaching opaque responses in the freshness mode of dataGroups in ngsw-config.json\r\n\r\n\r\n### Describe alternatives you've considered\r\nhttps://medium.com/@sascha.wolff/how-to-use-angular-6-service-worker-for-dynamically-loading-images-f4f6f497699f\r\n","author":{"url":"https://github.com/borjapazr","@type":"Person","name":"borjapazr"},"datePublished":"2019-06-11T07:22:55.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4},"url":"https://github.com/30968/angular/issues/30968"}