Precached content filesizes are duplicated on page reload

[Bytons]

Library Affected:
workbox-sw v. 3.6.3

Browser & Platform:
all browsers

Precached content filesizes are duplicated on page reload:
On initial install the precached assets are added to the storage and when you reload they duplicate in size even though you cannot visibily see it in the cached files themselves in the devtools. The temp cache seems to hang around as empty. And when an actual change happens in the source files the temp cache is again populated making the cache storage now triplicate of the original.

So initially the assets are precached on install (3mb) > reload > it's now 6 mb, yet the files in the actual cache have not changed size > source files change and temp cache is populated > total cache storage is now 12 mb (assuming the sourcefiles size didn't actually change dramatically).

Here is a 15mb file that is the only thing in the cache storage

And here is the total cache storage size displayed after page reload (and sourcefiles have not changed on pagereload

The same issue can also be seen by logging the storage quota and usage, it displays the total as duplicate of the only thing stored in the cache.

 const _storageStats = await navigator.storage.estimate();
        console.log(_storageStats);
output: {quota: 16695868074, usage: 33681672}

[jeffposnick]

Does this amount to a bug report about Chrome DevTool's storage quota interface, or do you believe that Workbox is storing more data than it should be?

I know that there were several issues with how quota info is displayed in DevTools that the Chrome engineering team was working on—some of them might be better in the current Chrome Canary.

Storing new/modified URLs in the -temp cache while a new service worker waits to activate is expected behavior in Workbox right now, but that will likely change if/when #1793 is implemented.

[Bytons]

Does this amount to a bug report about Chrome DevTool's storage quota interface, or do you believe that Workbox is storing more data than it should be?

I believe workbox is storing the precached content somehow duplicated outside of the temp caching. I managed to log it increase in size on first page reload after precaching and then when I actually edited some of my source files the new precache was there waiting on top of that. Meaning when I had precached all my content initially on first page visit, it then duplicated the precached content size(but at least visibly not the files themselves) on a second page load. However the temp cache was empty since source files were not changed and no need to fill the temp cache was there until I actually changed the sources.

I know that there were several issues with how quota info is displayed in DevTools that the Chrome engineering team was working on—some of them might be better in the current Chrome Canary.

While I first noticed said issue in the chrome devtools, I also managed to log the issue with navigator.storage.estimate()

Also in firefox 64.

Storing new/modified URLs in the -temp cache while a new service worker waits to activate is expected behavior in Workbox right now, but that will likely change if/when #1793 is implemented.

Yep, this worked as intended.

[Bytons]

While this project of mine was not the one I got the issue with originally, I still managed to at least see some very weird amount of data stored in the cached storage. The site does put a lot of stuff in cache, but it seemed to show much more than it stored.

It didn't duplicate, but the amount did not even close to match that of the sizes of the cached files.

Using chrome stable
v: 71.0.3578.98

[jeffposnick]

I believe workbox is storing the precached content somehow duplicated outside of the temp caching.

I don't think that's the case, but you could get a compete dump of the entirety of the Cache Storage API entries for an origin with the following snippet:

for (const cacheName of await caches.keys()) {
  const cache = await caches.open(cacheName);
  for (const request of await cache.keys()) {
    console.log(`${cacheName} contains ${request.url}`);
  }
}

If you see multiple entries for resources, not withstanding the expected -temp content while a new service worker waits to activate, then that sounds like a bug in Workbox. I'm not seeing anything out of the ordinary when running that against https://bytons.github.io/aurelia_pwa/

Otherwise, there are a few issues that I've seen in the past related to how Chrome reports quota usage, and this might be related. Testing in Chrome Canary would help determine whether recent changes have improved things, but it's largely outside of Workbox's control.

[Bytons]

Could not reproduce it anymore on canary nor stable.

Might have been a fluke or some other unrelated error in my own project.